SASS有兩種后綴文件：一種后綴名為sass，不適用大括號(hào)和分號(hào)吓懈；另一種是scss文件搔体，這種和我們平時(shí)寫(xiě)的css文件格式相差不大，使用大括號(hào)和分號(hào)褪那。本篇文章講解主要為scss幽纷，建議使用后綴名為scss的文件。

//文件后綴名為scss的語(yǔ)法
body{
    background：#eee;
    font-size:12px;
    p{
        background:#145156;
    }
}

導(dǎo)入

SASS導(dǎo)入（@import）規(guī)則和css有所不同博敬，編譯時(shí)會(huì)將@import的scss文件合并友浸。但是如果導(dǎo)入css后綴名文件就和普通css導(dǎo)入無(wú)差別。

//a.scss
//----------------------------
body{
    font-size:16px;
}

需導(dǎo)入樣式的sass文件b.scss

@import "reset.css";
@import "a";
p{
    font-size:12px;
}

編譯出的css：

@import "reset.css";
body{
    font-size:16px;
}
p{
    font-size:12px;
}

注釋

sass有兩種注釋方式偏窝，一種是標(biāo)準(zhǔn)的css注釋樣式/**/收恢，另一種是雙斜杠形式的單行注釋（不會(huì)轉(zhuǎn)譯到css中）。

變量

SASS的變量必須是$開(kāi)頭祭往，后面緊跟變量名伦意，而變量值和變量名之間需使用冒號(hào)（：）分隔開(kāi)，如果值后面跟上 硼补！default則表示默認(rèn)值驮肉。
普通變量
定義之后可以在全局范圍內(nèi)使用。

//sass style
//----------------------
$fontSize: 12px;
body{
    font-size:$fontSize;
}

//css style
//-----------------------
body{
    font-size:12px;
}

默認(rèn)變量
sass的默認(rèn)變量一般是用來(lái)設(shè)置默認(rèn)值已骇，然后根據(jù)需求來(lái)覆蓋离钝，覆蓋的方式是在默認(rèn)變量之前重新聲明下變量即可

//sass style
//-------------------------------
$baseLineHeight:        2;
$baseLineHeight:        1.5 !default;
body{
    line-height: $baseLineHeight; 
}

//css style
//-------------------------------
body{
    line-height:2;
}

在這里默認(rèn)值被覆蓋，并作用于全局褪储。接下來(lái)卵渴，看一看選擇器中定義局部變量和全局變量測(cè)試

//覆寫(xiě)default
$fontSize:16px;
//定義默認(rèn)樣式
$fontSize:12px !default;

//覆寫(xiě)測(cè)試
ul{
 font-size:$fontSize;//16px
}
//局部覆寫(xiě)測(cè)試&&選擇器中定義局部變量測(cè)試
li{
    $fontSize: 18px;
    font-size:$fontSize;//18px
}
a{
    font-size:$fontSize;//16px
}
//選擇器中定義全局變量測(cè)試
.demo2{
    $fontSize: 20px !global;
    font-size:$fontSize;//20px
}
.deom3{
    font-size:$fontSize;//20px;
}

總結(jié)：scss實(shí)際上就是一個(gè)編程語(yǔ)言，有它的作用域鲤竹，函數(shù)和變量浪读。在全局定義的可在全局使用，在局部定義的局部變量只能在局部使用辛藻，定義加上瑟啃！global 或者！default便可以在其他選擇器作用域中使用揩尸。

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

//sass style
//-------------------------------
$borderDirection:       top !default; 
$baseFontSize:          12px !default;
$baseLineHeight:        1.5 !default;

//應(yīng)用于class和屬性
.border-#{$borderDirection}{
  border-#{$borderDirection}:1px solid #ccc;
}
//應(yīng)用于復(fù)雜的屬性值
body{
    font:#{$baseFontSize}/#{$baseLineHeight};
}

//css style
//-------------------------------
.border-top{
  border-top:1px solid #ccc;
}
body {
  font: 12px/1.5;
}

多值變量

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

list

