基礎篇 一、sass與sCSS的區別 1、文件擴展名不同，sass（.sass），scss（.scss）。 2、語法書寫方式不同，sass不帶 {} 和；，scss的語法書寫和css語法類似。

二、編譯命令 1、單文件編譯（一次性編譯） sass 要編譯的sass文件路徑/style.scss：要輸出css文件路徑/style.css 2、多文件編譯（一次性編譯） sass sass/：css/ 表示將sass文件夾中所有的.scss（.sass）文件編譯成 .css文件，并且將這些css文件都放在項目中的css文件夾中。 3.實時編譯 sass –watch 要編譯的sass文件路徑/style.scss：要輸出css文件路徑/style.css sass –watch 要編譯sass文件路徑/文件夾名：要輸出csss文件路徑/css文件夾

三、常見編譯錯誤 1、字符編譯引起：sass編譯不支持GBK編碼，所以創建sass文件時，需要將文件編碼設置為utf-8。 2、路徑中的中文字符引起：建議文件名或文件目錄不要使用中文。

四、輸出方式： 1、嵌套輸出方式nested sass –watch test.scss:test.css –style nested 2、展開輸出方式expanded sass –watch test.scss:test.css –style expanded 3、緊湊輸出方式compact sass –watch test.scss:test.css –style compact 4、壓縮輸出方式comPRessed sass –watch test.scss:test.css –style compressed

五、sass調試 只要瀏覽器支持sourcemap功能，可在瀏覽器直接調試sass文件，并能看到sass文件編譯。（sass3.3版本以下，需要在編譯的時候添加“–sourcemap” 參數： sass –watch –scss –sourcemap style.scss:style.css）。

六、sass基礎特性： 1、變量聲明：$ 2、默認變量：在變量值后加 !default； 3、覆蓋默認變量：在默認變量前重新聲明下變量即可。 4、sass嵌套 選擇器嵌套：nav { a { color：red； } header & { color：green; } } 屬性嵌套：.box { border：{ top：1px solid red; bottom：1px solid green; } } 偽類嵌套：.clearfix{ &:before, &:after { content:”“; display: table; } &:after { clear:both; overflow: hidden; } }

