【Sass/SCSS】預(yù)加載器中的“軒轅劍”
博客說明
文章所涉及的資料來自互聯(lián)網(wǎng)整理和個人總結(jié)，意在于個人學(xué)習(xí)和經(jīng)驗匯總，如有什么地方侵權(quán)，請聯(lián)系本人刪除，謝謝！
說明
隨著前端技術(shù)發(fā)展的越來越迅速，前端的樣式也需要更加貼近時代的審美，那么CSS就需要承擔(dān)更多的工作，（強(qiáng)調(diào)！這不是煽情！這是宣講背景。??），為了給CSS懟上去，預(yù)加載器出現(xiàn)了，沒錯，CSS用上了武器。Sass/SCSS——預(yù)加載器中的“軒轅劍”，這也不是我?guī)退担撬约赫f的，下圖為例。
官網(wǎng)地址：SASS中文網(wǎng)
什么是Sass，它與SCSS是啥關(guān)系
感覺這里有點(diǎn)繞，這是怎么回事，明明是SASS，但是很多地方寫的是SCSS，網(wǎng)上一搜SCSS出現(xiàn)的全是SaSS的教程。
Sass (Syntactically Awesome StyleSheets)：
- 是由buby語言編寫的一款css預(yù)處理語言，有嚴(yán)格的縮進(jìn)風(fēng)格。
- 和css編寫規(guī)范有著很大的出入，是不使用花括號和分號的，這點(diǎn)讓很多前端pym很難接受。
Sass 是一款強(qiáng)化 CSS 的輔助工具，是對 CSS 的擴(kuò)展，它在 CSS 語法的基礎(chǔ)上增加了變量 (variables)、嵌套 (nested rules)、混合 (mixins)、繼承(extend)、導(dǎo)入 (inline imports) 等高級功能，這些拓展令 CSS 更加強(qiáng)大與優(yōu)雅。使用 Sass 以及 Sass 的樣式庫（如 Compass）有助于更好地組織管理樣式文件，以及更高效地開發(fā)項目， 其后綴是.sass。
優(yōu)點(diǎn)：使用 “縮進(jìn)” 代替 “花括號” 表示屬性屬于某個選擇器，用 “換行” 代替 “分號” 分隔屬性，很多人認(rèn)為這樣做比 SCSS 更容易閱讀，書寫也更快速。
SCSS (Sassy CSS)：
一款css預(yù)處理語言，SCSS 是 Sass 3 引入新的語法，其語法完全兼容 CSS3，并且繼承了 Sass 的強(qiáng)大功能。也就是說，任何標(biāo)準(zhǔn)的 CSS3 樣式表都是具有相同語義的有效的 SCSS 文件。SCSS 需要使用分號和花括號而不是換行和縮進(jìn)。SCSS 對空白符號不敏感，其實就和css3語法一樣，其后綴名是分別為 .scss。
此外，SCSS 也支持大多數(shù) CSS hacks 寫法以及瀏覽器前綴寫法 (vendor-specific syntax)，以及早期的 IE 濾鏡寫法。
安裝Sass
可以使用 npm來安裝 Sass。
npm install -g sass
Sass變量
變量是一個比較大的改變，Sass 變量可以存儲字符串、數(shù)字、顏色值、布爾值、列表、null 值
Sass 變量使用 $ 符號
語法
$variablename: value;
示例
$base-font: Helvetica, sans-serif;
$my-color: red;
$my-font-size: 18px;
body {
font-family: $base-font;
font-size: $my-color;
color: $y-font-size;
}
轉(zhuǎn)換為CSS代碼
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}
其實就是把變量的使用直接放入對應(yīng)的值內(nèi)。
變量的作用域
Sass的變量其實是有作用域的，Sass 變量的作用域只能在當(dāng)前的層級上有效果
$myColor: red;
h1 {
$myColor: green; // 只在 h1 里頭有用，局部作用域
color: $myColor; // green
}
p {
color: $myColor; // red
}
提升全局變量
Sass 中可以使用 !global關(guān)鍵詞來設(shè)置變量是全局的
$myColor: red;
h1 {
$myColor: green !global; // 全局作用域
color: $myColor; // green
}
p {
color: $myColor; // green
}
對于Sass全局變量，可以用一個文件來存儲，然后其他文件
@include來包含該文件，這樣讓代碼結(jié)構(gòu)清晰，修改也比較方便。
Sass的嵌套規(guī)則
這個是方便我們書寫的好東西，也是最顯而易見的新增。
嵌套
看看代碼的區(qū)別就了解了
scss代碼
nav {
ul {
margin: 0;
padding: 20px;
}
li {
color: #FFFFFF;
}
}
css代碼
nav ul {
margin: 0;
padding: 0;
}
nav li {
color: #FFFFFF;
}
發(fā)現(xiàn)下面的這種寫法比較麻煩，主要是對層級表現(xiàn)的不太明顯。
嵌套屬性
在sass中部分屬性也是可以嵌套的。
CSS 屬性中有一些有同樣的前綴，例如：font-family, font-size 和 font-weight ， text-align, text-transform 和 text-overflow。這些公共的屬性就可以抽離出來。
// scss
font: {
family: Helvetica, sans-serif;
size: 18px;
weight: bold;
}
// css
font-family: Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
導(dǎo)入文件@import
在組件化開發(fā)的年代，Sass當(dāng)然也要卷起來，利用@import可以讓我們減少 CSS 重復(fù)的代碼，節(jié)省開發(fā)時間。
語法
@import filename;
與CSS@import的區(qū)別
CSS @import 指令在每次調(diào)用時，都會創(chuàng)建一個額外的 HTTP 請求。
Sass @import 指令將文件包含在 CSS 中，不需要額外的 HTTP 請求。
下劃線underscore風(fēng)格命名
Sass的下劃線分割命名，我相信各位pym看了別人開源的代碼也會發(fā)現(xiàn)很多吧，類似_partial.scss、_colors.scss ，但是這種命名絕不是閑的蛋疼，恰恰是利用了Sass @import 導(dǎo)入文件的優(yōu)勢，讓導(dǎo)入的文件不被編譯成CSS。這種風(fēng)格也叫Sass Partials。
注意：請不要將帶下劃線與不帶下劃線的同名文件放置在同一個目錄下，比如，_colors.scss 和 colors.scss 不能同時存在于同一個目錄下，否則帶下劃線的文件將會被忽略。
混合@mixin
用來分組那些需要在頁面中復(fù)用的CSS聲明，可以通過向Mixin傳遞變量參數(shù)來讓代碼更加靈活，該特性在添加瀏覽器兼容性前綴的時候非常有用。
示例
@mixin important-text {
color: red;
font-size: 24px;
font-weight: bold;
}
感覺沒啥高大上的啊，是的，其實就是定一個代碼塊，讓別的代碼來復(fù)用的，你可以把它當(dāng)成一個公共方法。
@include 使用混入
.text {
@include important-text;
}
注意：Sass 的連接符號 - 與下劃線符號 _ 是相同的，也就是 @mixin important-text { } 與 @mixin important_text { } 是一樣的混入。
混入包含混入
@mixin special-text {
@include important-text;
@include important-color;
}
混入傳參數(shù)
混入可以接收參數(shù)。
@mixin bordered($color, $width) {
border: $width solid $color;
}
.my-text {
@include bordered(blue, 1px); // 調(diào)用混入，并傳遞兩個參數(shù)，計算邊框
}
這樣一看不是更像方法了嗎
混入可變參數(shù)
有時并不能確定一個混入到底要傳入多少參數(shù)，可以使用...。
@mixin box-shadow($shadows...) {
-moz-box-shadow: $shadows;
-webkit-box-shadow: $shadows;
box-shadow: $shadows;
}
.shadows {
@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
瀏覽器前綴使用混入
瀏覽器前綴使用混入也是非常方便的
@mixin transform($property) {
-webkit-transform: $property;
-ms-transform: $property;
transform: $property;
}
.myBox {
@include transform(rotate(20deg));
}
像類似的瀏覽器前綴簡直是必需品！
@extend 與 繼承
在HTML 中我們一個標(biāo)簽是不是這樣寫的 class="button-basic button-report"，有的可能有很多個，那就更長了。可以利用@extend 讓代碼得到復(fù)用。
語法
@extend 指令告訴 Sass 一個選擇器的樣式從另一選擇器繼承。
使用環(huán)境
如果一個樣式與另外一個樣式幾乎相同，只有少量的區(qū)別，則使用 @extend 。
示例
.button-basic {
border: none;
padding: 15px 30px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.button-report {
@extend .button-basic;
background-color: red;
}
.button-submit {
@extend .button-basic;
background-color: green;
color: white;
}
代碼解析
像.button-report需要用到.button-basic的基本屬性，就可以直接使用@extend .button-basic來獲取，這樣代碼的復(fù)用性就有了比較大的提高，而且結(jié)構(gòu)性也會越來愈好，隔壁好朋友HTML也不用天天吃“烤串”了哈??。
寫在最后的話
首先希望我的CSS寫的越來越好，其次，希望看到的pym也和我一樣，CSS寫的越來越好。畢竟Sass可是“軒轅劍”（Less出雙倍嗎？）
感謝
萬能的網(wǎng)絡(luò)
公眾號-歸子莫，小程序-小歸博客
