不管是 Sass 的語法格式還是 SCSS 的語法格式，他們的功能都是一樣的。
特別提醒：“.sass”只能使用 Sass 老語法規則（縮進規則），“.scss”使用的是 Sass 的新語法規則，也就是 SCSS 語法規則（類似 CSS 語法格式）。
Sass 的編譯有多種方法：
命令編譯是指使用你電腦中的命令終端，通過輸入 Sass 指令來編譯 Sass。這種編譯方式是最直接也是最簡單的一種方式。因爲只需要在命令終端輸入：
單文件編譯：
sass <要編譯的Sass文件路徑>/style.scss:<要輸出CSS文件路徑>/style.css
這是對一個單文件進行編譯，如果想對整個項目所有 Sass 文件編譯成 CSS 文件，可以這樣操作：
多文件編譯：
sass sass/:css/
上面的命令表示將項目中“sass”文件夾中所有“.scss”(“.sass”)文件編譯成“.css”文件，並且將這些 CSS 文件都放在項目中“css”文件夾中。
缺點及解決方法：
在實際編譯過程中，你會發現上面的命令，只能一次性編譯。每次個性保存“.scss”文件之後，都得重新執行一次這樣的命令。如此操作太麻煩，其實還有一種方法，就是在編譯 Sass 時，開啓“watch”功能，這樣只要你的代碼進行修改，都能自動監測到代碼的變化，並且給你直接編譯出來：
sass --watch <要編譯的Sass文件路徑>/style.scss:<要輸出CSS文件路徑>/style.css例如：sass --watch sass/bootstrap.scss:css/bootstrap.css
2.GUI編譯
對於 GUI 界面編譯工具，目前較爲流行的主要有：
相比之下，推薦使用以下兩個：
最爲常見的一個錯誤就是字符編譯引起的。在Sass的編譯的過程中，是不是支持“GBK”編碼的。所以在創建 Sass 文件時，就需要將文件編碼設置爲“utf-8”。
另外一個錯誤就是路徑中的中文字符引起的。建議在項目中文件命名或者文件目錄命名不要使用中文字符。而至於人爲失誤造成的編譯失敗，在編譯過程中都會有具體的說明，大家可以根據編譯器提供的錯誤信息進行對應的修改。
三、Sass樣式輸出方式
在編譯的時候帶上參數“ --style nested”:
sass --watch test.scss:test.css --style nested
2.嵌套輸出方式 expanded
sass --watch test.scss:test.css --style expanded這個輸出的 CSS 樣式風格和 nested 類似，只是大括號在另起一行3.緊湊輸出方式 compact
在編譯的時候帶上參數“ --style compact”:
sass --watch test.scss:test.css --style compact
4.壓縮輸出方式 compressed
在編譯的時候帶上參數“ --style compressed”:
sass --watch test.scss:test.css --style compressed
壓縮輸出方式會去掉標準的 Sass 和 CSS 註釋及空格。
四、Sass基礎
Sass 的變量包括三個部分：
普通變量定義之後可以在全局範圍內使用。
sass 的默認變量僅需要在值後面加上 !default 即可。
$baseLineHeight:1.5 !default;
body{
line-height: $baseLineHeight;
}
編譯後的css代碼：
body{
line-height:1.5;
}
sass 的默認變量一般是用來設置默認值，然後根據需求來覆蓋的，覆蓋的方式也很簡單，只需要在默認變量之前重新聲明下變量即可。
$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{
line-height: $baseLineHeight;
}
編譯後的css代碼：
body{
line-height:2;
}
默認變量的價值在進行組件化開發的時候會非常有用。
3.局部變量和全局變量
css 的結果：代碼例子：
//SCSS $color: orange !default;//定義全局變量(在選擇器、函數、混合宏...的外面定義的變量爲全局變量) .block { color: $color;//調用全局變量 } em { $color: red;//定義局部變量 a { color: $color;//調用局部變量 } } span { color: $color;//調用全局變量 }
.block { color: orange; } em a { color: red; } span { color: orange; }上面的示例可以得知，在元素內部定義的變量不會影響其他元素。如此可以簡單的理解成，全局變量就是定義在元素外面的變量，如下代碼：
$color:orange !default;$color 就是一個全局變量而定義在元素內部的變量，比如 $color:red; 是一個局部變量。除此之外，Sass 現在還提供一個 !global 參數。
當在局部範圍（選擇器內、函數內、混合宏內...）聲明一個已經存在於全局範圍內的變量時，局部變量就成爲了全局變量的影子。基本上，局部變量只會在局部範圍內覆蓋全局變量。
上面例子中的 em 選擇器內的變量 $color 就是一個全局變量的影子。
什麼時候聲明變量？
創建變量只適用於感覺確有必要的情況下。不要爲了某些駭客行爲而聲明新變量，這絲毫沒有作用。只有滿足所有下述標準時方可創建新變量：
1. 該值至少重複出現了兩次；2. 該值至少可能會被更新一次；3. 該值所有的表現都與變量有關（非巧合）。基本上，沒有理由聲明一個永遠不需要更新或者只在單一地方使用變量。
4.嵌套
選擇器嵌套爲樣式表的作者提供了一個通過局部選擇器相互嵌套實現全局選擇的方法，Sass 的嵌套分爲三種：
避免選擇器嵌套：
爲了防止此類情況，我們應該儘可能避免選擇器嵌套。
5.混合宏
1、聲明混合宏
不帶參數混合宏：
在 Sass 中，使用“@mixin”來聲明一個混合宏。如：
@mixinborder-radius{
-webkit-border-radius: 5px;
border-radius: 5px;
}
其中 @mixin 是用來聲明混合宏的關鍵詞，有點類似 CSS 中的 @media、@font-face 一樣。border-radius 是混合宏的名稱。大括號裏面是複用的樣式代碼。
帶參數混合宏：
除了聲明一個不帶參數的混合宏之外，還可以在定義混合宏時帶有參數，如：
@mixin border-radius($radius:5px){
-webkit-border-radius: $radius;
border-radius: $radius;
}
2、調用混合宏
在實際調用中，其匹配了一個關鍵詞“@include”來調用聲明好的混合宏。例如在定義了一個圓角的混合宏“border-radius”:
@mixin border-radius{
-webkit-border-radius: 3px;
border-radius: 3px;
}
在一個按鈕中要調用定義好的混合宏“border-radius”，可以這樣使用：
button {@include border-radius;}
這個時候編譯出來的 CSS:
button {
-webkit-border-radius: 3px;
border-radius: 3px;
}
3、傳參Sass 的混合宏有一個強大的功能，可以傳參，那麼在 Sass 中傳參主要有以下幾種情形：
A) 傳一個不帶值的參數
在混合宏中，可以傳一個不帶任何值的參數，比如：
@mixin border-radius($radius){ -webkit-border-radius: $radius; border-radius: $radius; }
在混合宏“border-radius”中定義了一個不帶任何值的參數“$radius”，在調用的時候可以給這個混合宏傳一個參數值：
.box { @include border-radius(3px); }
這裏表示給混合宏傳遞了一個“border-radius”的值爲“3px”。編譯出來的 CSS:
在 Sass 的混合宏中，還可以給混合宏的參數傳一個默認值，例如：.box { -webkit-border-radius: 3px; border-radius: 3px; }B) 傳一個帶值的參數
@mixin border-radius($radius:3px){ -webkit-border-radius: $radius; border-radius: $radius; }
在混合宏“border-radius”傳了一個參數“$radius”，而且給這個參數賦予了一個默認值“3px”。
在調用類似這樣的混合宏時，會多有一個機會，假設你的頁面中的圓角很多地方都是“3px”的圓角，那麼這個時候只需要調用默認的混合宏“border-radius”:
但有的時候，頁面中有些元素的圓角值不一樣，那麼可以隨機給混合宏傳值，如：.btn { @include border-radius; }編譯出來的 CSS:
.btn { -webkit-border-radius: 3px; border-radius: 3px; }
編譯出來的 CSS:.box { @include border-radius(50%); }
Sass 混合宏除了能傳一個參數之外，還可以傳多個參數，如：.box { -webkit-border-radius: 50%; border-radius: 50%; }B) 傳多個參數
在混合宏“center”就傳了多個參數。在實際調用和其調用其他混合宏是一樣的：@mixin center($width,$height){ width: $width; height: $height; position: absolute; top: 50%; left: 50%; margin-top: -($height) / 2; margin-left: -($width) / 2; }
有一個特別的參數“…”。當混合宏傳的參數過多之時，可以使用參數來替代，如：.box-center { @include center(500px,300px); }編譯出來 CSS:
.box-center { width: 500px; height: 300px; position: absolute; top: 50%; left: 50%; margin-top: -150px; margin-left: -250px; }
在實際調用中：@mixin box-shadow($shadows...){ @if length($shadows) >= 1 { -webkit-box-shadow: $shadows; box-shadow: $shadows; } @else { $shadows: 0 0 2px rgba(#000,.25); -webkit-box-shadow: $shadow; box-shadow: $shadow; } }
編譯出來的CSS:.box { @include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2)); }
在 Sass 中通過關鍵詞 “@extend”來繼承已存在的類樣式塊，從而實現代碼的繼承。.box { -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2); box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2); }6.擴展和繼承
7.佔位符
%mt5 { margin-top: 5px; } %pt5{ padding-top: 5px; }這段代碼沒有被 @extend 調用，他並沒有產生任何代碼塊。只有通過 @extend 調用纔會產生代碼：
//SCSS %mt5 { margin-top: 5px; } %pt5{ padding-top: 5px; } .btn { @extend %mt5;@extend %pt5; } .block { @extend %mt5; span { @extend %pt5; } }//CSS .btn, .block { margin-top: 5px; } .btn, .block span { padding-top: 5px; }從編譯出來的 CSS 代碼可以看出，通過 @extend 調用的佔位符，編譯出來的代碼會將相同的代碼合併在一起。
8.混合宏 VS 繼承 VS佔位符
a) Sass 中的混合宏使用
總結：編譯出來的 CSS 清晰告訴了大家，他不會自動合併相同的樣式代碼，如果在樣式文件中調用同一個混合宏，會產生多個對應的樣式代碼，造成代碼的冗餘，這也是 CSSer 無法忍受的一件事情。不過他並不是一無事處，他可以傳參數。
個人建議：如果你的代碼塊中涉及到變量，建議使用混合宏來創建相同的代碼塊。
b) Sass 中繼承
總結：使用繼承後，編譯出來的 CSS 會將使用繼承的代碼塊合併到一起，通過組合選擇器的方式向大家展現，比如 .mt, .block, .block span, .header, .header span。這樣編譯出來的代碼相對於混合宏來說要乾淨的多，也是 CSSer 期望看到。但是他不能傳變量參數。
個人建議：如果你的代碼塊不需要專任何變量參數，而且有一個基類已在文件中存在，那麼建議使用 Sass 的繼承。
c) 佔位符
總結：編譯出來的 CSS 代碼和使用繼承基本上是相同，只是不會在代碼中生成佔位符的選擇器。那麼佔位符和繼承的主要區別的，“佔位符是獨立定義，不調用的時候是不會在 CSS 中產生任何代碼；繼承是首先有一個基類存在，不管調用與不調用，基類的樣式都將會出現在編譯出來的 CSS 代碼中。”
在 Sass 中註釋有兩種方式：
1、類似 CSS 的註釋方式，使用 ”/* ”開頭，結屬使用 ”*/ ”
2、類似 JavaScript 的註釋方式，使用“//”
兩者區別，前者會在編譯出來的 CSS 顯示，後者在編譯出來的 CSS 中不會顯示
10.數值類型
在 Sass 中包含以下幾種數據類型：
SassScript 也支持其他 CSS 屬性值（property value），比如 Unicode 範圍，或 !important 聲明。然而，Sass 不會特殊對待這些屬性值，一律視爲無引號字符串。使用 #{ }插值語句時，有引號字符串將被編譯爲無引號字符串，這樣方便了在混合指令 (mixin) 中引用選擇器名
1.@if@if 指令可以根據條件來處理樣式塊，如果條件爲 true 返回一個樣式塊，反之 false 返回另一個樣式塊。在 Sass 中除了 @if 之，還可以配合 @else if 和 @else 一起使用。
假設要控制一個元素隱藏或顯示，就可以定義一個混合宏，通過 @if...@else... 來判斷傳進參數的值來控制 display 的值。
@mixin blockOrHidden($boolean:true) {@if$boolean { @debug "$boolean is #{$boolean}"; display: block; } @else { @debug "$boolean is #{$boolean}"; display: none; } } .block { @include blockOrHidden; } .hidden{ @include blockOrHidden(false); }
@for $i from <start> through <end> @for $i from <start> to <end>
- $i 表示變量
- start 表示起始值
- end 表示結束值
這兩個的區別是關鍵字 through 表示包括 end 這個數，而 to 則不包括 end 這個數。
如下代碼，先來個使用 through 關鍵字的例子：
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
再來個 to 關鍵字的例子：
@for $i from 1 to 3 { .item-#{$i} { width: 2em * $i; } }
@for應用在網格系統生成各個格子 class 的代碼：
$grid-prefix: div !default; $grid-width: 60px !default; $grid-gutter: 20px !default; %grid { float: left; margin-left: $grid-gutter / 2; margin-right: $grid-gutter / 2; } @for $i from 1 through 12 { .#{$grid-prefix}#{$i}{ width: $grid-width * $i + $grid-gutter * ($i - 1); @extend %grid; } }3.@while@while 指令也需要 SassScript 表達式（像其他指令一樣），並且會生成不同的樣式塊，直到表達式值爲 false 時停止循環。這個和 @for 指令很相似，只要 @while 後面的條件爲 true 就會執行。
用例：
$types: 4; $type-width: 20px; @while$types > 0 { .while-#{$types} { width: $type-width + $types; } $types: $types - 1; }4.@each@each 循環就是去遍歷一個列表，然後從列表中取出對應的值。@each 循環指令的形式：
@each $var in <list>在下面的例子中，$var 就是一個變量名，<list> 是一個 SassScript 表達式，他將返回一個列表值。變量 $var 會在列表中做遍歷，並且遍歷出與 $var 對應的樣式塊。
$list: adam john wynn mason kuroir;//$list 就是一個列表 @mixin author-images { @each $author in $list { .photo-#{$author} { background: url("/images/avatars/#{$author}.png") no-repeat; } } } .author-bio { @include author-images; }五、Sass函數功能1.字符串函數
(1)、unquote()
unquote() 函數主要是用來刪除一個字符串中的引號，如果這個字符串沒有帶有引號，將返回原始的字符串。
(2)、quote()
quote() 函數剛好與 unquote() 函數功能相反，主要用來給字符串添加引號。如果字符串，自身帶有引號會統一換成雙引號 ""。使用 quote() 函數只能給字符串增加雙引號，而且字符串中間有單引號或者空格，特殊符號時，需要用單引號或雙引號括起，否則編譯的時候將會報錯。(3)、To-upper-case()
To-upper-case() 函數將字符串小寫字母轉換成大寫字母
(4)、To-lower-case()
To-lower-case() 函數將字符串大寫字母轉換成小寫字母
2.數字函數
- percentage($value)：將一個不帶單位的數轉換成百分比值；
- round($value)：將數值四捨五入，轉換成一個最接近的整數；
- ceil($value)：將大於自己的小數轉換成下一位整數；
- floor($value)：將一個數去除他的小數部分；
- abs($value)：返回一個數的絕對值；
- min($numbers…)：找出幾個數值之間的最小值；
- max($numbers…)：找出幾個數值之間的最大值；
- random(): 獲取隨機數
3.列表函數
- length($list)：返回一個列表的長度值；
- nth($list, $n)：返回一個列表中指定的某個標籤值
- join($list1, $list2, [$separator])：只能將兩個列給連接在一起，變成一個列表；
- append($list1, $val, [$separator])：將某個值放在列表的最後；
如果沒有明確的指定 $separator 參數值，其默認值是 auto。
當然，在 append() 函數中，可以顯示的設置 $separator 參數，
- zip($lists…)：將幾個列表結合成一個多維的列表；
zip(1px 2px 3px,solid dashed dotted,green blue red) >> ((1px "solid" #008000), (2px "dashed" #0000ff), (3px "dotted" #ff0000))
在使用zip()函數時，每個單一的列表個數值必須是相同的否則將會出錯。
- index($list, $value)：返回一個值在列表中的位置值。如果指定的值不在列表中（沒有找到相應的值），那麼返回的值將是 false
4.Introspection函數
- type-of($value)：返回一個值的類型，
- unit($number)：返回一個值的單位
- unitless($number)：判斷一個值是否帶有單位
- comparable($number-1, $number-2)：判斷兩個值是否可以做加、減和合並
當條件成立返回一種值，當條件不成立時返回另一種值：
if($condition,$if-true,$if-false)上面表達式的意思是當 $condition 條件成立時，返回的值爲 $if-true，否則返回的是 $if-false 值。
>> if(true,1px,2px) 1px >> if(false,1px,2px) 2px5.Maps函數
Sass 的 map 常常被稱爲數據地圖，也有人稱其爲數組，因爲他總是以 key:value 成對的出現，但其更像是一個 JSON 數據。如：
$map: (
$key1: value1,
$key2: value2,
$key3: value3
)
- map-get($map,$key)：根據給定的 key 值，返回 map 中相關的值。
- map-merge($map1,$map2)：將兩個 map 合併成一個新的 map。
- map-remove($map,$key)：從 map 中刪除一個 key，返回一個新 map。
- map-keys($map)：返回 map 中所有的 key。
- map-values($map)：返回 map 中所有的 value。
- map-has-key($map,$key)：根據給定的 key 值判斷 map 是否有對應的 value 值，如果有返回 true，否則返回 false。
- keywords($args)：返回一個函數的參數，這個參數可以動態的設置 key 和 value。
6.RGB顏色函數
- rgb($red,$green,$blue)：根據紅、綠、藍三個值創建一個顏色；
- rgba($red,$green,$blue,$alpha)：根據紅、綠、藍和透明度值創建一個顏色；
- red($color)：從一個顏色中獲取其中紅色值；
- green($color)：從一個顏色中獲取其中綠色值；
- blue($color)：從一個顏色中獲取其中藍色值；
- mix($color-1,$color-2,[$weight])：把兩種顏色根據一定比例（默認50%）混合在一起。
7.HSL函數
- hsl($hue,$saturation,$lightness)：通過色相（hue）、飽和度(saturation)和亮度（lightness）的值創建一個顏色；
- hsla($hue,$saturation,$lightness,$alpha)：通過色相（hue）、飽和度(saturation)、亮度（lightness）和透明（alpha）的值創建一個顏色；
- hue($color)：從一個顏色中獲取色相（hue）值；
- saturation($color)：從一個顏色中獲取飽和度（saturation）值；
- lightness($color)：從一個顏色中獲取亮度（lightness）值；
- adjust-hue($color,$degrees)：通過改變一個顏色的色相值，創建一個新的顏色；
- lighten($color,$amount)：通過改變顏色的亮度值，讓顏色變亮，創建一個新的顏色；
- darken($color,$amount)：通過改變顏色的亮度值，讓顏色變暗，創建一個新的顏色；
- saturate($color,$amount)：通過改變顏色的飽和度值，讓顏色更飽和，從而創建一個新的顏色
- desaturate($color,$amount)：通過改變顏色的飽和度值，讓顏色更少的飽和，從而創建出一個新的顏色；
- grayscale($color)：將一個顏色變成灰色，相當於desaturate($color,100%);
- complement($color)：返回一個補充色，相當於adjust-hue($color,180deg);
- invert($color)：反回一個反相色，紅、綠、藍色值倒過來，而透明度不變。
8.Opacity函數
- alpha($color) /opacity($color)：獲取顏色透明度值；
- rgba($color, $alpha)：改變顏色的透明度值；
- opacify($color, $amount) / fade-in($color, $amount)：使顏色更不透明；
- transparentize($color, $amount) / fade-out($color, $amount)：使顏色更加透明。
六、Sass規則
@import 根據文件名引入。 默認情況下，它會尋找 Sass 文件並直接引入， 但是，在少數幾種情況下，它會被編譯成 CSS 的 @import 規則：
如果上述情況都沒有出現，並且擴展名是 .scss 或 .sass， 該名稱的 Sass 或 SCSS 文件就會被引入。 如果沒有擴展名， Sass 將試着找出具有 .scss 或 .sass 擴展名的同名文件並將其引入。
2.@media
$media: screen; $feature: -webkit-min-device-pixel-ratio; $value: 1.5; @media #{$media} and ($feature: $value) { .sidebar { width: 500px; } }
編譯出來的 CSS：
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
.sidebar {
width: 500px; } }
3.@extendSass 中的 @extend 是用來擴展選擇器或佔位符。
.error {
border: 1px #f00;
background-color: #fdd;
}
.error.intrusion {
background-image: url("/image/hacked.png");
}
.seriousError {
@extend .error;
border-width: 3px;
}
被編譯爲：
.error, .seriousError {
border: 1px #f00;
background-color: #fdd; }
.error.intrusion, .seriousError.intrusion {
background-image: url("/image/hacked.png"); }
.seriousError {
border-width: 3px; }
4.@at-root
@at-root
從字面上解釋就是跳出根元素。當你選擇器嵌套多層之後，想讓某個選擇器跳出，此時就可以使用
@at-root。
.a {
color: red;
.b {
color: orange;
.c {
color: yellow;
@at-root .d {
color: green;
}
}
}
}
編譯出來的CSS
.a {color: red;}
.a .b {color: orange;}
.a .b .c {color: yellow;}
.d {color: green;}
5.@debug
@debug 在 Sass 中是用來調試的，當你的在 Sass 的源碼中使用了 @debug 指令之後，Sass 代碼在編譯出錯時，在命令終端會輸出你設置的提示 Bug:
@debug 10em + 12em;
會輸出：Line 1 DEBUG: 22em
6.@warn,@error