摘要：未編譯樣式多繼承鏈式繼承占位選擇器編譯后樣式中使用聲明混合，可以傳遞參數，參數名以符號開始，多個參數以逗號分開，也可以給參數設置默認值。

sass是一種css預處理器，用專門的編程語言，進行網頁樣式設計，然后再編譯成正常的CSS文件。Sass是CSS3的擴展，它增加了嵌套規則，變量，mixins，選擇器繼承等等。Sass生成格式良好的CSS，使樣式表更易于組織和維護。

.sass和.scss區別：

.sass最初是為了配合haml而設計，所有有著和haml一樣的縮進風格，從第三代開始，保留縮進風格，完全向下兼容普通的css代碼。推薦使用.scss

compass 是一個開源的css創作框架（一個技術類庫）。在sass基礎上封裝了一系列有用的模塊和模板，補充sass的功能

推薦鏈接：  sass中文網 | sass入門 | sass用法指南-阮一峰

window下安裝SASS首先需要安裝 (Ruby)[https://rubyinstaller.org/dow...
安裝過程中請注意勾選Add Ruby executables to your PATH添加到系統環境變量。

安裝完成后需測試安裝有沒有成功,運行CMD輸入ruby -v。如安裝成功會打印ruby版本號

更換gem源（使用淘寶的gem源https://ruby.taobao.org/）

1.刪除原gem源gem sources --remove https://rubygems.org/

2.添加國內淘寶源gem sources -a https://ruby.taobao.org/

3.打印是否替換成功gem sources -l

4.更換成功后打印如下:

*** CURRENT SOURCES ***
https://ruby.taobao.org/

安裝Sass和Compass

//安裝如下(如mac安裝遇到權限問題需加 sudo gem install sass)
gem install sass
gem install compass

sass常用更新、查看版本、sass命令幫助等命令：

//更新sass
gem update sass

//查看sass版本
sass -v

//查看sass幫助
sass -h

sass編譯有很多種方式，如命令行編譯模式、sublime插件SASS-Build、編譯軟件koala、前端自動化軟件codekit、Grunt打造前端自動化工作流grunt-sass、Gulp打造前端自動化工作流gulp-ruby-sass等。

//單文件轉換命令
sass input.scss output.css

//單文件監聽命令
sass --watch input.scss:output.css

//如果你有很多的sass文件的目錄，你也可以告訴sass監聽整個目錄：
sass --watch app/sass:public/stylesheets

//編譯格式
sass --watch input.scss:output.css --style compact

//編譯添加調試map
sass --watch input.scss:output.css --sourcemap

//選擇編譯格式并添加調試map
sass --watch input.scss:output.css --style expanded --sourcemap

//開啟debug信息
sass --watch input.scss:output.css --debug-info

Number

String

List

Map

Color

Boolean

Null

// 數字類型
$n1: 1.2;
$n2: 12;
$n3: 12px;

// 字符串類型
$s1: content;
$s2: "content";

// bool類型
$true: true;
$false: false;

// Null 類型
$null: null;

// color 類型
$c1: blue;
$c2: #000;
$c3: rbga(0,0,0,0.3);

.#{$s1}{
    @if $null == null {
        font-size: $n3
    }
}

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

sass的默認變量僅需要在值后面加上!default即可。

sass的默認變量一般是用來設置默認值，然后根據需求來覆蓋的，覆蓋的方式也很簡單，只需要在默認變量之前重新聲明下變量即可

多值變量分為list類型和map類型，簡單來說list類型有點像js中的數組，而map類型有點像js中的對象。

list。list數據可通過空格，逗號或小括號分隔多個值，可用nth($var,$index)取值

map。map數據以key和value成對出現，其中value又可以是list。格式為：$map: (key1: value1, key2: value2, key3: value3);。可通過map-get($map,$key)取值。