list數(shù)據(jù)可通過(guò)空格犹撒，逗號(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即可）。
定義

//一維數(shù)據(jù)
$px: 5px 10px 20px 30px;

//二維數(shù)據(jù)月杉，相當(dāng)于js中的二維數(shù)組
$px: 5px 10px, 20px 30px;
$px: (5px 10px) (20px 30px);

使用

//sass style
//-------------------------------
$linkColor:         #08c #333 !default;//第一個(gè)值為默認(rèn)值刃跛，第二個(gè)鼠標(biāo)滑過(guò)值
a{
  color:nth($linkColor,1);

  &:hover{
    color:nth($linkColor,2);
  }
}

//css style
//-------------------------------
a{
  color:#08c;
}
a:hover{
  color:#333;
}

map

map數(shù)據(jù)以key和value成對(duì)出現(xiàn)，其中value又可以是list苛萎。格式為：$map: (key1: value1, key2: value2, key3: value3);桨昙。可通過(guò)map-get($map,$key)取值腌歉。關(guān)于map數(shù)據(jù)還有很多其他函數(shù)如map-merge($map1,$map2)蛙酪，map-keys($map)，map-values($map)等翘盖，具體可參考sass Functions（搜索List Functions即可）桂塞。

嵌套

所謂選擇器嵌套指的是在一個(gè)選擇器中嵌套另一個(gè)選擇器來(lái)實(shí)現(xiàn)繼承，從而增強(qiáng)了sass文件的結(jié)構(gòu)性和可讀性最仑。在選擇器嵌套中藐俺，可以使用&表示父元素選擇器.

選擇器嵌套

//sass style
//-------------------------------
#top_nav{
  line-height: 40px;
  text-transform: capitalize;
  background-color:#333;
  li{
    float:left;
  }
  a{
    display: block;
    padding: 0 10px;
    color: #fff;

    &:hover{
      color:#ddd;
    }
  }
}

//css style
//-------------------------------
#top_nav{
  line-height: 40px;
  text-transform: capitalize;
  background-color:#333;
}  
#top_nav li{
  float:left;
}
#top_nav a{
  display: block;
  padding: 0 10px;
  color: #fff;
}
#top_nav a:hover{
  color:#ddd;
}

屬性嵌套

所謂屬性嵌套指的是有些屬性擁有同一個(gè)開(kāi)始單詞，如border-width泥彤，border-color都是以border開(kāi)頭欲芹。拿個(gè)官網(wǎng)的實(shí)例看下：

/sass style
//-------------------------------
.fakeshadow {
  border: {
    style: solid;
    left: {
      width: 4px;
      color: #888;
    }
    right: {
      width: 2px;
      color: #ccc;
    }
  }
}

//css style
//-------------------------------
.fakeshadow {
  border-style: solid;
  border-left-width: 4px;
  border-left-color: #888;
  border-right-width: 2px;
  border-right-color: #ccc; 
}

@-root

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

普通跳出

//sass style
//-------------------------------
//沒(méi)有跳出
.parent-1 {
  color:#f00;
  .child {
    width:100px;
  }
}

//單個(gè)選擇器跳出
.parent-2 {
  color:#f00;
  @at-root .child {
    width:200px;
  }
}

//多個(gè)選擇器跳出
.parent-3 {
  background:#f00;
  @at-root {
    .child1 {
      width:300px;
    }
    .child2 {
      width:400px;
    }
  }
}

//css style
//-------------------------------
.parent-1 {
  color: #f00;
}
.parent-1 .child {
  width: 100px;
}

.parent-2 {
  color: #f00;
}
.child {
  width: 200px;
}

.parent-3 {
  background: #f00;
}
.child1 {
  width: 300px;
}
.child2 {
  width: 400px;
}

@at-root (without: ...)和@at-root (with: ...)

默認(rèn)@at-root只會(huì)跳出選擇器嵌套浙宜，而不能跳出@media或@support，如果要跳出這兩種蛹磺，則需使用@at-root (without: media)粟瞬，@at-root (without: support)。這個(gè)語(yǔ)法的關(guān)鍵詞有四個(gè)：all（表示所有）萤捆，rule（表示常規(guī)css）裙品，media（表示media）俗批，support。我們默認(rèn)的@at-root其實(shí)就是@at-root (without:rule)市怎。

