css預處理器scss怎么使用

這篇文章主要講解了“css預處理器scss怎么使用”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“css預處理器scss怎么使用”吧！

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怎么使用”的內容了，經過本文的學習后，相信大家對css預處理器scss怎么使用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！