[TOC] > [參考,阮一峰](https://www.ruanyifeng.com/blog/2017/05/css-variables.html) ## 概述 變量名用`--`表示,因為`$foo`被 Sass 用掉了，`@foo`被 Less 用掉了。為了不產生沖突，官方的 CSS 變量就改用兩根連詞線了 ## 變量的聲明 可以把值放入`:root`中 ``` :root{ --main-color: #4d4e53; --main-bg: rgb(255, 255, 255); --logo-border-color: rebeccapurple; --header-height: 68px; --content-padding: 10px 20px; --base-line-height: 1.428571429; --transition-duration: .35s; --external-link: "external link"; --margin-top: calc(2vh + 20px); } ``` ## var() 函數 `var()`函數用于讀取變量 ``` a { color: var(--foo); text-decoration-color: var(--bar); } ``` `var()`函數還可以使用第二個參數 ``` color: var(--foo, #7F583F); ``` `var()`函數還可以用在變量的聲明 ``` :root { --primary-color: red; --logo-text: var(--primary-color); } ``` ## 變量值的類型 如果變量值是一個字符串，可以與其他字符串拼接 ``` --bar: 'hello'; --foo: var(--bar)' world'; ``` 如果變量值是數值，不能與數值單位直接連用,必須使用calc()函數 ``` .foo { --gap: 20; margin-top: calc(var(--gap) * 1px); } ``` ## 響應式布局 ``` body { --primary: #7F583F; --secondary: #F7EFD2; } a { color: var(--primary); text-decoration-color: var(--secondary); } @media screen and (min-width: 768px) { body { --primary: #F7EFD2; --secondary: #7F583F; } } ```