值得收藏css預處理器scss的使用總結

這篇文章為大家帶來了關於css處理器scss的相關知識，css預處理器：用一種專門的程式語言，為CSS增加了一些程式設計的特性，將CSS作為目標產生文件，然後開發者就只要使用這種語言進行編碼工作。希望對大家有幫助。

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影片教學）

#

以上是值得收藏css預處理器scss的使用總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！