七、混合宏 1、聲明混合宏（在 Sass 中，使用“@mixin”來聲明一個混合宏） 不帶參數混合宏 @mixin border-radius{ -webkit-border-radius: 5px; border-radius: 5px; } 帶參數混合宏 @mixin border-radius(radius:5px)?webkit?border?radius:$radius;border?radius:$radius;復雜的混合宏@mixinbox?shadow($radius:5px){ -webkit-border-radius: $radius; border-radius: $radius; } 復雜的混合宏 @mixin box-shadow($shadow…) { @if length(shadow) >= 1 {      @include prefixer(box-shadow,$shadow) >= 1 { @include prefixer(box-shadow,$shadow); } @else{ shadow:004pxrgba(0,0,0,.3);@includeprefixer(box?shadow,$shadow:0 0 4px rgba(0,0,0,.3); @include prefixer(box-shadow,$shadow); } } 2、調用混合宏（使用“@include”來調用聲明好的混合宏） @mixin border-radius{ -webkit-border-radius: 3px; border-radius: 3px; } button { @include border-radius; }

八、擴展/繼承 在 Sass 中是通過關鍵詞 “@extend”來繼承已存在的類樣式塊，從而實現代碼的繼承。 .btn { border: 1px solid #ccc; padding: 6px 10px; font-size: 14px; }

.btn-primary { background-color: #f36; color: #fff; @extend .btn; } 九、占位符%placeholder %placeholder 聲明的代碼，如果不被 @extend 調用的話，不會產生任何代碼 //SCSS %mt5 { margin-top: 5px; } %pt5{ padding-top: 5px; }

.btn { @extend %mt5; @extend %pt5; } 通過 @extend 調用的占位符，編譯出來的代碼會將相同的代碼合并在一起。

十、sass插件值 #{} 十一、注釋 1、//：在css中不顯示 2、/**/：在css中顯示 十二、數據類型 1、數字： 1、2、10px 2、字符串：‘foo’ SassScript 支持 CSS 的兩種字符串類型： ● 有引號字符串 (quoted strings)，如 “Lucida Grande” 、’http://sass-lang.com‘； ● 無引號字符串 (unquoted strings)，如 sans-serifbold。 在編譯 CSS 文件時不會改變其類型。只有一種情況例外，使用 #{ }插值語句 (interpolation) 時，有引號字符串將被編譯為無引號字符串，這樣方便了在混合指令 (mixin) 中引用選擇器名。

3、顏色：blue 4、布爾值：ture,false; 5、空值：null 6、值列表：用空格或者逗號分開：1.5em 1em 0 2em、Helvetica,Arial,sans-serif。 十三、sass運算 1、乘法、除法運算1個帶單位就好，除法運算需要給運算的外面添加一個小括號( )，因為 Sass 中做除法運算時，直接使用“/”符號做為除號時，將不會生效，編譯時既得不到我們需要的效果，也不會報錯； 2、顏色運算：所有算數運算都支持顏色值，并且是分段運算的 p { color: #010203 + #040506; }

計算公式為 01 + 04 = 05、02 + 05 = 07 和 03 + 06 = 09， 并且被合成為： 如此編譯出來的 CSS 為： p { color: #050709; } 算數運算也能將數字和顏色值 一起運算，同樣也是分段運算的。如： p { color: #010203 * 2; } 計算公式為 01 * 2 = 02、02 * 2 = 04 和 03 * 2 = 06， 并且被合成為： p { color: #020406; } 3、字符運算： 在 Sass 中可以通過加法符號“+”來對字符串進行連接。例如： content: “Hello” + “” + “Sass!”;  .box:before {    content: ” #{$content: “Hello” + “” + “Sass!”; .box:before { content: ” #{$content} “; } 編譯出來的CSS： .box:before { content: ” Hello Sass! “; } 除了在變量中做字符連接運算之外，還可以直接通過 +，把字符連接在一起： div { cursor: e + -resize; } 編譯出來的CSS: div { cursor: e-resize; } 注意，如果有引號的字符串被添加了一個沒有引號的字符串 （也就是，帶引號的字符串在 + 符號左側）， 結果會是一個有引號的字符串。 同樣的，如果一個沒有引號的字符串被添加了一個有引號的字符串 （沒有引號的字符串在 + 符號左側）， 結果將是一個沒有引號的字符串。 例如： p:before { content: “Foo ” + Bar; font-family: sans- + “serif”; } 編譯出來的 CSS： p:before { content: “Foo Bar”; font-family: sans-serif; } 進階篇 一、網址：http://www.imooc.com/learn/436（慕課網） 1、列表函數 列表函數主要包括一些對列表參數的函數使用，主要包括以下幾種： ● length($list)：返回一個列表的長度值； length() 函數中的列表參數之間使用空格隔開，不能使用逗號，否則函數將會出錯

● nth(list,$list,$n)：返回一個列表中指定的某個標簽值 nth() 函數用來指定列表中某個位置的值。不過在 Sass 中，nth() 函數和其他語言不同，1 是指列表中的第一個標簽值，2 是指列給中的第 二個標簽值。注：在 nth(list,$list,$n) 函數中的 $n 必須是大于 0 的整數

● join(list1,$list1,$list2, [separator])：將兩個列給連接在一起，變成一個列表；只能將兩個列表連接成一個列表，如果直接連接兩個以上的列表將會報錯$separator])：將兩個列給連接在一起，變成一個列表； 只能將兩個列表連接成一個列表，如果直接連接兩個以上的列表將會報錯$separator：comma/space/auto

● append(list1,$list1,$val, [separator])：將某個值放在列表的最后；●zip($separator])：將某個值放在列表的最后； ● zip($lists…)：將幾個列表結合成一個多維的列表； ● index(list,$list,$value)：返回一個值在列表中的位置值。 ● 2、@import 規則 Sass 擴展了 CSS 的@import 規則 ，讓它能夠引入 SCSS 和 Sass 文件。 所有引入的 SCSS 和 Sass 文件都會被合并并輸出一個單一的 CSS 文件。 另外，被導入的文件中所定義的變量或 mixins 都可以在主文件中使用。 @import 根據文件名引入。 默認情況下，它會尋找 Sass 文件并直接引入， 但是，在少數幾種情況下，它會被編譯成 CSS 的 @import 規則： ● 如果文件的擴展名是 .css。 ● 如果文件名以 http:// 開頭。 ● 如果文件名是 url()。 ● 如果 @import 包含了任何媒體查詢（media queries）。 如果上述情況都沒有出現，并且擴展名是 .scss 或 .sass， 該名稱的 Sass 或 SCSS 文件就會被引入。 如果沒有擴展名， Sass 將試著找出具有 .scss 或 .sass 擴展名的同名文件并將其引入。 例如： @import “foo.scss”; 或 @import “foo”; 兩者都將引入 foo.scss 文件， 而 @import “foo.css”; @import “foo” screen; @import “http://foo.com/bar“; @import url(foo); 將被編譯為： @import “foo.css”; @import “foo” screen; @import “http://foo.com/bar“; @import url(foo); 如果你有一個 SCSS 或 Sass 文件需要引入， 但是你又不希望它被編譯為一個 CSS 文件， 這時，你就可以在文件名前面加一個下劃線，就能避免被編譯。 這將告訴 Sass 不要把它編譯成 CSS 文件。

3、@at-root @at-root 從字面上解釋就是跳出根元素。當你選擇器嵌套多層之后，想讓某個選擇器跳出，此時就可以使用 @at-root。來看一個簡單的示例： .a { color: red;

.b { color: orange;

} }

4、@debug @debug 在 Sass 中是用來調試的，當你的在 Sass 的源碼中使用了 @debug 指令之后，Sass 代碼在編譯出錯時，在命令終端會輸出你設置的提示 Bug: @debug 10em + 12em; 會輸出： Line 1 DEBUG: 22em

@error 和 @warn、@debug 功能是如出一轍。