SASS

引入變量

（1）$標誌變量

（2）變量中劃線和下劃線兼容，同一個變量

$link-color: blue;
a {
  color: $link_color;
}

//編譯後

a {
  color: blue;
}

 

嵌套css規則

（1）簡單嵌套（後代選擇器）

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

編譯後：

 /* 編譯後 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

（2）特殊的sass選擇器——父選擇器，標誌符&，能夠放在任何一個選擇器可出現的地方

（a）爲父選擇器提供:hover等僞類

article a {
  color: blue;
  &:hover { color: red }    //&至關於article a }

&被父選擇器直接替換

 

article a { color: blue }
article a:hover { color: red }

 

（b）在父選擇器以前添加選擇器

#content aside {
  color: red;
  body.ie & { color: green }
}

翻譯後：

/*編譯後*/
#content aside {color: red};
body.ie #content aside { color: green }

（3）羣組選擇器的嵌套

nav, aside {
  a {color: blue}
}

編譯後：

nav a, aside a {color: blue}

（4）子組合選擇器和同層組合選擇器：> + ~   （~選擇該選擇器後的全部同級選擇器、+選擇該選擇器後的第一個同級選擇器，即相鄰兄弟選擇器）

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

編譯後：

article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }

 

（5）屬性嵌套

 

nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}

 

編譯後：

nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

導入SASS文件

（1）導入規則

css有一個特別不經常使用的特性，即@import規則，它容許在一個css文件中導入其餘css文件。然而，後果是隻有執行到@import時，瀏覽器纔會去下載其餘css文件，這致使頁面加載起來特別慢。

sass也有一個@import規則，但不一樣的是，sass的@import規則在生成css文件時就把相關文件導入進來。這意味着全部相關的樣式被概括到了同一個css文件中，而無需發起額外的下載請求。另外，全部在被導入文件中定義的變量和混合器都可在導入文件中使用。

使用sass的@import規則並不須要指明被導入文件的全名。你能夠省略.sass或.scss文件後綴

 

（2）使用SASS部分文件

sass局部文件的文件名如下劃線開頭。這樣，sass就不會在編譯時單獨編譯這個文件輸出css，而只把這個文件用做導入。當你@import一個局部文件時，還能夠不寫文件的全名，即省略文件名開頭的下劃線。舉例來講，你想導入themes/_night-sky.scss這個局部文件裏的變量，你只需在樣式表中寫@import "themes/night-sky";

（3）默認變量值

sass的!default 

$fancybox-width: 400px !default;
.fancybox {
　　width: $fancybox-width;
}

 

 （4）嵌套導入

有一個名爲_blue-theme.scss的局部文件，內容以下：

aside {
  background: blue;
  color: white;
}

把它導入到一個css規則內：

.blue-theme {@import "blue-theme"}

//生成的結果跟你直接在.blue-theme選擇器內寫_blue-theme.scss文件的內容徹底同樣。

.blue-theme { aside { background: blue; color: #fff;
  }
}

（5）原生CSS的導入

把原始的css文件更名爲.scss後綴，便可直接導入了。

靜默註釋

css標準註釋格式：  /*.......*/

靜默註釋：  //

body {
  color: #333; // 這種註釋內容不會出如今生成的css文件中
  padding: 0; /* 這種註釋內容會出如今生成的css文件中 */
}

 

混合器

混合器——實現大段樣式的重用

變量——實現比較小的樣式的複用，好比樣式、顏色等

@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

（1）混合器中混入css規則

@mixin no-bullets {
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
  }
}

ul.plain {
  color: #444;
  @include no-bullets;
}

ul.plain {
  color: #444;
  list-style: none;
}
ul.plain li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}

 

（2）給混合器傳參

@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

a {
  @include link-colors(blue, red, green);
}

//Sass最終生成的是：

a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

 

（3）默認參數值

@mixin link-colors(
    $normal,
    $hover: $normal,
    $visited: $normal
  )
{
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

使用選擇器繼承精簡css樣式

經過@extend語法實現

.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

在上邊的代碼中，.seriousError將會繼承樣式表中任何位置處爲.error定義的全部樣式。以class="seriousError" 修飾的html元素最終的展現效果就好像是class="seriousError error"。相關元素不只會擁有一個3px寬的邊框，並且這個邊框將變成紅色的，這個元素同時還會有一個淺紅色的背景，由於這些都是在.error裏邊定義的樣式。

 .seriousError不只會繼承.error自身的全部樣式，任何跟.error有關的組合選擇器樣式也會被.seriousError以組合選擇器的形式繼承，以下代碼:

 

//.seriousError從.error繼承樣式
.error a{  //應用到.seriousError a
  color: red;
  font-weight: 100;
}
h1.error { //應用到hl.seriousError
  font-size: 1.2rem;
}