scss學習

1.變量聲明

$heighlight-color:#f90

$basic-border:1px soild black

不過，sass並不想強迫任何人必定使用中劃線或下劃線，因此這兩種用法相互兼容。用中劃線聲明的變量可使用下劃線的方式引用，反之亦然。這意味着即便compass選擇用中劃線的命名方式，這並不影響你在使用compass的樣式中用下劃線的命名方式進行引用：

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

//編譯後

a {
  color: blue;
}複製代碼

$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
  border: $highlight-border;
}

//編譯後

.selected {
  border: 1px solid #F90;
}複製代碼

$highlight-color: #F90;
.selected {
  border: 1px solid $highlight-color;
}

//編譯後

.selected {
  border: 1px solid #F90;
}複製代碼

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

//編譯後

nav {
  width: 100px;
  color: #F90;
}複製代碼

2. 嵌套CSS 規則;

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 }
}複製代碼

2-3. 子組合選擇器和同層組合選擇器：>、+和~;

上邊這三個組合選擇器必須和其餘選擇器配合使用，以指定瀏覽器僅選擇某種特定上下文中的元素。

article section { margin: 5px }
article > section { border: 1px solid #ccc }複製代碼

你能夠用子組合選擇器>選擇一個元素的直接子元素。上例中，第一個選擇器會選擇article下的全部命中section選擇器的元素。第二個選擇器只會選擇article下緊跟着的子元素中命中section選擇器的元素。

在下例中，你能夠用同層相鄰組合選擇器+選擇header元素後緊跟的p元素：

header + p { font-size: 1.1em }複製代碼

你也能夠用同層全體組合選擇器~，選擇全部跟在article後的同層article元素，無論它們之間隔了多少其餘元素：

article ~ article { border-top: 1px dashed #ccc }複製代碼

這些組合選擇器能夠絕不費力地應用到sass的規則嵌套中。能夠把它們放在外層選擇器後邊，或裏層選擇器前邊：

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

sass會如你所願地將這些嵌套規則一一解開組合在一塊兒：

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 }複製代碼

在sass中，不只僅css規則能夠嵌套，對屬性進行嵌套也能夠減小不少重複性的工做。

2-4. 嵌套屬性;

在sass中，除了CSS選擇器，屬性也能夠進行嵌套。儘管編寫屬性涉及的重複不像編寫選擇器那麼糟糕，可是要反覆寫border-styleborder-widthborder-color以及border-*等也是很是煩人的。在sass中，你只需敲寫一遍border：

nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}複製代碼

嵌套屬性的規則是這樣的：把屬性名從中劃線-的地方斷開，在根屬性後邊添加一個冒號:，緊跟一個{ }塊，把子屬性部分寫在這個{ }塊中。就像css選擇器嵌套同樣，sass會把你的子屬性一一解開，把根屬性和子屬性部分經過中劃線-鏈接起來，最後生成的效果與你手動一遍遍寫的css樣式同樣：

nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}複製代碼

對於屬性的縮寫形式，你甚至能夠像下邊這樣來嵌套，指明例外規則：

nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}複製代碼

這比下邊這種同等樣式的寫法要好：

nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}複製代碼

屬性和選擇器嵌套是很是偉大的特性，由於它們不只大大減小了你的編寫量，並且經過視覺上的縮進使你編寫的樣式結構更加清晰，更易於閱讀和開發。

即使如此，隨着你的樣式表變得愈來愈大，這種寫法也很難保持結構清晰。有時，處理這種大量樣式的惟一方法就是把它們分拆到多個文件中。sass經過對css原有@import規則的改進直接支持了這一特性。

3. 導入SASS文件;

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的@import來處理多個sass文件。首先，咱們將學習編寫那些被導入的sass文件，由於在一個大型sass項目中，這樣的文件是你最常編寫的那一類。接着，瞭解集中導入sass文件的方法，使你的樣式可重用性更高，包括聲明可自定義的變量值，以及在某一個選擇器範圍內導入sass文件。最後，介紹如何在sass中使用css原生的@import命令。

