安裝：

第一步：安裝Ruby
Sass是用Ruby語(yǔ)言寫(xiě)的，但是兩者的語(yǔ)法沒(méi)有關(guān)系，所以學(xué) Sass 不用學(xué) Ruby，只是必須先安裝Ruby，然后再安裝Sass
Linux和Mac已自帶Ruby，不用再安裝。(根據(jù)自己電腦系統(tǒng)自行下載Ruby，提供windows64)
驗(yàn)證Ruby是否安裝成功

ruby -v

或者

ruby --version

如果輸出Ruby版本號(hào)，則表示安裝成功

第二步：安裝Sass
在命令行輸入下面的命令

gem install sass

這樣Sass就安裝成功了。檢測(cè)是否安裝成功

sass -v

或者

sass --version

如果輸出Sass版本號(hào)，則表示安裝成功

可以使用以下命令更新Sass版本

gem update sass

編譯:

新建test.scss，并輸入如下代碼：

$blue : #1875e7;　
div {
    color : $blue;
}

直接編譯：使用如下命令

sass test.scss

結(jié)果如下圖（圖中出現(xiàn)亂碼，需要在scss文件頂部加上@charset "UTF-8";）：

image.png

2.生成css文件：使用如下命令

sass test.scss ../css/test1.css

則在css目錄下生成了一個(gè)test1.css，如下圖：

image.png

3.自動(dòng)監(jiān)聽(tīng)某個(gè)scss文件
執(zhí)行如下命令：

sass --watch test.scss:../css/test1.css

image.png

4.自動(dòng)監(jiān)聽(tīng)某個(gè)文件夾
執(zhí)行如下命令：

sass --watch scss:css//(要返回上一級(jí)，也是文件夾所在的目錄)

image.png

5.四種執(zhí)行風(fēng)格：
nested：嵌套縮進(jìn)的css代碼，它是默認(rèn)值。
expanded：沒(méi)有縮進(jìn)的、擴(kuò)展的css代碼。
compact：簡(jiǎn)潔格式的css代碼。
compressed：壓縮后的css代碼(線(xiàn)上一般用這個(gè))。

sass test1.scss:../css/test0.css
sass --style nested test1.scss:../css/test1.css
sass --style expanded test1.scss:../css/test2.css
sass --style compact test1.scss:../css/test3.css
sass --style compressed test1.scss:../css/test4.css

效果如下：

image.png

使用語(yǔ)法：

【參考地址】

變量

SASS允許使用變量，所有變量以$開(kāi)頭

$blue : #1875e7;　
div {
    color : $blue;
}

如果變量需要鑲嵌在字符串之中，就必須需要寫(xiě)在#{}之中。

$side : left;
.rounded {
    border-#{$side}-radius: 5px;
}

算式

SASS允許在代碼中使用算式：

$var : 100px;
body {
    margin: (14px/2);
    top: 50px + 100px;
    right : $var;
    // bottom : $var * 10%; (親測(cè)這樣寫(xiě)不行)
}

嵌套

SASS允許選擇器嵌套。比如，下面的CSS代碼：

div {
    h1{
        color:red;
    }
}

屬性也可以嵌套，比如border-color屬性，可以寫(xiě)成：(注意，border后面必須加上冒號(hào)。)

p {
    border: {
        color: red;
    }
}

在嵌套的代碼塊內(nèi)，可以使用&引用父元素。比如a:hover偽類(lèi)，可以寫(xiě)成：

a {
    &:hover { color: #ffb3ff; }
}

注釋

標(biāo)準(zhǔn)的CSS注釋 /* comment */ 會(huì)保留到編譯后的文件。
單行注釋 // comment ，只保留在SASS源文件中，編譯后被省略。
在/* 后面加一個(gè)感嘆號(hào)，表示這是"重要注釋"。即使是壓縮模式編譯，也會(huì)保留這行注釋?zhuān)ǔ？梢杂糜诼暶靼鏅?quán)信息。

// comment
/* comment */
/*! 
    重要注釋
*/

繼承

SASS允許一個(gè)選擇器，繼承另一個(gè)選擇器。比如，現(xiàn)有class1：

.class1 {
    border: 1px solid #ddd;
}

class2要繼承class1，就要使用@extend命令：

.class2 {
    @extend .class1;
　　font-size:120%;
}

Mixin-可以重用的代碼塊。

使用@mixin命令，定義一個(gè)代碼塊。

@mixin left1 {
    float: left;
    margin-left: 10px;
}

使用@include命令，調(diào)用這個(gè)mixin。

div {
    @include left1;
}

mixin的強(qiáng)大之處，在于可以指定參數(shù)和缺省值。

@mixin left2($value: 10px) {
    float: left;
    margin-right: $value;
}

使用的時(shí)候，根據(jù)需要加入?yún)?shù)：

div {
    @include left2(20px);
}

下面是一個(gè)mixin的實(shí)例，用來(lái)生成瀏覽器前綴。

@mixin rounded($vert, $horz, $radius: 10px) {
    border-#{$vert}-#{$horz}-radius: $radius;
    -moz-border-radius-#{$vert}#{$horz}: $radius;
    -webkit-border-#{$vert}-#{$horz}-radius: $radius;
}

使用的時(shí)候，可以像下面這樣調(diào)用：

#navbar li {
    @include rounded(top, left);
}
#footer {
    @include rounded(top, left, 5px);
}

image.png

顏色函數(shù)

SASS提供了一些內(nèi)置的顏色函數(shù)，以便生成系列顏色。

插入外部文件

@import命令，用來(lái)插入外部文件。

@import "path/filename.scss";
@import "foo.css";

if語(yǔ)句

@if可以用來(lái)判斷：

p {
    @if 1 + 1 == 2 { border: 1px solid; }
    @if 5 < 3 { border: 2px dotted; }
}

配套的還有@else命令：

p{
    @if 5 > 3 {
        background-color: #000;
    } @else {
        background-color: #fff;
    }
}

image.png

for語(yǔ)句

SASS支持for循環(huán)：

@for $i from 1 to 4 { // 不包含4
    .border-#{$i} {
        border: #{$i}px solid blue;
    }
}

image.png

while語(yǔ)句

$i: 6;
@while $i > 0 {
    .item-#{$i} { width: 2em * $i; }
    $i: $i - 2;
}

image.png

each語(yǔ)句

@each $member in zhangsan, lisi, wangwu{
    .#{$member} {
        background-image: url("/image/#{$member}.jpg");
    }
}

image.png

自定義函數(shù)

@function double($n) {
    @return $n * 2;
}
#sidebar {
    width: double(20%);
    height: double(2rem);
    border-width: double(3px);
}

image.png