Sass是一種CSS預處理語言。
首先要了解什么是CSS預處理器？
CSS預處理語言是一種新的專門的編程語言，編譯后形成正常的css文件，為css增加一些編程特性，無需考慮瀏覽器的兼容性（完全兼容css3），讓css更加簡潔、適應性更強，可讀性更佳，更易於代碼的維護等諸多好處。
CSS預處理語言有Scss(Sass) 和Less、Postcss。
那么Scss和Sass有什么區別呢？
Sass 有兩種語法規則(syntaxes)，目前新的語法規則（從 Sass 3開始）被稱為 “SCSS”，它是css3語法的的拓展級，就是說每一個語法正確的CSS3文件也是合法的SCSS文件，SCSS文件使用.scss作為拓展名。第二種語法別稱為縮進語法（或者 Sass），它受到了Haml的簡潔精煉的啟發，它是為了人們可以用和css相近的但是更精簡的方式來書寫css而誕生的。它沒有括號、分號，它使用行縮進的方式來指定css 塊，雖然sass不是最原始的語法，但是縮進語法將繼續被支持，在縮進語法的文件以.sass為拓展名。
特性概覽：
CSS書寫代碼規模較大的Web應用時，容易造成選擇器、層疊的復雜度過高，因此推薦通過Sass預處理器進行CSS的開發，Sass提供的變量、嵌套、混合、繼承等特性，讓CSS的書寫更加有趣與程式化。
Scss的使用語法：
·注釋：
注釋分為三種：/* */css中顯示，//css中不顯示，/*重要注釋!*/壓縮不會被刪掉。
·@import 命令導入外部sass、scss、css文件：
<style lang="scss">
@import './test.scss'; //導入外部scss文件
.myText {
border:1px solid red;
}
</style>
·變量：
聲明變量的語法是：$+變量名+：+變量值；如下：
$color:red; //聲明變量 $color區分默認變量：
默認變量只需要在變量值后加上 !default , 用來設置默認值 ，對默認變量進行重新聲明可以實現覆蓋默認值；如：
$color:red !default; //聲明默認變量 $color
$color:purple; //根據需求覆蓋默認變量
.father01 {
color:$color;
}區分全局變量和局部變量：
全局變量是元素外聲明的變量，局部變量是在元素里聲明的變量，重復聲明時局部變量會覆蓋全局變量；
$height:200px; //全局變量聲明不在大花括號內
$bgcolor:blue;
body {
.father01 { //嵌套
width:$width;
height:$height;
$border:1px solid red; //局部變量是聲明在元素內的
border: $border;
$bgcolor:purple; //全局變量和局部變量名一致時，調用局部變量進行覆蓋
background-color: $bgcolor;
}
}局部變量值后加上 !global 關鍵詞可以使得局部變量變成全局變量；
body {
.father01 {
width:200px;
height:200px;
$border:1px solid red !global; //使用global關鍵詞將$border變為了全局變量
border:$border;
}
.father02 {
width: 300px;
height:300px;
border:$border; //使用全局變量
}
}變量嵌套引用：即字符串插值，需要使用 #{} 來進行包裹：
$left:left;
.father02 {
width: 300px;
height:300px;
border:$border; //使用全局變量
border-#{$left}:2px solid purple; //使用字符串插值之前必須先聲明
}·操作符：
Sass提供了標准的算術運算符，例如+、-、*、/、%。在接下來的例子里，我們嘗試在aside和article選擇器當中對寬度進行簡單的計算。
.container { width: 100%; } article[role="main"] { float: left; width: 600px / 960px * 100%; } aside[role="complementary"] { float: right; width: 300px / 960px * 100%; }上面代碼以960px為基准建立了簡單的流式網格布局，Sass提供的算術運算符讓開發人員可以更容易的將像素值轉換為百分比，最終生成的CSS樣式如下所示：
.container { width: 100%; } article[role="main"] { float: left; width: 62.5%; } aside[role="complementary"] { float: right; width: 31.25%; }·引入：
Sass能夠將代碼分割為多個片段，並以underscore風格的下划線作為其命名前綴（_partial.scss），Sass會通過這些下划線來辨別哪些文件是Sass片段，並且不讓片段內容直接生成為CSS文件，從而只是在使用@import指令的位置被導入。CSS原生的@import會通過額外的HTTP請求獲取引入的樣式片段，而Sass的@import則會直接將這些引入的片段合並至當前CSS文件，並且不會產生新的HTTP請求。下面例子中的代碼，將會在base.scss文件當中引入_reset.scss片斷。
// _reset.scss
html, body, ul, ol {
margin: 0;
padding: 0;
}
// base.scss
@import 'reset';
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}Sass中引入片斷時，可以缺省使用文件擴展名，因此上面代碼中直接通過@import 'reset'引入，編譯后生成的代碼如下：
html, body, ul, ol { margin: 0; padding: 0; } body { font: 100% Helvetica, sans-serif; background-color: #efefef; }·嵌套：
Sass允許開發人員以嵌套的方式使用CSS，但是過度的使用嵌套會讓產生的CSS難以維護，因此是一種不好的實踐，下面的例子表達了一個典型的網站導航樣式：
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}大家注意上面代碼中的ul、li、a選擇器都被嵌套在nav選擇器當中使用，這是一種書寫更高可讀性CSS的良好方式，編譯后產生的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; }嵌套屬性：
CSS許多屬性都位於相同的命名空間（例如font-family、font-size、font-weight都位於font命名空間下），Scss當中只需要編寫命名空間一次，后續嵌套的子屬性都將會位於該命名空間之下，請看下面的代碼：
/*===== SCSS =====*/
.demo {
// 命令空間后帶有冒號:
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}
/*===== CSS =====*/
.demo {
font-family: fantasy;
font-size: 30em;
font-weight: bold;
}在嵌套時候可以使用 & 來引用父元素：
Scss使用"&"關鍵字在CSS規則中引用父級選擇器，例如在嵌套使用偽類選擇器的場景下：
.container {
&>p { //可以編譯成CSS的 .container>p {} 效果
color:purple;
}
}/*===== SCSS =====*/
a {
font-weight: bold;
text-decoration: none;
&:hover { text-decoration: underline; }
body.firefox & { font-weight: normal; }
}
/*===== CSS =====*/
a {
font-weight: bold;
text-decoration: none; }
a:hover {
text-decoration: underline;
}
body.firefox a {
font-weight: normal;
}無論CSS規則嵌套的深度怎樣，關鍵字"&"都會使用父級選擇器級聯替換全部其出現的位置：
/*===== SCSS =====*/
#main {
color: black;
a {
font-weight: bold;
&:hover { color: red; }
}
}
/*===== CSS =====*/
#main {
color: black;
}
#main a {
font-weight: bold;
}
#main a:hover {
color: red;
}"&"必須出現在復合選擇器開頭的位置，后面再連接自定義的后綴，例如：
/*===== SCSS =====*/
#main {
color: black;
&-sidebar { border: 1px solid; }
}
/*===== CSS =====*/
#main {
color: black;
}
#main-sidebar {
border: 1px solid;
}如果在父級選擇器不存在的場景使用&，Scss預處理器會報出錯誤信息。
·繼承
繼承是Sass中非常重要的一個特性，可以通過@extend指令在選擇器之間復用CSS屬性，並且不會產生冗余的代碼，下面例子將會通過Sass提供的繼承機制建立一系列樣式：
繼承 .class 使用 @extend：
.container {
color:purple;
border:2px dashed purple;
}
.myText {
@extend .container; //這里將繼承.container類的所有樣式
font-size: 22px;
}Scss占位符 %：
使用% 聲明的代碼塊，如果不被@extend調用的話就不會被編譯。編譯出來的代碼會將相同的代碼合並在一起，代碼變得十分簡潔。
// 這段代碼不會被輸出到最終生成的CSS文件，因為它沒有被任何代碼所繼承。
%other-styles {
display: flex;
flex-wrap: wrap;
}
// 下面代碼會正常輸出到生成的CSS文件，因為它被其接下來的代碼所繼承。
%message-common {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.message {
@extend %message-common;
}
.success {
@extend %message-common;
border-color: green;
}
.error {
@extend %message-common;
border-color: red;
}
.warning {
@extend %message-common;
border-color: yellow;
}上面代碼將.message中的CSS屬性應用到了.success、.error、.warning上面，魔法將會發生在最終生成的CSS當中。這種方式能夠避免在HTML元素上書寫多個class選擇器，最終生成的CSS樣式是下面這樣的：
.message, .success, .error, .warning { border: 1px solid #ccc; padding: 10px; color: #333; } .success { border-color: green; } .error { border-color: red; } .warning { border-color: yellow; }·混合
混合（Mixin）用來分組那些需要在頁面中復用的CSS聲明，開發人員可以通過向Mixin傳遞變量參數來讓代碼更加靈活，該特性在添加瀏覽器兼容性前綴的時候非常有用，SASS目前使用@mixin name指令來進行混合操作。
重復代碼塊，使用混合@mixin命令定義，以及使用@include調用該mixin：
@mixin normalStyle {
//使用@mixin命令定義可重復使用的代碼塊
width:300px;
height:100px;
color:black;
background-color:lightblue;
}
.container {
@include normalStyle;
//使用@include 命令引用@mixin定義的代碼塊
}在使用@mixin和@include時，傳入參數和默認值
@mixin normalStyle($width,$height,$color,$defaultValue:orange) {
width:$width;
height:$height;
color:$color;
background-color:$defaultValue;
}
.container {
@include normalStyle(300px,100px,green,lightgray);
}Scss使用編程式方法
·條件語句
.container {
p {
@if 1+1<3 {
border:1px solid blue;
} @else {
border:1ps dashed palevioletred;
}
}
}·Scss中的三種循環
for循環
在sass中的@for循環有兩種方式：
①@for $i from <start> through <end>
②@for $i from <start> to <end>
其中$i表示變量，start表示開始值，end表示結束值；
through表示包括end這個數值；to表示不包括end這個數值；
while循環
只要@while后面的條件為true就會執行，直到表達式值為false時停止循環；
each in循環
就是去遍歷一個列表，然后從列表中取出對用值；他的指令形式為：@each $var in <list>($var為變量值，list為sassscript表達式）
//for 循環
@for $i from 1 to 5 {
.item-#{$i} {
border:#{$i}px solid;
}
}
//while 循環
$m:8;
@while $m > 0 {
.items-#{$m} {
width:2em*$m;
}
$m:$m - 2 ;
}
//這里可以對$m進行運算 讓它每次都減去2
//each 語法
@each $item in class01,class02 { //$item就是遍歷了in關鍵詞后面的類名列
.#{$item} {
background-color:purple;
}
}
//會編譯成 .class01 , .class02 {background-color:purple;}·使用@function 自定義函數及使用
@function double($sn){ //SCSS允許自定義函數
@return $sn*2;
}
.myText {
border:1px solid red;
width:double(200px); //使用在SCSS中自定義的函數
}·可以直接使用Scss內置的顏色函數：