很詳細(xì)的sass入門指南，學(xué)習(xí)一下屋厘。原文sass入門指南
css預(yù)處理器已經(jīng)算不上一個(gè)新鮮的詞了涕烧，當(dāng)前比較有代表性的css預(yù)處理器有sass、less汗洒、stylus议纯。關(guān)于三者選擇問題一直都是比較受爭(zhēng)議的話題，這里就不在討論了溢谤，適合的就是最好的瞻凤。這篇文章主要會(huì)介紹一些sass的常見用法，當(dāng)然很多理論都是相通的世杀。
[圖片上傳失敗...(image-2759b3-1558100923537)]
在介紹sass前鲫构，我們先得明確幾點(diǎn)：
sass并不是css的替代品，它只是讓css變得更加高效玫坛、可維護(hù)
永遠(yuǎn)不要去修改生成后的css
部署到線上的是生成的css文件结笨，不是sass文件，sass的工作流如下圖
[圖片上傳失敗...(image-14e888-1558100923537)]
一、安裝sass
sass是基于ruby的產(chǎn)物炕吸，因此在安裝sass前需要先安裝ruby伐憾。(ps: 本機(jī)系統(tǒng)環(huán)境，win7 64位)
https://www.ruby-lang.org/zh_cn/downloads/
下載對(duì)應(yīng)系統(tǒng)的版本赫模，一路next即可树肃。安裝完成后，在命令行輸入ruby -v
可查看ruby版本瀑罗。
$ ruby -vruby 2.0.0p451 (2014-02-24) [x64-mingw32]
安裝完ruby后胸嘴，在命令行輸入gem install sass
即可安裝sass，安裝完后可通過sass -v
來查看sass版本斩祭。
$ sass -vSass 3.3.5 (Maptastic Maple)
二劣像、編譯sass文件
2.1 sass文件格式
sass有兩種可選的文件后綴.sass
和.scss
，兩者的主要區(qū)別就是在書寫格式上摧玫。
.sass
文件是縮進(jìn)式的寫法耳奕，對(duì)格式要求比較嚴(yán)謹(jǐn)，末尾不能有分號(hào)
.testmargin: 5px 10px
font-size: 14px
color: #333
.scss
文件的寫法和css一致
.test {margin: 5px 10px;font-size: 14px;color: #333;}
可以根據(jù)個(gè)人的書寫習(xí)慣來選擇這兩種風(fēng)格诬像，只要同一個(gè)文件中不混用即可屋群。(ps: 文章后面用到的代碼采用的是第二種風(fēng)格)
2.2 編譯sass
編譯單個(gè)文件
sass test.scss test.css
也可以設(shè)置輸出css文件的風(fēng)格
sass --style compressed test.scss test.css
輸出樣式的風(fēng)格可以有四種選擇，默認(rèn)為nested
nested：嵌套縮進(jìn)的css代碼
expanded：展開的多行css代碼
compact：簡(jiǎn)潔格式的css代碼
compressed：壓縮后的css代碼
watch單個(gè)文件
sass --watch test.scss:test.css
watch文件夾
sass --watch src:dest
三坏挠、sass語法
3.1 變量
普通變量
sass的一個(gè)重要特性就是引入了變量芍躏。我們可以把反復(fù)用到的屬性值或者經(jīng)常修改的值定義成變量，方便調(diào)用和修改降狠。
$base-gap: 10px;
$base-color: #333;
.test {margin-top: $base-gap;
color: $base-color;}
如果在字符串中引用變量纸肉，則需要將變量名寫在#{}
中。如：
$img-dir: "public/images/";
.test {background-image: url(#{$img-dir}icon.png);}
默認(rèn)變量
默認(rèn)變量用來提供sass的默認(rèn)值喊熟。它的含義是：如果這個(gè)變量被聲明賦值了柏肪，那就用它聲明的值，否則就用默認(rèn)值芥牌。這在書寫sass庫文件時(shí)非常有用烦味。設(shè)置默認(rèn)變量的方法也非常簡(jiǎn)單，只需在變量值后加上!default
即可壁拉。
$color: #ccc;
$color: #000 !default;
p {color: $color;}
多值變量
多值變量類似js中的數(shù)組谬俄，聲明時(shí)只需用空格將多個(gè)值隔開即可。如：
$colors: #fff #ccc #999 #666 #333;
我們可以通過
length($colors)
來獲取多值變量的值的個(gè)數(shù)弃理，通過
nth($colors, index)
來獲取第index個(gè)位置的值溃论。ps: index的取值范圍為1到length($colors)
。
$colors: #fff #ccc #999 #666 #333;
p::after { content: "#{length($colors)}";
// 5 color: nth($colors, 1); // #fff}
3.2 嵌套
嵌套是一個(gè)比較實(shí)用的功能痘昌，它不僅可以省去書寫大量重復(fù)選擇器的時(shí)間钥勋，還能夠讓代碼顯得更有條理炬转、更易維護(hù)。
.list {margin-top: 10;}
.list li {padding-left: 15px;}
.list a {color: #333;}
.list a:hover {text-decoration: none;}
用嵌套改寫
.list {margin-top: 10px;
li { padding-left: 15px;}
a { color: #333;
&:hover { text-decoration: none; }}
}
嵌套代碼中的&
表示父元素選擇器算灸。嵌套雖然很方便扼劈，但不建議嵌套層次太深，以免生成的css選擇器過長(zhǎng)菲驴。除了選擇器可以嵌套外荐吵，css屬性也可以嵌套(用的相對(duì)較少)，如：
.test {border: { width: 2px;
style: solid;
color: #000;}
}
3.3 sass導(dǎo)入文件
導(dǎo)入.sass或.scss文件
css有一個(gè)不太常用的特性赊瞬，即@import
導(dǎo)入功能先煎，它允許在一個(gè)css文件中導(dǎo)入其他css文件。然而巧涧，結(jié)果是只有執(zhí)行到@import
規(guī)則時(shí)薯蝎，瀏覽器才會(huì)去下載其他css文件，這會(huì)導(dǎo)致頁面樣式加載特別慢褒侧，從而容易出現(xiàn)頁面閃的問題良风。
sass也有@import
導(dǎo)入規(guī)則谊迄，與css不同的是闷供，sass中的@import
規(guī)則會(huì)在生成css文件時(shí)，把相關(guān)的文件導(dǎo)入合并成一個(gè)文件统诺，而無需瀏覽器去下載其他的文件歪脏。另外在被導(dǎo)入文件中定義的變量等也可以在導(dǎo)入文件中正常使用。
在使用@import
導(dǎo)入sass文件時(shí)粮呢，可以省略sass文件的后綴名.sass
或.scss
婿失，例如：
a.scssbody { background-color: #f00;}- style.scss@import "a";div { color: #333;}
編譯后的style.css
文件內(nèi)容如下:
body {background-color: #f00;}div {color: #333;}
如果你是編譯整個(gè)sass目錄的話，會(huì)發(fā)現(xiàn)一個(gè)問題啄寡，在生成style.css
的同時(shí)也生成了一個(gè)a.css
豪硅，這個(gè)結(jié)果并不是我們想要的，a.scss
作為一個(gè)中間文件挺物，一般情況下是不需要在生成css的懒浮。sass開發(fā)者也考慮到了這點(diǎn)，我們只需要在文件名前加上下劃線_
识藤，sass編譯的時(shí)候就會(huì)忽略這個(gè)文件砚著，@import
引用的時(shí)候可以加下劃線引用，也可以不加痴昧。還是上面的例子稽穆，我們可以進(jìn)行修改：
-```
_a.scssbody { background-color: #f00;}- style.scss@import "a";div { color: #333;}
這樣一來就只會(huì)生成style.css
文件，不會(huì)再生成多余的a.css
了赶撰。
導(dǎo)入css文件
當(dāng)然舌镶，如果你需要像原生css那樣去導(dǎo)入其他的css文件柱彻，也是可以的，如果符合以下三條中的任意一種情況乎折，sass就會(huì)認(rèn)為你想用css原生的@import
:
被導(dǎo)入的文件名以.css
結(jié)尾
被導(dǎo)入的文件是一個(gè)在線的url地址
以
@import url(...)
方式去導(dǎo)入文件
3.4 注釋
sass支持原生css的注釋格式/* 注釋內(nèi)容 */
绒疗，同時(shí)也支持類似js中的單行注釋// 注釋內(nèi)容
。對(duì)于單行注釋骂澄，sass會(huì)在生成的css文件中刪除單行注釋吓蘑，只保留css原生的注釋內(nèi)容，例如：
.test {margin: 10px; // 這塊注釋不會(huì)出現(xiàn)在生成的css文件中color: #333; /* 這塊注釋會(huì)出現(xiàn)在生成的css文件中 */}
當(dāng)然坟冲，如果你把多行注釋寫在原生css不允許的地方時(shí)磨镶，在編譯生成css文件時(shí)，sass會(huì)將這些注釋抹掉健提。例如：
.test {padding /* 這塊注釋不會(huì)出現(xiàn)在生成的css文件中 */: 10pxmargin: 5px /* 這塊注釋也不會(huì)出現(xiàn)在生成的css文件中 */ 10px;}
3.5 混合器mixin
簡(jiǎn)單混合器
sass中的混合器一般用來解決大段代碼重復(fù)的問題琳猫。比如我們經(jīng)常使用的單行文本溢出顯示省略號(hào)，可以使用@mixin
來定義一個(gè)簡(jiǎn)單的混合器：
@mixin ellipsis {width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
```
然后在需要用到的地方我們可以通過@include
來使用這個(gè)混合器：
```
.text {@include ellipsis;}
```
輸出的css為：
```
```
.text {width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
```
帶參數(shù)的混合器
混合器不僅可以實(shí)現(xiàn)代碼的重復(fù)利用私痹，還可以傳遞參數(shù)脐嫂，根據(jù)需要生成不同的css。這在跨瀏覽器的css3
兼容方面尤為好用紊遵。例如：
```
@mixin radius($value) {-moz-border-radius: $value;-webkit-border-radius: $value;border-radius: $value;}
```
使用時(shí)账千，我們只需傳入相應(yīng)的參數(shù)值即可。
```
.test {@include radius(3px);}
```
生成的css為：
```
.test {-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;}
```
另外我們還可以給參數(shù)提供默認(rèn)值暗膜，如：
```
@mixin link-colors($normal: #333, $hover: $normal, $visited: $normal) {color: $normal;&:hover { color: $hover;}&:visited { color: $visited;}}
```
調(diào)用時(shí)匀奏，可以傳參，也可以不傳：
```
.text {@include link-colors;}.error {@include link-colors(red);}a {@include link-colors(blue, green, yellow);}
```
生成的css為：
```
// 鑒于篇幅問題学搜，已將生成的代碼改成單行.text { color: #333;}.text:hover { color: #333;}.text:visited { color: #333;}.error { color: red;}.error:hover { color: red;}.error:visited { color: red;}a { color: blue;}a:hover { color: green;}a:visited {color: yellow;}
```
3.6 繼承extend
使用sass時(shí)娃善，繼承是一個(gè)很不錯(cuò)的減少css重復(fù)代碼的功能。繼承可以讓一個(gè)選擇器繼承另一個(gè)選擇器的所有樣式瑞佩，并聯(lián)合聲明聚磺。可以使用@extend
語法來實(shí)現(xiàn)繼承炬丸。
```
.text {color: #333;font-size: 14px;margin: 10px 0;}.error {@extend .text;color: #f00;}
```
上面代碼中瘫寝，.error
繼承了.text
中的所有樣式，并且.error
和.text
中的公共樣式會(huì)進(jìn)行聯(lián)合聲明御雕。生成的css為：
```
.text, .error {color: #333;font-size: 14px;margin: 10px 0;}.error {color: #f00;}
```
這種繼承雖然方便矢沿，但是也有一定的弊端。比如我們僅僅想繼承.text
類中的樣式酸纲，而實(shí)際并不需要.text
的這個(gè)類捣鲸。換句話說就是我們的html中并沒有class="text"
這樣的代碼，這樣的話生成的css中的.text
其實(shí)就是多余的闽坡。
對(duì)于這種情況栽惶，sass
3.2.0及以后的版本也給我們提供了解決方案：占位選擇器%愁溜。
占位選擇器%
占位選擇器的優(yōu)勢(shì)在于：聲明之后，如果不調(diào)用外厂，則不會(huì)產(chǎn)生類似.text
的多余css代碼冕象。占位選擇器通過%
標(biāo)識(shí)來定義，也是通過@extend
來調(diào)用汁蝶。
```
```
%text {color: #333;font-size: 14px;margin: 10px 0;}.warn {@extend %text;color: #fdd;}.error {@extend %text;color: #f00;}
```
生成的css為：
```
.warn, .error {color: #333;font-size: 14px;margin: 10px 0;}.warn {color: #fdd;}.error {color: #f00;}
```
這樣就不會(huì)再額外生成多余的樣式了渐扮。
3.7 sass條件判斷
@if添加判斷
sass中的@if
語句和js中的if
很相似∫疵蓿可以單獨(dú)使用墓律，也可以配合@else
使用。
```
$lte7: true; // 是否支持ie7以下版本$theme: yellow;.clearfix {@if $lte7 { zoom: 1;}&:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;}}body {@if $theme == red { background: rgba(255, 0, 0, 0.5);} @else if $theme == yellow { background: rgba(255, 255, 0, 0.5);} @else if $theme == black { background: rgba(0, 0, 0, 0.5);}}
```
生成css為：
```
.clearfix {zoom: 1;}.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}body {background: rgba(255, 255, 0, 0.5);}
```
三目運(yùn)算判斷
三目運(yùn)算符的語法為：
```
@if($condition, $condition_true, $condition_false)
```
幔亥，例如：
```
$fontBold: true;.title {font-weight: if($fontBold, bold, normal);}
```
生成的css為
```
.title {font-weight: bold;}
```
sass相關(guān)工具推薦
[sass在線編譯](http://sassmeister.com/)
[sass可視化編譯工具: Koala](http://koala-app.com/index-zh.html)
PS：更多前端資訊耻讽、技術(shù)干貨，請(qǐng)關(guān)注公眾號(hào)「**前端新視界**」帕棉，后臺(tái)回復(fù) “1” 獲取100本PDF前端電子書
回復(fù) “2” 獲取小編精選的Python編程電子書
