前面的話
現(xiàn)在，預處理器(如sass)似乎已經(jīng)成為開發(fā)CSS的標配，正如幾年前jQuery是開發(fā)JS的標配一樣。JS的querySelector借鑒了jQuery的選擇器思想，CSS選擇器也借鑒了預處理器的變量定義、選擇器嵌套、代碼塊重用等常用功能。本文將詳細介紹CSS選擇器的新用法
變量
一般地，我們在進行web開發(fā)時，會有一套變量定義規(guī)范，以sass為例，如下所示
// 顏色定義規(guī)范
$color-background : #222
$color-background-d : rgba(0, 0, 0, 0.3)
$color-highlight-background : #333
//字體定義規(guī)范
$font-size-small : 12px
$font-size-medium : 14px
$font-size-large : 18px而CSS變量的語法如下
【聲明變量】
變量必須以–開頭。例如–example-variable: 20px，意思是將20px賦值給–example-varibale變量
可以將聲明變量的語句置于任何元素內(nèi)，如果要設置全局變量，則可以設置為:root、body或html
:root{--bgColor:#000;}變量聲明就像普通的樣式聲明語句一樣，也可以使用內(nèi)聯(lián)樣式
<body style="--bgColor:#000">【使用變量】
使用var()函數(shù)使用變量，并且可以被使用在任意的地方。例如：var(–example-variable)會返回–example-variable所對應的值
<body style="--bgColor:#000;">
<div style="width: 100px;height: 100px;background-color: var(--bgColor)"></div>
</body>var()函數(shù)還有一個可選參數(shù)，用來設置默認值，當變量無法取得值時，則使用默認值
<div style="width: 100px;height: 100px;background-color: var(--bgColor,pink)"></div> [注意]關(guān)于CSS變量的詳細用法移步至此
@apply
介紹@apply之前，先介紹一下sass中的混合宏@mixin，指可以重用的代碼塊
比如，常見的文字溢出隱藏重用
@mixin overflow-ellipsis{
overflow:hidden;
text-overflow: ellipsis;
white-space: nowrap;
};
div {
@include overflow-ellipsis;
} 而應用規(guī)則集@apply也是實現(xiàn)類似的功能。與var()相比，@apply是引用樣式的集合，而var()是引用一個單獨的樣式值
:root{
--overflow-ellipsis:{
overflow:hidden;
text-overflow: ellipsis;
white-space: nowrap;
};
}
.title{
width:200px;
@apply --overflow-ellipsis; 新聞熱點
疑難解答