一般，有些sass文件用於導入，你並不但願爲每一個這樣的文件單獨地生成一個css文件。對此，sass用一個特殊的約定來解決。

當經過@import把sass樣式分散到多個文件時，你一般只想生成少數幾個css文件。那些專門爲@import命令而編寫的sass文件，並不須要生成對應的獨立css文件，這樣的sass文件稱爲局部文件。對此，sass有一個特殊的約定來命名這些文件。

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

局部文件能夠被多個不一樣的文件引用。當一些樣式須要在多個頁面甚至多個項目中使用時，這很是有用。在這種狀況下，有時須要在你的樣式表中對導入的樣式稍做修改，sass有一個功能恰好能夠解決這個問題，即默認變量值。

3-2. 默認變量值;

通常狀況下，你反覆聲明一個變量，只有最後一處聲明有效且它會覆蓋前邊的值。舉例說明：

$link-color: blue;
$link-color: red;
a {
color: $link-color;
}複製代碼

在上邊的例子中，超連接的color會被設置爲red。這可能並非你想要的結果，假如你寫了一個可被他人經過@import導入的sass庫文件，你可能但願導入者能夠定製修改sass庫文件中的某些值。使用sass的!default標籤能夠實現這個目的。它很像css屬性中!important標籤的對立面，不一樣的是!default用於變量，含義是：若是這個變量被聲明賦值了，那就用它聲明的值，不然就用這個默認值。

$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}複製代碼

在上例中，若是用戶在導入你的sass局部文件以前聲明瞭一個$fancybox-width變量，那麼你的局部文件中對$fancybox-width賦值400px的操做就無效。若是用戶沒有作這樣的聲明，則$fancybox-width將默認爲400px。

接下來咱們將學習嵌套導入，它容許只在某一個選擇器的範圍內導入sass局部文件。

3-3. 嵌套導入;

跟原生的css不一樣，sass容許@import命令寫在css規則內。這種導入方式下，生成對應的css文件時，局部文件會被直接插入到css規則內導入它的地方。舉例說明，有一個名爲_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;
  }
}複製代碼

被導入的局部文件中定義的全部變量和混合器，也會在這個規則範圍內生效。這些變量和混合器不會全局有效，這樣咱們就能夠經過嵌套導入只對站點中某一特定區域運用某種顏色主題或其餘經過變量配置的樣式。

有時，可用css原生的@import機制，在瀏覽器中下載必需的css文件。sass也提供了幾種方法來達成這種需求。

3-4. 原生的CSS導入;

因爲sass兼容原生的css，因此它也支持原生的CSS@import。儘管一般在sass中使用@import時，sass會嘗試找到對應的sass文件並導入進來，但在下列三種狀況下會生成原生的CSS@import，儘管這會形成瀏覽器解析css時的額外下載：

• 被導入文件的名字以.css結尾；
• 被導入文件的名字是一個URL地址（好比http://www.sass.hk/css/css.css），由此可用谷歌字體API提供的相應服務；
• 被導入文件的名字是CSS的url()值。

這就是說，你不能用sass的@import直接導入一個原始的css文件，由於sass會認爲你想用css原生的@import。可是，由於sass的語法徹底兼容css，因此你能夠把原始的css文件更名爲.scss後綴，便可直接導入了。

文件導入是保證sass的代碼可維護性和可讀性的重要一環。次之但亦很是重要的就是註釋了。註釋能夠幫助樣式做者記錄寫sass的過程當中的想法。在原生的css中，註釋對於其餘人是直接可見的，但sass提供了一種方式可在生成的css文件中按需抹掉相應的註釋。

5. 混合器;

若是你的整個網站中有幾處小小的樣式相似（例如一致的顏色和字體），那麼使用變量來統一處理這種狀況是很是不錯的選擇。可是當你的樣式變得愈來愈複雜，你須要大段大段的重用樣式的代碼，獨立的變量就沒辦法應付這種狀況了。你能夠經過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;
}

