1. 為什麼會出現css前處理器

–CSS不是一種程式語言，僅僅只能用來編寫網站樣式，在web初期時，網站的搭建還比較基礎，所需要的樣式往往也很簡單。但是隨著使用者需求的增加以及網站技術的升級，css一成不變的寫法也漸漸不再滿足於專案。沒有類似js這樣的程式語言所有的變數，常數以及其他的程式設計語法，css的程式碼難免會顯得臃腫以及難以維護。但是又沒有css的替代品，於是css前處理器就作為css的擴充套件，出現在了前端技術中。

2.常見的css前處理器

–發展至今，CSS前處理器的技術已經相當成熟，也湧現出了很多中不同的CSS前處理器語言。目前主流的有三種：Sass(Scss), Less, Stylus。

3.CSS前處理器的方便之處

–以Sass為例

–Sass主要的功能有：允許定義變數，允許CSS程式碼巢狀，函數功能，Mixin，繼承等。 這些功能使得編寫CSS更加貼合程式語言的習慣，使得CSS程式碼複用性更高，程式碼功能更加直觀，也更加易於程式設計師的閱讀與維護。

4. Sass前處理器

變數

Sass允許定義變數用於程式碼複用，使用 $ 進行變數定義。在有使用相同屬性的程式碼塊時，可以通過定義一個變數，將複用的屬性儲存到變數中。當需要統一修改某個屬性值時，就無須在程式碼中挨個去找需要修改的屬性，而是直接修改變數即可。

在公共元件藥品說明書中，對元件的邊框樣式進行了單獨設定。此樣式也用於元件內部各部分分隔的邊框。因此可以將樣式儲存到一個變數當中進行復用。

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

通過scss的巢狀規則可以修改為：

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

巢狀

–Sass允許程式碼巢狀，用於選擇後代。相對於css原生的後代選擇器，巢狀樣式的程式碼，更加直觀。

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

公共元件‘藥品說明書’ 的css程式碼塊，用於設定左側導航欄被滑鼠點選選中時，title的顯示樣式,

使用巢狀規則將程式碼進行巢狀之後：

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

巢狀之後的程式碼，更接近js一樣的結構，而不再是一整行的選擇器。更有利於觀察出程式碼間的各種關係。

此外，scss的也可以實現屬性巢狀以及偽元素巢狀，從而實現更加精簡的程式碼

Mixin

在JavaScript等程式語言中，允許將需要複用的程式碼塊編寫成一個函數，在有需要的地方就呼叫這個表示式從而完成程式碼編寫一次就可以完成多次複用的功能。scss的Mixin實現的也是類似的功能。但是Mixin的程式碼塊不產生一個值。

定義Mixin程式碼塊需要使用 @mixin ,呼叫一個已定義的Mixin程式碼塊使用@include

依舊是以藥品說明書這個元件的程式碼說明

/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;
   }
}

元件中有兩個選擇器都出現了同一段css程式碼塊，其作用是隱藏頁面中的卷軸，當滑鼠hover到所屬區域時，卷軸顯示。

隱藏卷軸的程式碼可以使用mixin單獨定義出來，然後再呼叫。

@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中，繼承功能同樣重要。如果一個樣式與另外一個樣式幾乎相同，只有少量的區別，則使用繼承就顯得很有用。

當需要繼承一段程式碼時，可以使用@extend，extend之後的選擇器就是被繼承程式碼。

（看起來，繼承和mixin實現的功能似乎是類似的。如果將@mixin的程式碼，直接繼承，實現的功能會是相同的嗎？）

（學習視訊分享：）

以上就是值得收藏css前處理器scss的使用總結的詳細內容，更多請關注TW511.COM其它相關文章！