安裝運(yùn)行

1.下載ruby并安裝

2.安裝之后打開命令行執(zhí)行g(shù)em命令，檢查是否已經(jīng)安裝好

安裝完ruby之后，在開始菜單中，找到剛才我們安裝的ruby，打開Start Command Prompt with Ruby

3.安裝sass，在命令行中執(zhí)行:gem install sass

gem install sass

按回車，等待一段時(shí)間就會(huì)提示你sass安裝成功，安裝成功后可以在命令行中執(zhí)行sass -v，查看版本

4.創(chuàng)建簡單項(xiàng)目，用sass創(chuàng)建項(xiàng)目比較簡單，直接新建文件夾，新建.scss文件即可

5.將.scss文件編譯成.css文件

在命令行中進(jìn)入到sass項(xiàng)目中，執(zhí)行：sass ?demo.scss demo.css即可,這跟webpack管理項(xiàng)目很相似

6.sass使用基礎(chǔ)命令

編譯sass ： sass ；

監(jiān)視sass文件：sass --watch :,執(zhí)行這個(gè)命令后，編輯sass文件后會(huì)自動(dòng)的改變相應(yīng)的css文件，不需要每次都去重新編譯sass文件；

文件夾監(jiān)聽命令，監(jiān)聽文件夾內(nèi)所有sass文件改動(dòng)，并編譯 : sass --watch scss:css;

編譯sass風(fēng)格：sass --style compressed ?;

生成 source map，方便調(diào)試 :?sass --watch scss:css --sourcemap ; ? ??--sourcemap表示開啟sourcemap調(diào)試。開啟sourcemap調(diào)試后，會(huì)生成一個(gè)后綴名為.css.map文件。這樣就可以像調(diào)試CSS一樣在瀏覽器調(diào)試scss文件了。

幫助： sass -h;

7.sass四種編譯風(fēng)格

nested：嵌套縮進(jìn)的css代碼，它是默認(rèn)值；

expanded：沒有縮進(jìn)的、擴(kuò)展的css代碼；

compact：簡潔格式的css代碼；

compressed：壓縮后的css代碼；

sass基礎(chǔ)語法

注釋

Sass有兩種注釋方式，一種是標(biāo)準(zhǔn)的CSS注釋方式/* */，另一種則是//雙斜桿形式的單行注釋，不過這種單行注釋不會(huì)被轉(zhuǎn)譯出來。

這里有一個(gè)坑，代碼若有中文編譯Sass，文件出現(xiàn)Syntax error: Invalid GBK character報(bào)錯(cuò)，解決方法如下：在C:\Ruby22-x64\lib\ruby\gems\2.2.0\gems\sass-3.4.15\lib\sass\engine.rb文件里面加入Encoding.default_external?=?Encoding.find('utf-8')放在所有的require XXXX 之后即可。最后在scss文件頭部啟用編碼聲明：@charset "utf-8"; //必須設(shè)置了這個(gè)才能編譯有中文的注釋。

變量

Sass的變量必須是$開頭，后面緊跟變量名，而變量值和變量名之間就需要使用冒號(hào)(:)分隔開（就像CSS屬性設(shè)置一樣），如果值后面加上!default則表示默認(rèn)值。

特殊變量

一般我們定義的變量都為屬性值，可直接使用，但是如果變量作為屬性或在某些特殊情況下等則必須要以#{$variables}形式使用。

多值變量

多值變量分為list類型和map類型，簡單來說list類型有點(diǎn)像js中的數(shù)組，而map類型有點(diǎn)像js中的對(duì)象。

List類型 ：list數(shù)據(jù)可通過空格，逗號(hào)或小括號(hào)分隔多個(gè)值，可用nth($var,$index)取值。關(guān)于list數(shù)據(jù)操作還有很多其他函數(shù)如length($list)，join($list1,$list2,[$separator])，append($list,$value,[$separator])等，具體可參考sass Functions（搜索List Functions即可）

嵌套（Nesting）

sass的嵌套包括兩種：一種是選擇器的嵌套；另一種是屬性的嵌套。我們一般說起或用到的都是選擇器的嵌套。

選擇器嵌套：所謂選擇器嵌套指的是在一個(gè)選擇器中嵌套另一個(gè)選擇器來實(shí)現(xiàn)繼承，從而增強(qiáng)了sass文件的結(jié)構(gòu)性和可讀性。

在選擇器嵌套中，可以使用&表示父元素選擇器

屬性嵌套：屬性擁有同一個(gè)開始單詞，如border-width，border-color都是以border開頭

@at-root