在{}內定義的變量，在{}外訪問不到。如果需要在全局訪問，需要在變量值后面加上!global即為全局變量。

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

未編譯樣式 Scss

body {
    $c_blue: blue;

    header {

        // 局部變量
        $c_red: red;

        // 全局變量
        $c_yellow: yellow !global;
        color: $c_red; 

        // 默認變量
        $fz: 14px;
        $fz: 12px !default;
        font-size: $fz;

        // 多值變量
        $padding: 2px 4px 6px 8px; // 類似數組
        padding: $padding;
        padding-left: nth($padding, 1); // 下標從1開始

        $maps: (color:red, fz: 13px); // 類似json
        background: map-get($maps, color);

        // 特殊變量
        $display: disp;
        
        .#{$display}{
            width: 10px;
            height: 10px;
        }
    }
    footer {
        color: $c_blue;
        color: $c_yellow;
        // color: $c_red; // Undefined variable: "$color".
    }
}

編譯后樣式 Css

body header {
  color: red;
  font-size: 14px;
  padding: 2px 4px 6px 8px;
  padding-left: 2px;
  background: red; }
  body header .disp {
    width: 10px;
    height: 10px; }
body footer {
  color: blue;
  color: yellow; }

/*# sourceMappingURL=test.css.map */

sass的導入(@import)規則和CSS的有所不同，編譯時會將@import的scss文件合并進來只生成一個CSS文件。

如果在sass文件中導入css文件如@import "reset.css"，那效果跟普通CSS導入樣式文件一樣，導入的css文件不會合并到編譯后的文件中，而是以@import方式存在。
以下為原生css導入：

被導入文件的名字以.css結尾
@import "***.css"

被導入文件的名字是一個URL地址
@import "http://***"

被導入文件的名字是css的url{}值
@import url(*.css)

所有的sass導入文件都可以忽略后綴名.scss。一般來說基礎的文件命名方法以_開頭，如_mixin.scss。這種文件在導入的時候可以不寫下劃線，可寫成@import "mixin"。

選擇器嵌套指的是在一個選擇器中嵌套另一個選擇器來實現繼承，從而增強了sass文件的結構性和可讀性。

&表示父元素選擇器，常用 &:hover

.container {
  h1, h2, h3 {margin-bottom: .8em}
}

子組合選擇器>選擇一個元素的直接子元素。(只會選擇article下緊跟著的子元素中命中section選擇器的元素)