/sass style
//-------------------------------
//跳出父級(jí)元素嵌套
@media print {
    .parent1{
      color:#f00;
      @at-root .child1 {
        width:200px;
      }
    }
}

//跳出media嵌套岁忘，父級(jí)有效
@media print {
  .parent2{
    color:#f00;

    @at-root (without: media) {
      .child2 {
        width:200px;
      } 
    }
  }
}

//跳出media和父級(jí)
@media print {
  .parent3{
    color:#f00;

    @at-root (without: all) {
      .child3 {
        width:200px;
      } 
    }
  }
}

//sass style
//-------------------------------
@media print {
  .parent1 {
    color: #f00;
  }
  .child1 {
    width: 200px;
  }
}

@media print {
  .parent2 {
    color: #f00;
  }
}
.parent2 .child2 {
  width: 200px;
}

@media print {
  .parent3 {
    color: #f00;
  }
}
.child3 {
  width: 200px;
}

@at-root與&配合使用

//sass style
//-------------------------------
.child{
    @at-root .parent &{
        color:#f00;
    }
}

//css style
//-------------------------------
.parent .child {
  color: #f00;
}

混合（mixin）

sass中使用@mixin聲明混合，可以傳遞參數(shù)区匠，參數(shù)名以$符號(hào)開(kāi)始干像，多個(gè)參數(shù)以逗號(hào)分開(kāi)，也可以給參數(shù)設(shè)置默認(rèn)值驰弄。聲明的@mixin通過(guò)@include來(lái)調(diào)用麻汰。

無(wú)參數(shù)mixin

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

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

有參數(shù)mixin

/sass style
//-------------------------------   
@mixin opacity($opacity:50) {
  opacity: $opacity / 100;
  filter: alpha(opacity=$opacity);
}

//css style
//-------------------------------
.opacity{
  @include opacity; //參數(shù)使用默認(rèn)值
}
.opacity-80{
  @include opacity(80); //傳遞參數(shù)
}

更多用法請(qǐng)參考Sass

繼承

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

//sass style
//-------------------------------
h1{
  border: 4px solid #ff9aa9;
}
.speaker{
  @extend h1;
  border-width: 2px;
}

//css style
//-------------------------------
h1,.speaker{
  border: 4px solid #ff9aa9;
}
.speaker{
  border-width: 2px;
}

占位符

sass 3.2.0以后就可以定義占位選擇器%。這種選擇器的優(yōu)勢(shì)在于：如果不調(diào)用則不會(huì)有任何多余的css文件智亮，避免了以前在一些基礎(chǔ)的文件中預(yù)定義了很多基礎(chǔ)的樣式忆某，然后實(shí)際應(yīng)用中不管是否使用了@extend去繼承相應(yīng)的樣式，都會(huì)解析出來(lái)所有的樣式阔蛉。占位選擇器以%標(biāo)識(shí)定義弃舒，通過(guò)@extend調(diào)用。

//sass style
//-------------------------------
%ir{
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
%clearfix{
  @if $lte7 {
    *zoom: 1;
  }
  &:before,
  &:after {
    content: "";
    display: table;
    font: 0/0 a;
  }
  &:after {
    clear: both;
  }
}
#header{
  h1{
    @extend %ir;
    width:300px;
  }
}
.ir{
  @extend %ir;
}

//css style
//-------------------------------
#header h1,
.ir{
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
#header h1{
  width:300px;
}

基本運(yùn)用到這状原，關(guān)于函數(shù)以及其他可以參考SASS聋呢。

制定SCSS規(guī)范

1、所有導(dǎo)入文件以 _ 開(kāi)頭
2颠区、可覆蓋變量定義時(shí)加上 !default
3削锰、變量及@function采用駝峰式命名
4、@mixin毕莱，%采用中劃線命名
5器贩、@mixin中參數(shù)有默認(rèn)值的放在沒(méi)有默認(rèn)值前面
6、模塊文件的變量在模塊文件頭部申明
7朋截、如需@extend蛹稍，請(qǐng)先設(shè)計(jì)成%