sass3.3.0中新增的功能，用來跳出選擇器嵌套的。默認(rèn)所有的嵌套，繼承所有上級(jí)選擇器，但有了這個(gè)就可以跳出所有上級(jí)選擇器。

@at-root (without: ...)和@at-root (with: ...)默認(rèn)@at-root只會(huì)跳出選擇器嵌套，而不能跳出@media或@support，如果要跳出這兩種，則需使用@at-root (without: media)，@at-root (without: support)。這個(gè)語法的關(guān)鍵詞有四個(gè) :all（表示所有），rule（表示常規(guī)css）,medal（表示media）,support（表示support，因?yàn)锧support目前還無法廣泛使用，所以在此不表）。我們默認(rèn)@at-root其實(shí)就是@at-root(without:rule)

混合（mixin）

sass中使用@mixin聲明混合，可以傳遞參數(shù)，參數(shù)名以$符號(hào)開始，多個(gè)參數(shù)以逗號(hào)分開，也可以給參數(shù)設(shè)置默認(rèn)值。聲明@mixin通過@include來調(diào)用。

無參數(shù)mixin

有參數(shù)mixin

多個(gè)參數(shù)mixin

調(diào)用時(shí)可直接傳入值，如@include傳入?yún)?shù)的個(gè)數(shù)小于@mixin定義參數(shù)的個(gè)數(shù)，則按照順序表示，后面不足的使用默認(rèn)值，如不足的沒有默認(rèn)值則報(bào)錯(cuò)。除此之外還可以選擇性的傳入?yún)?shù)，使用參數(shù)名與值同時(shí)傳入。

@content

在sass3.2.0中引入，可以用來解決css3的@media等帶來的問題。它可以使@mixin接受一整塊樣式，接受的樣式從@content開始。

PS:@mixin通過@include調(diào)用后解析出來的樣式是以拷貝形式存在的，而下面的繼承則是以聯(lián)合聲明的方式存在的，所以從3.2.0版本以后，建議傳遞參數(shù)的用@mixin，而非傳遞參數(shù)類的使用下面的繼承%。

繼承

sass中，選擇器繼承可以讓選擇器繼承另一個(gè)選擇器的所有樣式，并聯(lián)合聲明。使用選擇器的繼承，要使用關(guān)鍵詞@extend，后面緊跟需要繼承的選擇器。

函數(shù)

sass定義了很多函數(shù)可供使用，當(dāng)然你也可以自己定義函數(shù)，以@fuction開始。sass的官方函數(shù)鏈接為：sass fuction，實(shí)際項(xiàng)目中我們使用最多的應(yīng)該是顏色函數(shù)，而顏色函數(shù)中又以lighten減淡和darken加深為最，其調(diào)用方法為lighten($color,$amount)和darken($color,$amount)，它們的第一個(gè)參數(shù)都是顏色值，第二個(gè)參數(shù)都是百分比。

關(guān)于@mixin，%，@function更多說明可參閱：

sass揭秘之@mixin，%，@function

Sass基礎(chǔ)——顏色函數(shù)

Sass基礎(chǔ)——Sass函數(shù)

運(yùn)算

sass具有運(yùn)算的特性，可以對(duì)數(shù)值型的Value(如：數(shù)字、顏色、變量等)進(jìn)行加減乘除四則運(yùn)算。請(qǐng)注意運(yùn)算符前后請(qǐng)留一個(gè)空格，不然會(huì)出錯(cuò)。

條件判斷及循環(huán)

if判斷：@if可一個(gè)條件單獨(dú)使用，也可以和@else結(jié)合多條件使用

三目判斷：語法為：if($condition, $if_true, $if_false) 。三個(gè)參數(shù)分別表示：條件，條件為真的值，條件為假的值。

for循環(huán)有兩種形式，分別為：@for $var from through 和@for $var from to 。$i表示變量，start表示起始值，end表示結(jié)束值，這兩個(gè)的區(qū)別是關(guān)鍵字through表示包括end這個(gè)數(shù)，而to則不包括end這個(gè)數(shù)。

each循環(huán)：語法為：@each $var in 。其中$var表示變量，而list和map表示list類型數(shù)據(jù)和map類型數(shù)據(jù)。sass 3.3.0新加入了多字段循環(huán)和map數(shù)據(jù)循環(huán)。

單個(gè)字段list數(shù)據(jù)循環(huán)

多個(gè)字段list數(shù)據(jù)循環(huán)

多個(gè)字段map數(shù)據(jù)循環(huán)

需要更多學(xué)習(xí)內(nèi)容可以進(jìn)入sass官網(wǎng)