article > section { border: 1px solid #ccc }

同層相鄰組合選擇器+選擇header元素后緊跟的元素

header + p { font-size: 1.1em }

同層全體組合選擇器~，選擇所有跟在article后的同層article元素，不管它們之間隔了多少其他元素

article ~ article { border-top: 1px dashed #ccc }

屬性嵌套指的是有些屬性擁有同一個開始單詞，如border-width，border-color都是以border開頭。

border后面必須加上冒號。

@at-root
用來跳出選擇器嵌套的。默認所有的嵌套，繼承所有上級選擇器，但有了這個就可以跳出所有上級選擇器。

@at-root (without: ...)和@at-root (with: ...)
默認@at-root只會跳出選擇器嵌套，而不能跳出@media或@support，如果要跳出這兩種，則需使用@at-root (without: media)，@at-root (without: support)。這個語法的關鍵詞有四個：all（表示所有），rule（表示常規css），media（表示media），support（表示support，因為@support目前還無法廣泛使用，所以在此不表）。我們默認的@at-root其實就是@at-root (without:rule)。

未編譯樣式 Scss

body {
    header {
        border: {
            color: red;
            radius: 5px;
        }

        a {
            text-align: center;

            &:hover {
                text-align: left;
            }
            @at-root .content {
                width: 100px;
            }
        }
    }
}
@media screen and (max-width:520px){
    @at-root (without:media rule){
        .content {
            height: 200px;
        }
    }
}
@at-root .text-info {
    color: red;

    @at-root nav &{
        color: blue;
    }
}

編譯后樣式 Css

body header {
  border-color: red;
  border-radius: 5px; }
  body header a {
    text-align: center; }
    body header a:hover {
      text-align: left; }
    .content {
      width: 100px; }

.content {
  height: 200px; }
.text-info {
  color: red; }
  nav .text-info {
    color: blue; }

選擇器繼承可以讓選擇器繼承另一個選擇器的所有樣式，并聯合聲明。使用選擇器的繼承，要使用關鍵詞@extend，后面緊跟需要繼承的選擇器。

一個選擇器中有多個繼承

.b 繼承.a, .c 繼承.b ...

不支持包含選擇器(.a .b),相鄰兄弟選擇器(.a + .b)
a如果有:hover ,hover狀態也被繼承

如果不調用則不會有任何多余的css文件，避免了以前在一些基礎的文件中預定義了很多基礎的樣式，然后實際應用中不管是否使用了@extend去繼承相應的樣式，都會解析出來所有的樣式。占位選擇器以%標識定義，通過@extend調用。

未編譯樣式 Scss

.header {
    background: blue;
}
.footer {
    font-size: 12px;
}
.sidebar {
    width: 12px
}
.content {
    height: 13px
}
// 多繼承
.content-header {
    @extend .header;
    @extend .footer;
    @extend .sidebar, .content;
    color: red;
}

// 鏈式繼承
.a {
    width: 12px
}
.b {
    @extend .a;
    height: 13px;
}
.c {
    @extend .b;
    border: 2px;
}

// 占位選擇器 %
%d {
    width: 12px
}

.e {
    @extend %d;
    height: 13px
}

編譯后樣式 Css

.header, .content-header {
  background: blue; }

.footer, .content-header {
  font-size: 12px; }

.sidebar, .content-header {
  width: 12px; }

.content, .content-header {
  height: 13px; }

.content-header {
  color: red; }

.a, .b, .c {
  width: 12px; }

.b, .c {
  height: 13px; }

.c {
  border: 2px; }

.e {
  width: 12px; }

.e {
  height: 13px; }

sass中使用@mixin聲明混合，可以傳遞參數，參數名以$符號開始，多個參數以逗號分開，也可以給參數設置默認值。聲明的@mixin通過@include來調用。
混合指令（Mixin）用于定義可重復使用的樣式，避免了使用無語意的 class，比如 .float-left。混合指令可以包含所有的 CSS 規則，絕大部分 Sass 規則，甚至通過參數功能引入變量，輸出多樣化的樣式。

//sass style
//-------------------------------
@mixin content {
    margin-left:auto;
    margin-right:auto;
}
.demo{
    @include content;
}

//css style
//-------------------------------
.demo{
    margin-left:auto;
    margin-right:auto;
}

@mixin cont($fz: 14px){
    font-size: $fz;
}
body {
    @include cont(12px) 
}

調用時可直接傳入值，如@include傳入參數的個數小于@mixin定義參數的個數，則按照順序表示，后面不足的使用默認值，如不足的沒有默認值則報錯。除此之外還可以選擇性的傳入參數，使用參數名與值同時傳入。

@mixin cont($color: red,$fz: 14px){
    color: $color;
    font-size: $fz;
}
body {
    @include cont($fz: 12px) 
}

如果一個參數可以有多組值，如box-shadow、transition等，那么參數則需要在變量后加三個點表示，如$shadow...

@mixin box-shadow($shadow...){
    -moz-box-shadow: $shadow;
    -webkit-box-shadow: $shadow;
    box-shadow: $shadow;
}
.shadow{
    @include box-shadow(0px 2px 3px #ccc, 4px 5px 6px #f2f)
}

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

@mixin style-for-iphone {
    @media only screen and (min-device-width: 320px) and (max-device-width: 568px){
        @content;
    }
}
@include style-for-iphone{
    font-size: 12px;
}