//sass最終生成：複製代碼

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

在.notice中的屬性border-radius-moz-border-radius和-webkit-border-radius所有來自rounded-corners這個混合器。這一節將介紹使用混合器來避免重複。經過使用參數，你可使用混合器把你樣式中的通用樣式抽離出來，而後輕鬆地在其餘地方重用。實際上，混合器太好用了，一不當心你可能會過分使用。大量的重用可能會致使生成的樣式表過大，致使加載緩慢。因此，首先咱們將討論混合器的使用場景，避免濫用。

5-2. 混合器中的CSS規則;

混合器中不只能夠包含屬性，也能夠包含css規則，包含選擇器和選擇器中的屬性，以下代碼:

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

當一個包含css規則的混合器經過@include包含在一個父規則中時，在混合器中的規則最終會生成父規則中的嵌套規則。舉個例子，看看下邊的sass代碼，這個例子中使用了no-bullets這個混合器：

ul.plain {
  color: #444;
  @include no-bullets;
}複製代碼

sass的@include指令會將引入混合器的那行代碼替換成混合器裏邊的內容。最終，上邊的例子以下代碼:

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

混合器中的規則甚至可使用sass的父選擇器標識符&。使用起來跟不用混合器時同樣，sass解開嵌套規則時，用父規則中的選擇器替代&。

若是一個混合器只包含css規則，不包含屬性，那麼這個混合器就能夠在文檔的頂部調用，寫在全部的css規則以外。若是你只是爲本身寫一些混合器，這並無什麼大的用途，可是當你使用一個相似於Compass的庫時，你會發現，這是提供樣式的好方法，緣由在於你能夠選擇是否使用這些樣式。

接下來你將學習如何經過給混合器傳參數來讓混合器變得更加靈活和可重用。

5-3. 給混合器傳參;

混合器並不必定總得生成相同的樣式。能夠經過在@include混合器時給混合器傳參，來定製混合器生成的精確樣式。當@include混合器時，參數其實就是能夠賦值給css屬性值的變量。若是你寫過JavaScript，這種方式跟JavaScript的function很像：

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

當混合器被@include時，你能夠把它看成一個css函數來傳參。若是你像下邊這樣寫：

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

//Sass最終生成的是：

a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }複製代碼

當你@include混合器時，有時候可能會很難區分每一個參數是什麼意思，參數之間是一個什麼樣的順序。爲了解決這個問題，sass容許經過語法$name: value的形式指定每一個參數的值。這種形式的傳參，參數順序就沒必要再在意了，只須要保證沒有漏掉參數便可：

a {
    @include link-colors(
      $normal: blue,
      $visited: green,
      $hover: red
  );
}複製代碼

儘管給混合器加參數來實現定製很好，可是有時有些參數咱們沒有定製的須要，這時候也須要賦值一個變量就變成很痛苦的事情了。因此sass容許混合器聲明時給參數賦默認值。

5-4. 默認參數值;

爲了在@include混合器時沒必要傳入全部的參數，咱們能夠給參數指定一個默認值。參數默認值使用$name: default-value的聲明形式，默認值能夠是任何有效的css屬性值，甚至是其餘參數的引用，以下代碼：

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

若是像下邊這樣調用：@include link-colors(red) $hover和$visited也會被自動賦值爲red。

混合器只是sass樣式重用特性中的一個。咱們已經瞭解到混合器主要用於樣式展現層的重用，若是你想重用語義化的類呢？這就涉及sass的另外一個重要的重用特性：選擇器繼承。

6. 使用選擇器繼承來精簡CSS;

使用sass的時候，最後一個減小重複的主要特性就是選擇器繼承。基於Nicole Sullivan面向對象的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;
}複製代碼

如上所示，在class="seriousError"的html元素內的超連接也會變成紅色和粗體。

本節將介紹與混合器相比，哪一種狀況下更適合用繼承。接下來在探索繼承的工做細節以前，咱們先了解一下繼承的高級用法。最後，咱們將看看使用繼承可