簡介
Sass 有兩種語法規則(syntaxes),目前新的語法規則（從 Sass 3開始）被稱為 “SCSS”( 時髦的css（Sassy CSS）),它是css3語法的的拓展級，就是說每一個語法正確的CSS3文件也是合法的SCSS文件，SCSS文件使用.scss作為拓展名。第二種語法別成為縮進語法（或者 Sass），它受到了Haml的簡潔精煉的啟發，它是為了人們可以用和css相近的但是更精簡的方式來書寫css而誕生的。它沒有括號，分號，它使用 行縮進 的方式來指定css 塊，雖然sass不是最原始的語法，但是縮進語法將繼續被支持，在縮進語法的文件以 .sass 為拓展名。
注釋
有三種形式：
（1）//comment：該注釋只是在.scss源文件中有，編譯后的css文件中沒有。
（2）/! /：重要注釋，任何style的css文件中都會有，一般放置css文件版權說明等信息。
（3）/ /：該注釋在compressed的style的css中沒有，其他style的css文件都會含有。
Quick Start
Installation
Build
1.切換到.scss文件所在目錄
命令行下切換到代碼文件夾目錄（如Z:\），假設有文件test.scss文件，里面內容如下：（SASS完全支持css語法）
h1{ font-size:17px; } h2{ font-size:18px; }
2.編譯scss文件為css文件
運行命令：sass --style compressed test.scss test.css，即可生成壓縮版的css文件，並且命名為test.css。幾點說明：
（1）--style 后面可以有四個參數可選，分別為expanded、nested、compact、compressed，分別選用不同參數的效果可以自己嘗試體驗。
（2）test.scss和test.css文件目錄可以自定義，例如把Z盤sass目錄下的test.scss文件編譯為壓縮版的文件，並放置在Z盤css目錄下，那么命令即：sass --style compressed z:\sass\test.scss z:\css\test.css
（3）開發過程中，只需要修改scss文件，然后編譯；前端頁面只需要引用相應的css文件即可。
3.偵聽文件和文件夾
如果希望某一個scss文件或者相應的文件夾下面文件修改后，自動進行編譯，那么可以使用偵聽命令。
（1）偵聽文件：
sass --watch --style compressed test.scss:test.css
當test.scss文件有修改后，會自動編譯為test.css，並且是compressed的。
（2）偵聽文件夾：
sass --watch --style compressed sass:css
當sass文件夾下.scss文件有修改的時候，會自動編譯為與sass中文件同名的css文件。
備注：
（1）注意源文件和目標文件之間是冒號，與編譯命令中為空格不同。
（2）生成的map文件可以查找source map文件的作用。
Webpack
Webpack中也內置了sass-loader，通過簡單的配置既可以使用。不過需要注意的是，Webpack的sass-loader還是依賴於node-sass以及sass(gem)，所以如果安裝sass-loader報錯可以先嘗試安裝sass。
變量與選擇器
變量
定義
變量的定義一般以$開頭，某個變量的作用域僅限於他們定義的層級以及子層級。如果變量是定義在所有嵌套選擇器之外的，那么他們可以在各處被調用。
$color1:#aeaeae; .div1{ background-color:$color1; }
編譯后：
.div1 { background-color: #aeaeae; } /*# sourceMappingURL=test.css.map */
如果希望某個在子選擇器中定義的變量能夠成為全局變量，可以使用!global關鍵字：
#main { $width: 5em !global; width: $width; } #sidebar { width: $width; }
嵌套引用
嵌套引用在其他編程語言中即是字符串插值，需要用#{}進行包裹：
$left:left; .div1{ border-#{$left}-width:5px; }
變量計算
Sass中也是支持對於變量進行簡單的計算：
$left:20px; .div1{ margin-left:$left+12px; }
變量可以支持計算的類型，還是比較多的：
p { font: 10px/8px; // Plain CSS, no division $width: 1000px; width: $width/2; // Uses a variable, does division width: round(1.5)/2; // Uses a function, does division height: (500px/2); // Uses parentheses, does division margin-left: 5px + 8px/2px; // Uses +, does division font: (italic bold 10px/8px); // In a list, parentheses don't count }
選擇器
嵌套
.div1{ .span1{ height: 12px; } .div2{ width: 16px; } }
屬性也可以嵌套，比如border-color屬性，可以寫成：
p { border: { color: red; } }
注意，border后面必須加上冒號。
父元素引用
在嵌套的子層級中，允許使用&引用父元素：
.div1{ &:hover{ cursor: hand; } }
代碼重用
繼承
SASS允許一個選擇器，繼承另一個選擇器。比如，現有class1：
.class1{ font-size:19px; } .class2{ @extend .class1; color:black; }
注意：如果在class2后面有設置了class1的屬性，那么也會影響class2，如下：
.class1{ font-size:19px; } .class2{ @extend .class1; color:black; } .class1{ font-weight:bold; }
由此可以看出Scss也是遞歸編譯的。
引用外部css文件（Partials）
有時網頁的不同部分會分成多個文件來寫樣式，或者引用通用的一些樣式，那么可以使用@import。
@import "_test1.scss";
@import "_test2.scss";
@import "_test3.scss";
Mixin&Include
Mixin有點像C語言的宏（macro），是可以重用的代碼塊。
使用@mixin命令，定義一個代碼塊。
@mixin left { float: left; margin-left: 10px; }
使用@include命令，調用這個mixin。
div { @include left; }
參數與缺省值
-
邊距設置
@mixin common($value1,$value2,$defaultValue:12px){ display:block; margin-left:$value1; margin-right:$value2; padding:$defaultValue; } .class1{ font-size:16px; @include common(12px,13px,15px); } .class2{ font-size:16px; @include common(12px,13px); }
-
瀏覽器前綴設置設置
下面是一個mixin的實例，用來生成瀏覽器前綴。
@mixin rounded($vert, $horz, $radius: 10px) { border-#{$vert}-#{$horz}-radius: $radius; -moz-border-radius-#{$vert}#{$horz}: $radius; -webkit-border-#{$vert}-#{$horz}-radius: $radius; }
使用的時候，可以像下面這樣調用：
#navbar li { @include rounded(top, left); } #footer { @include rounded(top, left, 5px); }
編程式方法
流程控制
條件語句
@if可以用來判斷：
p { @if 1 + 1 == 2 { border: 1px solid; } @if 5 < 3 { border: 2px dotted; } }
配套的還有@else命令：
@if lightness($color) > 30% { background-color: #000; } @else { background-color: #fff; }
循環語句
SASS支持for循環：
@for $i from 1 to 10 { .border-#{$i} { border: #{$i}px solid blue; } }
也支持while循環：
$i: 6; @while $i > 0 { .item-#{$i} { width: 2em * $i; } $i: $i - 2; }
each命令，作用與for類似：
@each $member in a, b, c, d { .#{$member} { background-image: url("/image/#{$member}.jpg"); } }
函數
Sass允許用戶自定義函數，原型如下所示：
@function double($n) { @return $n * 2; } #sidebar { width: double(5px); }
顏色函數
SASS提供了一些內置的顏色函數，以便生成系列顏色。
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c