CSS變數能幫助我們做什麼
在一些命令式程式語言中，像是Java、C 亦然或是JavaScript，透過變數我們能夠追蹤某些狀態。變數是一種符號，關聯著一個特定的值，變數的值能隨著時間的推移而改變。
在像CSS這種宣告式語言中，隨著時間而改變的值並不存在，也就沒有所謂變數的概念了。
CSS 引入了一種層級變數的概念，從而能夠從容應對可維護性的挑戰。這會讓在整個CSS tree 中都可以像徵性的引用一個變數
一、什麼是CSS變數
CSS 變數目前有兩種形式：
##變數，就是擁有合法識別碼和合法的值。可以被使用在任意的地方。可以使用var()函數使用變數。例如：var(--example-variable)會傳回--example-variable所對應的值
自訂屬性。這些屬性使用--
where的特殊格式作為名字。例如--example-variable: 20px;即使一個css宣告語句。意思是將20px賦值給--example-varibale變數
二、變數的宣告
變數的命名
變數宣告使用兩根連接詞線--表示變量， $color是屬於Sass的語法，@color是屬於Less的語法，為避免衝突css原生變數使用--）
注意: 變數名稱大小寫敏感，
--header-color和--Header-Color是兩個不同變數
宣告方式
CSS變數宣告的方式非常簡單，如下，宣告了一個名叫color的CSS變數。
變數值的類型
如果變數值是一個字串，可以與其他字串拼接
--bar: 'hello';
--foo: var(--bar)' world';
body:after {
content: '--screen-category : 'var(--screen-category);
}登入後複製
如果變數值是數值，不能與數值單位直接連用,必須使用calc()函數，將它們連接
.foo {
--gap: 20;
/* 无效 */
margin-top: var(--gap)px;
}
.foo {
--gap: 20;
margin-top: calc(var(--gap) * 1px);
}登入後複製
如果變數值帶有單位，就不能寫成字串
/* 无效 */
.foo {
--foo: '20px';
font-size: var(--foo);
}
/* 有效 */
.foo {
--foo: 20px;
font-size: var(--foo);登入後複製
注意: 變數值只能用作屬性值，不能用作屬性名
.foo {
--side: margin-top;
/* 无效 */
var(--side): 20px;
}登入後複製
上面程式碼中，變數--side用作屬性名，這是無效的
三、CSS變數的繼承&作用域
自訂屬性同樣支援繼承。一個元素上沒有定義自訂屬性，該自訂屬性的值會繼承其父元素
class="one">
<p class="two">
<p class="three">
</p>
<p class="four">
</p>
<p>
</p>登入後複製
定義下面的CSS：
.two { --test: 10px; }
.three { --test: 2em; }登入後複製
在這個範例中，var(--test)的結果是：
- class="two" 對應的節點: 10px
- class="three" 對應的節點: element: 2em
- class="four" 對應的節點: 10px (inherited from its parent)
- class="one" 對應的節點: 無效值, 即此屬性值為未被自訂css變數覆寫的預設值
最頂層的作用域就是:root
四、回應式
p {
--color: #7F583F;
--bg: #F7EFD2;
}
.mediabox {
color: var(--color);
background: var(--bg);
}
@media screen and (min-width: 768px) {
body {
--color: #F7EFD2;
--bg: #7F583F;
}
}登入後複製
五、與預處理器的不同
1、預處理器變數不是即時的
$color:#7F583F;
@media screen and (min-width: 768px) {
$color: #F7EFD2;
}
.mediabox {
background: $color;
}登入後複製
編譯結果
.mediabox {
background: #7F583F;
}登入後複製
2、預處理器不能限定作用域
$zcolor:blue;
.ulbox {
$zcolor:red;
}
ul{
color: $zcolor;
}登入後複製
編譯為
3、預處理器變數不可互通
原生的CSS自訂屬性可以與任何CSS預處理器或純CSS文件一起使用
六、JS操作變數
CSS 變數可以和JS 互相互動
:root{
--testMargin:70px;
}
// 读取
var root = getComputedStyle(document.documentElement);
var cssVariable1 = root.getPropertyValue('--testMargin').trim();
console.log(cssVariable1); // '70px'
// 写入
document.documentElement.style.setProperty('--testMargin', '100px');
var cssVariable2 = root.getPropertyValue('--testMargin').trim();
console.log(cssVariable2); // '100px'
// 删除
document.documentElement.style.removeProperty('--testMargin');
var cssVariable3 = root.getPropertyValue('--testMargin').trim();
console.log(cssVariable3); // '70px'登入後複製
七、相容性
偵測瀏覽器是否支援CSS自定義屬性的方法
/*css*/
@supports ( (--a: 0)) {
/* supported */
}
@supports ( not (--a: 0)) {
/* not supported */
}
// Js
if (window.CSS && window.CSS.supports && window.CSS.supports('--a', 0)) {
alert('CSS properties are supported');
} else {
alert('CSS properties are NOT supported');
}登入後複製
總結
相較於傳統的LESS 、SASS 等預處理器變量，CSS 變數的優點在於:
- CSS 變數的動態性，能在頁面運行時更改，而傳統預處理器變數編譯後無法更改
- CSS 變數能夠繼承，能夠組合使用，具有作用域
- 配合Javascript 使用，可以方便的從JS 中讀/寫
#相關文章：
相關影片：
以上是什麼是CSS變數？ CSS變數的學習：CSS變數的繼承&作用域的詳細內容。更多資訊請關注PHP中文網其他相關文章！
