Sass(Syntactically Awesome Style Sheets) ,是一種css預處理器和一種語言, 它可以用來定義一套新的語法規則和函數，以加強和提升CSS. 它有很多很好的特性，但是它有類似Ruby的語法，沒有花括號，沒有分號，遵循嚴格的縮進
它在書寫規則，變量命名方面和CSS代碼有着很大的區別。於是，后來官方在2010年推出了一個全新的語法，叫做SCSS, 意思是 Sassy CSS. 這個語法帶來了對CSS友好的語法，試圖彌合Sass和CSS之間的差別.
那么，它到底有哪些特性呢，我們來看一下:
1. 嵌套
我們可以看一個簡單的例子
.footer { background-color: red; padding: 10px 20px; .navigation{ border: solid 5px black; a { text-decoration: underline; padding: 10px; } } .social-buttons { background-color: white; float: right; a { color: white; margin-right: 15px; } } }
上面的代碼中，就出現了多層嵌套
2. 變量
在CSS文件中，我們經常會用到顏色color， 可能好幾個元素的CSS樣式都會用到同樣的一種顏色，因為網站往往是一個統一的風格。 這樣，我們如果一旦要更改這個顏色，我們就要更改整個css文件中的所有地方。而變量解決了這個問題，我們可以把一個顏色值賦給一個變量，所有用到這個顏色的地方，都用這個變量替代。這樣，需要更改顏色時，只需要修改這個變量的值就可以了. 當然，CSS中的寬度，長度等也可以類似這樣，使用統一的變量來進行.
我們來看下面的例子
$pageHeight: 100%;
$pageWidth: 100%;
$containerWidth: 950px;
$containerHeight: 700px;
$white: #FFFFFF;
$black: #000000;
$grey: #E3E3E3;
$blue: #1f605b;
上面的例子中，定義了8個變量，前面4個事寬度和高度，后面4個是顏色。 以后在CSS文件中需要用到這些變量值時，只需要用這個變量名代替就可以。
3. 局部
Sass可以通過使用局部系統來把樣式表分成多份文件，根據不同的需求組織不同部分的樣式表，形成不同的css文件
比如，把頁眉樣式寫在頁眉樣式表中，類似的有 頁腳樣式表，導航樣式表,按鈕樣式表....我們公司在開發多個項目時，都采用了這種方法，形成多個scss文件，比如有
colours.scss, typography.scss, layout.scss, footer.scss, header.scss, navigation.scss, blocks.scss, forms.scss, slider.scss, buttons.scss, margins.scss,icons.scss, tables.scss.....
最后有一個style.scss 類容如下
@import "colours";
@import "typography";
// Import css components
@import "layout";
@import "footer";
@import "navigation";
@import "blocks";
@import "forms";
@import "slider";
@import "buttons";
@import "margins";
@import "icons";
@import "tables";
@import "custom-bmd-model";
然后再使用gulp命令來生成最后的style.css文件
講到@import命令，就再來說一說它的使用.
1) @import命令也可以用於在html文件中導入外部的css文件，但是這時，你需要注意，如果要使@import導入的css文件中的css規則起作用, import導入命令必須先於除了 @charset的其他任何CSS規則，我們來看下面的例子
<style type="text/css"> .myColor{ color: orange; } @import "test.css"; </style> <p class="myColor">看看我的顏色</p> test.css文件如下 .myColor{ color: black; }
執行之后，發現顏色是橘色 (orange), 而不是黑色(black). 在上面例子中，html文件中定義了.myColor 的CSS規則，然后接下來再導入test.css文件，該文件有一個完全同名的css規則。但是從最后的結果來看，它沒有被運用。用的是它前面的html文件中的css規則
我們再換個位置看看
<style type="text/css"> @import "test.css"; .myColor{ color: orange; } </style> <p class="myColor">看看我的顏色</p> test.css文件如下 .myColor{ color: black; }
這里，我們把@import命令置於其他css規則之前，發現就起作用了，字體顏色變成了黑色
所以特別注意 import規則一定要先於除了 @charset的其他任何CSS規則
2) 使用@import命令進行媒體查詢
媒體查詢是CSS3中出現的新特征，在css中使用media關鍵字來指定, 一個媒體查詢由一個可選的媒體類型和零個或多個使用媒體功能的限制了樣式范圍的表達式組成，比如寬度，高度和顏色。 它允許內容的呈現針對一個特定范圍的輸出設備進行裁剪，而不必改變內容本身.
我們通常可以在style標記包括的CSS中使用媒體查詢，如下：
<!-- Style標記的樣式表中的CSS媒體查詢--> <style> @media (max-width: 800px) { .media_test{ display: none; } } </style>
除了這種方式，我們也可以在link元素引用css文件時，采用媒體查詢，如下所示:
<link rel="stylesheet" media="(max-width: 1000px)" href="test.css" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
同樣的，@import命令也可以用於媒體查詢，而且使用@import進行媒體查詢時，不需要使用media關鍵字
@import url("paint.css") print;
@import "common.css" screen,projection;
@import url('landscape.css') screen and (orientation: landscape);
@import url('mobile.css') (max-width: 780px);
有一點需要知道了解的是, 無論是通過使用link或者import方式，都會下載所有的css文件，然后再根據媒體media去選擇執行應用的css文件。而不是根據用戶使用的媒體media去選擇性的下載css文件
4. 混合宏
使用Sass的一個很大的特性是，混合宏. 混合宏是很小的代碼片段(類似局部), 使用@mixin標志來標識 你可以在文件中的任何部分，使用@include 標志來復用這個混合宏.
混合宏結合變量使用，是個很普遍的例子, 最常見的例子就是創建圓角按鈕. 創建一段實現圓角代碼的混合宏，用傳入的變量來代替圓角值, 這樣，可以根據傳入變量值不同，實現不同的圓角按鈕
例子如下
//Mixin @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; } .test-element1{ @include border-radius(5px); } .test-element2{ @include border-radius(10px); }
我們在來看一個例子
//SCSS @mixin box-size($width:50px,$height: 50px) { width: $width; height: $height; } .demo{ @include box-size; } .demo2{ @include box-size(100px,200px); }
編譯之后就是如下
/*css*/ .demo{ width: 50px; height: 50px; } .demo2{ width: 100px; height: 200px; }
在公司項目中，前端css文件我們都是寫SCSS文件,然后通過@import導入到style.scss文件中，最后通過gulp來生成style.css文件。
現在幾乎所有Sass的工具，插件，demo等都是使用SCSS語法來開發。已經很難再找到一個Sass縮進語法的插件等，所以，強烈推薦使用SCSS來寫css文件
另外，注意一點，就是Sass從來沒有寫成SASS, 無論指語法還是這個語言，都是使用Sass
而SCSS一直都是大寫