這篇文章主要講解了“css預(yù)處理器scss怎么使用”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“css預(yù)處理器scss怎么使用”吧！

成都創(chuàng)新互聯(lián)是專業(yè)的鄰水網(wǎng)站建設(shè)公司，鄰水接單;提供做網(wǎng)站、成都做網(wǎng)站,網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行鄰水網(wǎng)站開發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

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

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

---

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

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

---

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

–以Sass為例

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

---

4. Sass預(yù)處理器

變量

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

在公共組件藥品說(shuō)明書中，對(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;
}

通過(guò)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
}

公共組件‘藥品說(shuō)明書’ 的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等編程語(yǔ)言中，允許將需要復(fù)用的代碼塊編寫成一個(gè)函數(shù)，在有需要的地方就調(diào)用這個(gè)表達(dá)式從而完成代碼編寫一次就可以完成多次復(fù)用的功能。scss的Mixin實(shí)現(xiàn)的也是類似的功能。但是Mixin的代碼塊不產(chǎn)生一個(gè)值。

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

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

/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代碼塊，其作用是隱藏頁(yè)面中的滾動(dòng)條，當(dāng)鼠標(biāo)hover到所屬區(qū)域時(shí)，滾動(dòng)條顯示。

隱藏滾動(dòng)條的代碼可以使用mixin單獨(dú)定義出來(lái)，然后再調(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%;
}

---

繼承

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

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

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

感謝各位的閱讀，以上就是“css預(yù)處理器scss怎么使用”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)css預(yù)處理器scss怎么使用這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

本文標(biāo)題：css預(yù)處理器scss怎么使用
本文URL：http://jinyejixie.com/article28/pgigcp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營(yíng)銷型網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)、網(wǎng)站制作、定制開發(fā)、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)