學(xué)習(xí)Sass（官網(wǎng)：Sass）之前需要了解什么是Sass,Sass全稱：Syntactically Awesome StyleSheets让网，中文的大概意思是“語(yǔ)法樣式表”煤杀。從字面意思來(lái)講，就是把css樣式增加了一些語(yǔ)法旁理。其實(shí)其功能也是差不多的。css本身是有自身的語(yǔ)法，但是并沒(méi)有變量需忿、條件判斷、循環(huán)蜡歹、函數(shù)等編程語(yǔ)言的基本語(yǔ)法屋厘，Sass就是提供了css缺失的功能。一般將Sass等稱為“Css預(yù)處理器”月而。
“Css預(yù)處理器”：
CSS 預(yù)處理器是一種語(yǔ)言用來(lái)為 CSS 增加一些編程的的特性汗洒，無(wú)需考慮瀏覽器的兼容
性問(wèn)題，例如你可以在 CSS 中使用變量父款、簡(jiǎn)單的程序邏輯溢谤、函數(shù)等等在編程語(yǔ)言中的一些
基本技巧瞻凤，可以讓你的 CSS 更見(jiàn)簡(jiǎn)潔，適應(yīng)性更強(qiáng)世杀，代碼更直觀等諸多好處
作為css預(yù)處理器阀参，不僅僅只有Sass一種，還包括LESS(官網(wǎng)：LESS)瞻坝、Stylus（官網(wǎng)：Stylus）,它們之間的異同這里不再贅述蛛壳，如果感興趣的朋友可以查看這篇文章，本文主要介紹Sass所刀。如果你對(duì)為什么選擇Sass有疑問(wèn)衙荐，請(qǐng)查看視頻《How I use SASS》（自備梯子）
環(huán)境安裝
Sass是使用Ruby開(kāi)發(fā)的，在使用之前需要電腦安裝Ruby環(huán)境(本文基于mac浮创，其他系統(tǒng)請(qǐng)自行Google,Google請(qǐng)自備梯子)忧吟。
詳細(xì)查看：教程0--教程3。地址：https://ruby-china.org/wiki/install_ruby_guide-
安裝Sass gem
gem install sass查看安裝是否成功：
sass -v能夠輸出版本號(hào)蒸矛，表示安裝成功瀑罗。
預(yù)處理
-
通過(guò)命令行運(yùn)行sass
sass input.scss output.css將input.scss 轉(zhuǎn)換為css文件
-
監(jiān)控Sass文件的變化，自動(dòng)轉(zhuǎn)換為css文件
- 監(jiān)控單個(gè)文件
sass input.scss output.css - 監(jiān)控目錄
sass --watch app/sass:public/stylesheets
- 監(jiān)控單個(gè)文件
-
編譯風(fēng)格：詳細(xì)查看編譯風(fēng)格文檔
- nested：嵌套縮進(jìn)的css代碼雏掠，它是默認(rèn)值斩祭。
- expanded：沒(méi)有縮進(jìn)的、擴(kuò)展的css代碼乡话。
- compact：簡(jiǎn)潔格式的css代碼摧玫。
- compressed：壓縮后的css代碼。(生產(chǎn)環(huán)境使用)
ex:
sass --style compressed test.sass test.css
語(yǔ)法
-
展現(xiàn)方式绑青，有sass和scss兩種诬像。其不同點(diǎn)在下面代碼中可以非常清晰的看到。
sass樣式:
$font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack color: $primary-colorscss樣式：
$font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; }sass的樣式是Sass剛剛問(wèn)世的時(shí)候的樣式闸婴，后來(lái)隨著發(fā)展增加了scss的樣式坏挠，目前兩種樣式Scss都是支持的。sass沒(méi)有花括號(hào)邪乍，與原生的css樣式相差較大降狠，scss基本上是和css的代碼樣式是一樣的，更符合之前寫css代碼習(xí)慣庇楞。我個(gè)人建議使用第二種scss的方式榜配。
-
注釋
Sass注釋包括三中注釋風(fēng)格：
//注釋、/* 注釋 */吕晌、/*! 注釋 */蛋褥。下面分別介紹不同的注釋方式。-
//注釋：?jiǎn)涡凶⑨尵Σ担A(yù)處理后消失烙心，只存在sass文件中膜廊。 -
/* 注釋 */：標(biāo)準(zhǔn)css注釋，會(huì)保留到編譯后的文件中弃理。 -
/*! 注釋 */：常用于版權(quán)聲明溃论，使用壓縮模式預(yù)處理后，依舊會(huì)保留此注釋痘昌。
-
-
變量
Scss中的變量定義使用
$開(kāi)頭钥勋，例如：$my-color: #333需要調(diào)用的地方直接：body { color: $my-color }下面查看完整例子：
$font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; }預(yù)處理后生成的代碼：
body { font: 100% Helvetica, sans-serif; color: #333; }變量調(diào)用還有另外一種方式：
$left: left; body{ margin-#{$left}:10px; }這種方式是將變量嵌套在字符串中，使用
#{}辆苔。 -
嵌套
Sass 支持標(biāo)簽屬性等嵌套算灸。
標(biāo)簽嵌套，Sass代碼如下：
nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } }預(yù)處理后的css代碼如下：
nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; }屬性嵌套
Sass代碼(切記不要講屬性color后面的
:漏掉)：
p {
border: {
color: red;
}
}
```
預(yù)處理后css代碼：
```css
p {
border-color: red;
}
```
引用父類元素驻啤。使用符號(hào)`&`
Sass代碼：
```scss
a {
&:hover { color: blue; }
}
```
預(yù)處理后的css代碼：
```css
a : hover {
color: blue;
}
```
高級(jí)用法
-
局部模板
在Sass中菲驴，可以創(chuàng)建一個(gè)局部文件，然后在其他的文件中引入局部文件骑冗。局部文件的命名一般以
_開(kāi)頭赊瞬，如_partial.scss。在另一文件中可以同過(guò)@import引入,這樣在瀏覽器看到css文件只有一個(gè)贼涩。 -
導(dǎo)入局部文件
導(dǎo)入局部文件的關(guān)鍵字是
@import巧涧。其不僅僅可以import.scss文件，還可以import.css文件遥倦，當(dāng)導(dǎo)入.css功能時(shí)谤绳，同css中@import "file.css"的功能一致。局部Sass文件：
// _reset.scss html, body, ul, ol { margin: 0; padding: 0; }導(dǎo)入局部文件：
// base.scss @import 'reset'; body { font: 100% Helvetica, sans-serif; background-color: #efefef; }最終生成的css文件：
html, body, ul, ol { margin: 0; padding: 0; } body { font: 100% Helvetica, sans-serif; background-color: #efefef; } -
Mixins（混合）
Mixins定義方式：
@mixin Mixins名稱（參數(shù):參數(shù)值）{ /*公用樣式*/ }定義成為模塊后袒哥，需要通過(guò)
@include進(jìn)行調(diào)用mixin缩筛，調(diào)用代碼如下：selector { @includ Mixins名稱(參數(shù)值); }下面來(lái)看一個(gè)例子：
Sass 文件:
@mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(10px); }預(yù)處理后的css文件：
.box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; } -
Extend/Inheritance(擴(kuò)展或繼承)
Sass中可以從一個(gè)選擇器，繼承另一個(gè)選擇器堡称。其關(guān)鍵字是：
@extend瞎抛。下面看一個(gè)例子，可以直觀的展現(xiàn)繼承關(guān)系：
Sass代碼：
.message { border: 1px solid #ccc; padding: 10px; color: #333; } .success { @extend .message; border-color: green; } .error { @extend .message; border-color: red; } .warning { @extend .message; border-color: yellow; }上面例子中却紧，
.success婿失、.error、.warning都通過(guò)@extend關(guān)鍵字繼承了.message選擇器啄寡。下面看一下生成的css代碼：.message, .success, .error, .warning { border: 1px solid #cccccc; padding: 10px; color: #333; } .success { border-color: green; } .error { border-color: red; } .warning { border-color: yellow; } -
操作符
在學(xué)習(xí)一門新的編程語(yǔ)言中基本上都會(huì)有介紹操作符的章節(jié)，但是css這門獨(dú)特的編程語(yǔ)言確沒(méi)有這種方式哩照，但是通過(guò)Sass挺物，可以讓我們編寫css程序的時(shí)候也能有操作符、條件循環(huán)語(yǔ)句飘弧、自定義函數(shù)等识藤。下面將介紹操作符砚著。
在Sass中的操作符包括
+、-缭贡、*昧辽、/送矩。具體不用介紹，大家應(yīng)該都明白舌镶。下面我們直接來(lái)看一個(gè)例子：Sass代碼
.container { width: 100%; } article[role="main"] { float: left; width: 600px / 960px * 100%; } aside[role="complimentary"] { float: right; width: 300px / 960px * 100%; }預(yù)處理后的css代碼：
.container { width: 100%; } article[role="main"] { float: left; width: 62.5%; } aside[role="complimentary"] { float: right; width: 31.25%; }不僅僅上述的寬度可以通過(guò)操作符進(jìn)行技術(shù)，css的顏色也可以通過(guò)技術(shù)得到一個(gè)新的顏色豪娜，例如
#777 + #888其最后的結(jié)果是white -
數(shù)據(jù)類型
Sass支持7中主要的數(shù)據(jù)類型：
numbers：數(shù)字類型 (e.g. 1.2, 13, 10px)
strings：字符串類型餐胀，既可以是
""號(hào)，也可以是''瘤载，還可以直接省略 (e.g. "foo", 'bar', baz)colors: 顏色類型 (e.g. blue, #04a3f9, rgba(255, 0, 0, 0.5))
booleans: 布爾類型 (e.g. true, false)
nulls： 空類型 (e.g. null)
lists：集合否灾，可以通過(guò)空格或者逗號(hào)進(jìn)行l(wèi)ists值得分隔 (e.g. 1.5em 1em 0 2em, Helvetica, Arial, sans-serif)
maps ：鍵值對(duì) (e.g. (key1: value1, key2: value2))
-
條件語(yǔ)句
條件語(yǔ)句無(wú)非就是if-else格式，下面介紹一下格式鸣奔。
定義方式：
if方式墨技，關(guān)鍵字：
@if@if true { /* 樣式 */ }if-else,關(guān)鍵字：
@if @else@if true { /* 樣式 */ } @esle{ /* 樣式 */ } -
循環(huán)語(yǔ)句
SASS支持for循環(huán)：
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
```
也支持while循環(huán)：
```scss
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
```
each命令，作用與for類似：
```scss
@each $member in a, b, c, d {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}
```
-
自定義函數(shù)
Sass支持自定義函數(shù)挎狸。函數(shù)的定義和調(diào)用如下所示：
@function double($n) {
@return $n * 2;
}
#sidebar {
width: double(5px);
}
```
總結(jié)
Sass的基本用法扣汪，上文中都有介紹到，如果還有其它問(wèn)題伟叛，或本文沒(méi)有介紹到的地方私痹，請(qǐng)查看官方文檔。
