SASS是一種CSS預處理器依賴ruby。SASS擴展了CSS，添加了新的規則、變量、混入、選擇器和繼承等特性。
在使用SASS之前首先要安裝ruby服務器：http://www.rubyinstaller.org/。 安裝好ruby后，打開Start Command Prompt with Ruby，鍵入gem install sass 安裝SASS。之后輸入：sass –v 就可以查看SASS的版本。
SASS的CSS擴展規則
嵌套規則
SASS允許CSS樣式嵌套進另一個CSS樣式中。內部的規則僅僅用在外部的選擇器內。例
SASS
#mainbody { color: #00ffff; width: 100%; .content{ color: #000000; } } // 轉換CSS樣式如下： #mainbody { color: #00ffff; width: 100%; } #mainbody .content { color: #000000; }
引用父選擇器
比起默認的，它通常對使用嵌套樣式的父選擇器更有用。例如，你也許想要一些特殊的樣式，當選擇器是hover狀態時或者當body元素有一個確定的類。這種情況下，你可以明確地看出哪個一父標簽應該被&字符代替。例如：
a { font-size: 12px; color: #FFFFFF; &:hover{color: #00ffff} body .mainbody & {font-weight: bold} } /*轉換為CSS 如下*/ a { font-size: 12px; color: #FFFFFF; } a:hover { color: #00ffff; } body .mainbody a { font-weight: bold; }
嵌套屬性
在命名空間中，CSS有非常少的屬性；例如，font-family、font-size和font-weigth都在font命名空間內。在CSS中，如果你想去在同一個命名空間內設置多個屬性，你必須去一個一個把它們列出來。SASS為這個提供了一個快捷的方法：僅寫一次命名空間，然后在它的內部嵌套進每一個下級屬性。例如
.funky { font: { family: fantasy; size: 30em; weight: bold; } } /*轉譯為CSS如下*/ .funky { font-family: fantasy; font-size: 30em; font-weight: bold; }
SassScript
除了簡單的CSS屬性語句，SASS提供了一些被稱作SassScript的小擴展。SassScript允許屬性去使用變量、計算和額外的方法。SassScript可以被用在任何屬性值中。
SassScript也可以被用於生成選擇器和屬性名字，使用的時候需要寫入mixins。這將會被允許插入。
變量：$
Sass中最易懂的方法是使用變量。變量使用$作為開始，並且設置像CSS屬性：
$width: 5em;
之后你可以把它們用到屬性中：
#main { width: $width; }
變量只被允許用在它們被定義的嵌套選擇器中。如果它們被定義到任何選擇器的外部，它們被允許用在任何地方。
數據類型
SassScript支持六個主要的數據類型：
numbers(13, 10px)
文本字符和沒有引號的文本字符(“foo”, ‘bar’, baz)
顏色(blue, #ffffff, rgba(255, 0, 0, 0.5))
布爾值(true, false)
空(null)
數值列表，通過逗號或空格分開(1.5em 1em 0 1em, Helvetica, Arial, sans-serif)
映射鍵值對(key1: value1, key2, value2)
SassScript也支持其他所有類型的CSS屬性值，例如Unicade和!important聲明。但是，它沒有對這些值進行特殊操作。它們僅僅是被當做引用結束的字符串來對待。
字符串
CSS指定了兩種字符串：用引號引用，例如”jia”, ’http://peerless.wang’，另外的沒有引號的例如：sans-serif 或者 bold。SassScript對這兩種類型都可以識別，並且通常如果其中一種類型的字符串被用在Sass文檔中，這一種字符串將會被輸出到CSS結果中。
下面是一個列外，但是：當使用#{}插入，被引用的字符串不會被引用。這使得它更簡單的去使用例子中的選擇器在混合指令中。例如
@mixin firefox-message($selector) { body.firefox #{$selector}:before { content: "Hi, Firefox users!"; } } @include firefox-message(".header"); /*轉換為CSS如下*/ body.firefox .header:before { content: "Hi, Firefox users!"; }
列表
列表是Sass怎樣來表示像margin這樣的CSS聲明值：10px 15px 0 0 或者font-face: Helvetica, Arial, sans-serif。列表僅是一系列的值，通過空格或逗號隔開。事實上，單獨的數值計算也是列表，它們的列表僅有一個值。
另外，列表的用處不是很大，但是SassScript列表方法使它們變得更有用。nth 方法可以使多項變成列表，join方法可以把多個列表整合一起，append方法可以添加項目到列表中。@each指令可以為列表中的每一項添加樣式。
除了包含簡單的值外，列表也可以包含其他列表。例如，1px 2px, 5px 6px 是一個兩項目的列表，它包含列表1px 2px和列表5px 6px。如果內部的列表和列表使用同樣的分隔符，你需要去在列表的開始和結束的位置使用圓括號去使它們更明顯。例如(1px 2px ) (5px 6px)也是兩項列表包含列表1px 2px 和5px 6px。 不同處在於外部使用空格分開，之前是使用逗號分開。
當列表是被填入的是簡單的CSS，Sass不會添加圓括號，盡管Sass不能明白它們。意思是(1px, 2px) (5px 6px)和 1px 2px 5px 6px當它們被轉換成CSS時將看起來一樣。但是，當它們在Sass中時，它們是不一樣的：第一個列表包含兩個列表，而第二個列表包含4個數字。
列表里面也可以什么都沒有。這些列表被表現為()（這也是一個空的映射鍵值對）。它們不可以被直接輸出為CSS；如果你試圖這么做，例如font-family()，Sass將會拋出一個錯誤。如果一個列表包含空列表或者空值，例如 1px 2px () 3px或者1px 2px null 3px，空列表和空值在被轉換成CSS之前將會被移除。
逗號間隔的列表也許會有一個拖尾的逗號。這個特別有用因為它允許你去聲明一個單元素列表。例如，(1,)是一個包含1列表，(1 2 3,)是一個逗號間隔列表其中包含一個空格間隔的列表，這個空格間隔的列表包含1,2,和3。
映射
映射表示的是一個鍵和值之間的聯合，通過鍵去查詢值。在命名組中它們使得更容易去收集值並且允許動態的組。它們不能被直接翻譯成CSS，盡管它們的語法結構與media query語句類似：
$map: (key1: value1, key2: value2, key3: value3);
與列表不同，映射的外面必須總是有圓括號並且總是要以逗號分隔。映射中的鍵和值都可以是任何SassScript對象。一個映射也許僅有一個值對應一個給定的鍵（盡管值可能是列表）。一個給定的值也許可以被分配到許多鍵。
像列表一樣，映射更多的操作是使用SassScript函數。map-get函數在映射中查詢值，map-merge函數添加值到一個映射。@each指令可以被用於添加樣式為每一個值或鍵映射配對。
映射可以被應用到任何列表中。當被一個list函數使用時，映射會被當做對的列表來對待。例如，(key1: value1, key2: value2)通過list函數將被當做一個嵌套列表key1 value1, key2 value2。列表不能被當做映射，但是，空列表除外。()將被描述為一個沒有鍵和值的空映射和一個沒有元素的列表。
映射不能被轉換為簡單的CSS。在CSS函數中使用其中一個作為變量的值或者一個參數，會拋出錯誤。
運算
所有類型都支持等式運算(==和!=)。另外，每一個類型都有為它們自己特殊需求的自己的運算。
數值運算
SassScript數值的標准運算計算(加法+、減法-、乘法*、除法/、整除%)，如果它們可以計算，在單元中它們將自動進行。例
p { width: 1in + 8pt; } /*轉換為CSS為*/ p { width: 1.11111in; }
比較運算（<、>、<=、>=）對於數字也都是被支持的，並且等式運算對所有類型都支持。
除法/
CSS允許/符號出現在屬性值中作為一種分隔數字的方法。因為SassScript是一種CSS屬性語句的擴展，它必須支持這個，因此也允許/被用作分隔符。意思是默認情況下，如果在SassScript中兩個數字通過/進行分隔，之后它們將會作為結果出現在CSS中。
但是，在/作為分隔符時將會被划分為三種情況。這些划分在實際使用中，將會覆蓋大部分的實例。它們是：
如果這個值或者它中的一部分，是被存儲在變量中或者被一個方法返回。
如果這個值被圓括號包圍。
如果這個值被用於另一個運算語句的一部分。
例如
p { font: 10px/8px; // 簡單的CSS，沒有做除法運算 $width: 1000px; width: $width/2; // 使用變量，做除法運算 width: round(1.5)/2; // 使用函數，做除法運算 height: (500px/2); // 使用圓括號，做除法運算 margin-left: 5px + 8px/2px; // 使用加號, 做除法運算 } // 轉換為CSS： p { font: 10px/8px; width: 500px; width: 1; height: 250px; margin-left: 9px; } // 如果你想把簡單的CSS/和變量一起使用，你可以使用#{}去插入它們。例如 p { $font-size: 12px; $line-height: 30px; font: #{$font-size}/#{$line-height}; } // 轉換成CSS： p { font: 12px/30px; }
字符串運算
+運算可以被用於連接字符串
p { cursor: e + -resize; } // 轉換為CSS p { cursor: e-resize; }
注意，如果是一個引號字符串和一個沒有引號的字符串相加（有引號的字符串在左邊），結果是一個有引號的字符串。同樣的，如果一個沒引號的字符串和一個有引號的字符串相加（沒有引號的字符串在左邊），結果將是沒有引號的。例如
p:before { content: "Foo " + Bar; font-family: sans- + "serif"; } // 轉義為CSS為： p:before { content: "Foo Bar"; font-family: sans-serif; } // 默認的，如果兩個值是緊挨着的，它們被看做是一個值。 p { margin: 3px + 4px auto; } // 轉換為CSS： p { margin: 7px auto; } // 在字符串文本中，通過#{}樣式可以添加動態值給字符串 p:before { content: "I ate #{5 + 10} pies!"; } // 轉換為CSS p:before { content: "I ate 15 pies!"; } // 空值將被當做空字符串來對待並插入字符串中。 $value: null; p:before { content: "I ate #{$value} pies!"; } // 轉換為CSS： p:before { content: "I ate pies!"; }
布爾運算
SassScript支持對布爾值進行與，或，非運算
列表運算
列表沒有任何特殊的運算，相對的它們的操作時通過列表方法進行的。
圓括號
圓括號可以影響運算順序
p { width: 1em + (2em * 3); } // 轉換為CSS： p { width: 7em; }
函數
SassScript定義了一些實用的函數，它們被調用通過正常CSS函數語句。
p { color: hsl(0, 100%, 50%); } // 轉換為CSS： p { color: red; }
關鍵字參數
Sass函數也可以被調用通過明確的關鍵字參數。上面的例子也可以被寫為：
p { color: hsl($hue: 0, $saturation: 100%, $lightness: 50%); }
當然這樣不太簡潔，但它可以使樣式單更易讀。它也允許函數去呈現更多的靈活的接口，提供很多參數，但是調用起來不會困難。
參數的命名可以以任何順序，並且默認的參數值可以被省略。因為被命名的參數是變量名，下划線和破折號可以互換使用。
參數
Mixin可以獲取SassScript參數值作為參數，但Mixin被引入並且在mixin內生成可用的變量的時候參數會被給出來。
在定義一個Mixin的時候，參數會被以變量的形式寫出，並以逗號分隔，並且放在名字后面的圓括號內。之后在Mixin被引入的時候，值會以同樣的方式被傳入。例如
@mixin sexy-border($color, $width) { border: { color: $color; width: $width; style: dashed; } } p { @include sexy-border(blue, 1in); } // 轉換為CSS p { border-color: blue; border-width: 1in; border-style: dashed; }
Mixin也可以使用常規的設置變量語句為參數設置默認值。如果Mixin被引入的時候，沒有傳入參數，默認值就會替代參數值。例如
@mixin sexy-border($color, $width: 1in) { border: { color: $color; width: $width; style: dashed; } } p { @include sexy-border(blue); } h1 { @include sexy-border(blue, 2in); } // 轉換為CSS為 p { border-color: blue; border-width: 1in; border-style: dashed; } h1 { border-color: blue; border-width: 2in; border-style: dashed; }
函數命令
在Sass中允許去定義你自己的函數並且可以使用在任何腳本環境或值中。例如
$grid-width: 40px; $gutter-width: 10px; @function grid-width($n) { @return $n * $grid-width + ($n - 1) * $gutter-width; } #sidebar { width: grid-width(5); } 轉換為CSS #sidebar { width: 240px; }
就像你看到的，函數可以使用任何定義的全局變量，並且允許像Mixin類似的參數。一個函數中可能有許多語句，並且你必須去調用@return去返回函數值。
就像Mixin，在調用方法的時候也可以使用關鍵字參數。上面的函數調用也可以寫成這樣。
#sidebar { width: grid-width($n: 5); }
建議在函數命名的時候使用前綴以避免函數名沖突並且讓維護人員知道它不是CSS或Sass的一部分。例如，如果你為ACME Corp工作，你可以命名你的函數為-acme-grid-width。
就像Mixin一樣，函數也允許使用變量參數。
樣式輸出
盡管Sass默認輸出的CSS樣式看起來還不錯並且反應出了文檔結構，Sass為不同的品味和需求也提供了一些其他的樣式。
Sass允許通過設置:style option或使用—style命令去選擇4種不同的輸出樣式。
:nested(嵌套)
嵌套樣式時Sass默認的輸出樣式，因為它反映了CSS樣式結構和它們渲染HTML文檔的結構。每一個屬性獨占一行，但是縮進並不是一定的。每一個規則的縮進取決於它的嵌套深度。例如
#main { color: #fff; } #main p { width: 10em; } .huge { font-size: 10em; font-weight: bold; text-decoration: underline; }
在閱讀較大的CSS文件時嵌套樣式是非常好的：它讓你可以很快的掌握文件的結構而需要真正的去閱讀。
:expended(展開)
展開樣式是一個更典型的人為CSS樣式，每一個屬性和規則占一行。規則內的屬性會進行縮進，但規則不會有任何特殊的縮進。例如
#main { color: #fff; } #main p { width: 10em; } .huge { font-size: 10em; font-weight: bold; text-decoration: underline; }
:compact(緊湊)
緊湊樣式要比嵌套或展開樣式占用的空間小。它更關注於抽取選擇器而不是屬性。每一個CSS規則占用一行，每一個屬性都在這一行中。嵌套的規則會放在下面一行不會有新行，使用新行來分隔各個規則。例如
#main { color: #fff; background-color: #000; } #main p { width: 10em; } .huge { font-size: 10em; font-weight: bold; text-decoration: underline; }
:compressed(壓縮)
壓縮樣式要盡可能的占用最小的空間，在分隔選擇器的時候不會有任何空格，在文件的末尾會有新行。它還包含一些其他的壓縮方式，例如使用最小的表現形式來現實顏色。但是這樣不適合人為閱讀。例如
#main{ color:#fff; font-weight:bold; text-decoration:underline }
Sass擴展
Sass為一些有特殊需求的用戶提供了一些高級自定義。要想使用這些特性，就得了解Ruby。
定義自定義Sass函數
用戶可以通過使用RubyAPI去定義他們自己的Sass方法。更多信息，請看source documentation。
緩存存儲
Sass會緩存文檔，因此它們可以被重復使用，而不需要去解析，除非文檔被更新了。默認的，Sass會通過指明:cache_location去把文件緩存到文件系統中的一個位置。如果你不可以操作文件系統或不需要去通過Ruby進程或機器去分享這些緩存，你可以通過設置:cache_store option去定義你自己的緩存器。要想知道更多關於緩存器的知識，可以去看source documentation。
自定義入口
Sass的入口是通過@import中的路徑去找到適當的Sass代碼。默認的，這些代碼是從文件系統中加載的，但是入口也可以被添加為加載數據庫、HTTP或者使用不同於Sass預期的命名方案。
每一個入口有一個單獨的加載路徑（或者對於后端是相同概念的），入口可以被放置在:load_paths array旁的普通文件系統路徑。
當在解析一個@import時，Sass通過加載路徑去查詢一個成功引入路徑的入口。當一個被發現時，這個被引入的文件會被使用。
用戶定義的入口必須繼承自SASS:Importers::Base。
推薦web前端群：群名稱：html5/css3/js/jq/nodejs/div 群號：339840649 歡迎加入 一起交流~