本篇文章給大家?guī)砹岁P(guān)于css處理器scss的相關(guān)知識(shí)，css預(yù)處理器：用一種專門的編程語言，為CSS增加了一些編程的特性，將CSS作為目標(biāo)生成文件，然后開發(fā)者就只要使用這種語言進(jìn)行編碼工作。希望對(duì)大家有幫助。

1. 為什么會(huì)出現(xiàn)css預(yù)處理器

–CSS不是一種編程語言，僅僅只能用來編寫網(wǎng)站樣式，在web初期時(shí)，網(wǎng)站的搭建還比較基礎(chǔ)，所需要的樣式往往也很簡(jiǎn)單。但是隨著用戶需求的增加以及網(wǎng)站技術(shù)的升級(jí)，css一成不變的寫法也漸漸不再滿足于項(xiàng)目。沒有類似js這樣的編程語言所有的變量，常量以及其他的編程語法，css的代碼難免會(huì)顯得臃腫以及難以維護(hù)。但是又沒有css的替代品，于是css預(yù)處理器就作為css的擴(kuò)展，出現(xiàn)在了前端技術(shù)中。

2.常見的css預(yù)處理器

–發(fā)展至今，CSS預(yù)處理器的技術(shù)已經(jīng)相當(dāng)成熟，也涌現(xiàn)出了很多中不同的CSS預(yù)處理器語言。目前主流的有三種：Sass(Scss), Less, Stylus。

3.CSS預(yù)處理器的方便之處

–以Sass為例

–Sass主要的功能有：允許定義變量，允許CSS代碼嵌套，函數(shù)功能，Mixin，繼承等。 這些功能使得編寫CSS更加貼合編程語言的習(xí)慣，使得CSS代碼復(fù)用性更高，代碼功能更加直觀，也更加易于程序員的閱讀與維護(hù)。

4. Sass預(yù)處理器

變量

Sass允許定義變量用于代碼復(fù)用，使用 $ 進(jìn)行變量定義。在有使用相同屬性的代碼塊時(shí)，可以通過定義一個(gè)變量，將復(fù)用的屬性儲(chǔ)存到變量中。當(dāng)需要統(tǒng)一修改某個(gè)屬性值時(shí)，就無須在代碼中挨個(gè)去找需要修改的屬性，而是直接修改變量即可。

在公共組件藥品說明書中，對(duì)組件的邊框樣式進(jìn)行了單獨(dú)設(shè)置。此樣式也用于組件內(nèi)部各部分分隔的邊框。因此可以將樣式存儲(chǔ)到一個(gè)變量當(dāng)中進(jìn)行復(fù)用。

/deep/ .borderLayout.showBorder{ border: 1px solid #EBEEF5 } /deep/.borderLayout > p.showBorder.left { border-right: 1px solid #EBEEF5; }

通過scss的嵌套規(guī)則可以修改為：

$border: 1px solid #EBEEF5 /deep/ .borderLayout.showBorder{ border: $border } /deep/.borderLayout > p.showBorder.left { border-right: $border; }

嵌套

–Sass允許代碼嵌套，用于選擇后代。相對(duì)于css原生的后代選擇器，嵌套樣式的代碼，更加直觀。

/deep/ .ant-anchor-link-active>.ant-anchor-link-title{ color:#303133 }

公共組件‘藥品說明書’ 的css代碼塊，用于設(shè)置左側(cè)導(dǎo)航欄被鼠標(biāo)點(diǎn)擊選中時(shí)，title的顯示樣式,

使用嵌套規(guī)則將代碼進(jìn)行嵌套之后：

/deep/ .ant-anchor-link-active{  .ant-anchor-link-title{    color:#303133  } }

嵌套之后的代碼，更接近js一樣的結(jié)構(gòu)，而不再是一整行的選擇器。更有利于觀察出代碼間的各種關(guān)系。

此外，scss的也可以實(shí)現(xiàn)屬性嵌套以及偽元素嵌套，從而實(shí)現(xiàn)更加精簡(jiǎn)的代碼

Mixin

在JavaScript等編程語言中，允許將需要復(fù)用的代碼塊編寫成一個(gè)函數(shù)，在有需要的地方就調(diào)用這個(gè)表達(dá)式從而完成代碼編寫一次就可以完成多次復(fù)用的功能。scss的Mixin實(shí)現(xiàn)的也是類似的功能。但是Mixin的代碼塊不產(chǎn)生一個(gè)值。

定義Mixin代碼塊需要使用 @mixin ,調(diào)用一個(gè)已定義的Mixin代碼塊使用@include

依舊是以藥品說明書這個(gè)組件的代碼說明

/deep/ .borderLayout > p > .layoutCon {    overflow: hidden;    &:hover{ // 此處即為偽元素嵌套        overflow: auto;    } } .m-nav-bar{    display: flex;    flex-direction: column;    overflow: auto;    height:100%;    overflow: hidden;    &:hover{        overflow: auto;    } }

組件中有兩個(gè)選擇器都出現(xiàn)了同一段css代碼塊，其作用是隱藏頁面中的滾動(dòng)條，當(dāng)鼠標(biāo)hover到所屬區(qū)域時(shí)，滾動(dòng)條顯示。

隱藏滾動(dòng)條的代碼可以使用mixin單獨(dú)定義出來，然后再調(diào)用。

@mixin hide-scroll{  overflow: hidden;    &:hover{        overflow: auto;    } }  /deep/ .borderLayout > p > .layoutCon {   @include hide-scroll; }  .m-nav-bar{ 		@include hide-scroll;    display: flex;    flex-direction: column;    overflow: auto;    height:100%; }

繼承

繼承也是編程語言中，減少代碼量的重要功能，在scss中，繼承功能同樣重要。如果一個(gè)樣式與另外一個(gè)樣式幾乎相同，只有少量的區(qū)別，則使用繼承就顯得很有用。

當(dāng)需要繼承一段代碼時(shí)，可以使用@extend，extend之后的選擇器就是被繼承代碼。

（看起來，繼承和mixin實(shí)現(xiàn)的功能似乎是類似的。如果將@mixin的代碼，直接繼承，實(shí)現(xiàn)的功能會(huì)是相同的嗎？）

（學(xué)習(xí)視頻分享：css視頻教程）