SASS好在哪裏？

SASS好在哪裏？

引入變量

sass讓人們受益的一個重要特性就是它爲css引入了變量。你可以把反覆使用的css屬性值 定義成變量，然後通過變量名來引用它們，而無需重複書寫這一屬性值。

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

//編譯後

nav {
  width: 100px;
  color: #F90;
}

如果你需要一個不同的值，只需要改變這個變量的值，則所有引用此變量的地方生成的值都會隨之改變,可以用作主題色的切換

嵌套規則

css中重複寫選擇器是非常惱人的。如果要寫一大串指向頁面中同一塊的樣式時，往往需要 一遍又一遍地寫同一個ID：

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

像這種情況，sass可以讓你只寫一遍，且使樣式可讀性更高。在Sass中，你可以像俄羅斯套娃那樣在規則塊中嵌套規則塊。sass在輸出css時會幫你把這些嵌套規則處理好，避免你的重複書寫。

#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 }

大多數情況下這種簡單的嵌套都沒問題，但是有些場景下不行，比如你想要在嵌套的選擇器 裏邊立刻應用一個類似於：hover的僞類。爲了解決這種以及其他情況，sass提供了一個特殊結構— & 。

父選擇器
如果我們這樣寫的話：

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

代碼會爲我們所有子元素都加上hover樣式，這是我們不想看到的。

article a {
  color: blue;
  &:hover { color: red }
//編譯後
article a { color: blue }
article a:hover { color: red }
}

嵌套羣組選擇器

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

這樣也是能正確編譯的

子組合選擇器和同層組合選擇器：>、+和~

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

第一種會選擇article下的所有section，
而第二種會選擇緊跟article的section

你可以用同層相鄰組合選擇器+選擇header元素後緊跟的p元素：

header + p { font-size: 1.1em }
//也可以使用全體同級選擇器
article ~ article { border-top: 1px dashed #ccc }

當然，擁有了這些，你便可以隨意組合

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

@import

css有一個特別不常用的特性，即@import規則，它允許在一個css文件中導入其他css文件。然而，後果是隻有執行到@import時，瀏覽器纔會去下載其他css文件，這導致頁面加載起來特別慢。
sass也有一個@import規則，但不同的是，sass的@import規則在生成css文件時就把相關文件導入進來。這意味着所有相關的樣式被歸納到了同一個css文件中，而無需發起額外的下載請求。另外，所有在被導入文件中定義的變量和混合器（參見2.5節）均可在導入文件中使用。
使用sass的@import規則並不需要指明被導入文件的全名。你可以省略.sass或.scss文件後綴（見下圖）。這樣，在不修改樣式表的前提下，你完全可以隨意修改你或別人寫的被導入的sass樣式文件語法，在sass和scss語法之間隨意切換。舉例來說，@import"sidebar";這條命令將把sidebar.scss文件中所有樣式添加到當前樣式表中。

混合器

如果你的整個網站中有幾處小小的樣式類似（例如一致的顏色和字體），那麼使用變量來統一處理這種情況是非常不錯的選擇。但是當你的樣式變得越來越複雜，你需要大段大段的重用樣式的代碼，獨立的變量就沒辦法應付這種情況了。你可以通過sass的混合器實現大段樣式的重用。
混合器使用@mixin標識符定義。看上去很像其他的CSS @標識符，比如說@media或者@font-face。這個標識符給一大段樣式賦予一個名字，這樣你就可以輕易地通過引用這個名字重用這段樣式。下邊的這段sass代碼，定義了一個非常簡單的混合器，目的是添加跨瀏覽器的圓角邊框。

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

然後就可以在你的樣式表中通過@include來使用這個混合器，放在你希望的任何地方。@include調用會把混合器中的所有樣式提取出來放在@include被調用的地方。如果像下邊這樣寫：

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;
}
}

更強大的是這個，混合器傳參

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

這樣使用：

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

選擇器繼承

使用sass的時候，最後一個減少重複的主要特性就是選擇器繼承。基於Nicole Sullivan面向對象的css的理念，選擇器繼承是說一個選擇器可以繼承爲另一個選擇器定義的所有樣式。這個通過@extend語法實現，如下代碼:

/通過選擇器繼承繼承樣式
.error {
  border: 1px red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}