{"id":6474,"date":"2022-03-17T13:29:34","date_gmt":"2022-03-17T05:29:34","guid":{"rendered":"http:\/\/jilin.hydesign.tw\/?p=6474"},"modified":"2022-03-22T17:06:48","modified_gmt":"2022-03-22T09:06:48","slug":"css-functions-var","status":"publish","type":"post","link":"http:\/\/jilin.hydesign.tw\/index.php\/2022\/03\/17\/css-functions-var\/","title":{"rendered":"\u5957\u7528\u5c6c\u6027\u5b9a\u7fa9 var()"},"content":{"rendered":"\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>\u8a2d\u5b9a\u5c6c\u6027 { &#8216;&#8211;\u81ea\u8a02\u8b8a\u6578\u540d\u7a31&#8217;, &#8216;\u503c&#8217; }\uff0c\u4e26\u4f7f\u7528<em> <\/em>var (&#8211;\u81ea\u8a02\u8b8a\u6578\u540d\u7a31) \u4f86\u5957\u7528\u5c6c\u6027\u8cea\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/* css\u7bc4\u4f8b-\u5ba3\u544a\u8b8a\u6578--main-bg-color *\/\n:root {\n  --main-bg-color: coral;\n}\n\n\/* css\u7bc4\u4f8b-\u5957\u7528\u8b8a\u6578 *\/\n#div1 {\n  background-color: var(--main-bg-color);\n}\n\n#div2 {\n  background-color: var(--main-bg-color);\n}<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/* css\u7bc4\u4f8b-\u591a\u8b8a\u6578\u5957\u7528 *\/\n:root {\n  --main-bg-color: coral;\n  --main-txt-color: blue;\n  --main-padding: 15px;\n}\n\n#div1 {\n  background-color: var(--main-bg-color);\n  color: var(--main-txt-color);\n  padding: var(--main-padding);\n}\n\n#div2 {\n  background-color: var(--main-bg-color);\n  color: var(--main-txt-color);\n  padding: var(--main-padding);\n}<\/pre>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading\">\u261e \u7bc4\u4f8b<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/* css\u7bc4\u4f8b-RWD\u6587\u5b57 *\/\n:root {\n  --font-size: 14px;\n}\n\np {\n  font-size: var(--font-size);\n}\n\nh1 {\n  font-size: calc(var(--font-size) * 1.5);\n}\n\n@media (min-width: 480px) {\n  :root {\n    --font-size: 18px;\n  }\n}<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/* css\u7bc4\u4f8b-\u6f38\u5c64\u80cc\u666f\u5b9a\u7fa9 *\/\n:root {\n  --c: 255;\n}\n\nbody {\n  background-image: linear-gradient(\n    rgb(\n      calc(var(--c) - 60),\n      calc(var(--c) - 40),\n      calc(var(--c))\n    ),\n    rgb(\n      calc(var(--c) - 20),\n      calc(var(--c) - 10),\n      calc(var(--c))\n    )\n  );\n}<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/* css\u7bc4\u4f8b-\u6574\u9ad4\u8a2d\u5b9a *\/\n:root {\n  --blue: #1e90ff;\n  --white: #ffffff; \n}\n\nbody {\n  background-color: var(--blue);\n}\n\nh2 {\n  border-bottom: 2px solid var(--blue);\n}\n\n.container {\n  color: var(--blue);\n  background-color: var(--white);\n  padding: 15px;\n}\n\nbutton {\n  --blue: #0000ff; \/* \u5982\u8a2d\u6b64\u503c\uff0c\u6b64\u503c\u6703\u5957\u7528\u81f3\u6240\u6709button *\/\n  background-color: var(--white);\n  color: var(--blue);\n  border: 1px solid var(--blue);\n  padding: 5px;\n}<\/pre>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u8a2d\u5b9a\u5c6c\u6027 { &#8216;&#8211;\u81ea\u8a02\u8b8a\u6578\u540d\u7a31&#8217;, &#8216;\u503c&#8217; }\uff0c\u4e26&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,53,12,4],"tags":[],"class_list":["post-6474","post","type-post","status-publish","format-standard","hentry","category-css","category-css-functions","category-front-end","category-notes"],"_links":{"self":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/6474","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/comments?post=6474"}],"version-history":[{"count":97,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/6474\/revisions"}],"predecessor-version":[{"id":7060,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/6474\/revisions\/7060"}],"wp:attachment":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/media?parent=6474"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/categories?post=6474"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/tags?post=6474"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}