Sass

學(xué)習Sass為的是要緊跟技術(shù)流行趨勢，提高項目組織與維護。Sass中增加了規(guī)則、變量、繼承等特性。大大的提高了css的可編輯性與維護性。

• 首先我們最需要用的就是使用變量

sass最重要的一個特性就是它為css引入了變量，你可以反復(fù)的使用css屬性值
例如你的項目現(xiàn)在需要把主題色改一下，那么在沒有sass的時候你只能一個顏色一個顏色的改，現(xiàn)在你只需要把共同的顏色提取出來設(shè)為變量，當要修改主題色時你就只需要改一個變量值就可以搞定了。

//我們來說下怎么使用sass變量
//sass使用$符號來標識變量
$subject-color: #F90;
header{
  color:$subject-color;//頭部內(nèi)顏色就是#F90
}

• Sass中嵌套css規(guī)則

css中總是有很多父級選擇器，為了提高元素的優(yōu)先級，但是這樣確讓我們寫著一遍又一遍的重復(fù)ID和class。Sass很好的為我們解決了這一煩惱

//原css我們大概要這么寫
#content .content-top .subnav p{color:#333}
#content .content-top .subnav ul{margin-top:10px}
#content .content-top .subnav ul li{width:100px}
#content .content-top h2{padding:10px 0}
//Sass嵌套規(guī)則
#content{
  .content-top{
    .subnav{
      p{color:#333}
      ul{
        margin-top:10px;
        li{
          width:100px;
        }
      }  
    }
    h2{padding:10px 0}
  }
}

注意：css中有偽類選擇器，對于偽類選擇器我們可以用&來實現(xiàn)

article a {
  color: blue;
  &:hover { color: red }
}
//轉(zhuǎn)換成css
article a { color: blue }
article a:hover { color: red }

我們還經(jīng)常會寫一種多個選擇去使用一套相同的屬性樣式。例如

.main h1, .main h2, .main h3 { margin-bottom: 10px }
.main1 a, .main2 a, .main3 a,{color:#333}
//用Sass實現(xiàn)如下
.main {
  h1, h2, h3 {margin-bottom: 10px }
}
.main, .main2, main3{
  a{color:#333}
}

還有子元素、相鄰兄弟、父元素樣式嵌套

article ~ article { border-top: 1px dashed #ccc }
article > section { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }
//使用Sass實現(xiàn)如下
article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

Sass不僅可以嵌套元素還可以嵌套屬性

nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}
//border中包含了很多屬性，我們可以用Sass將屬性嵌套
nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}

• 如何導(dǎo)入Sass文件

css有一個特別不常用的特性，即@import規(guī)則。它允許在一個css文件中導(dǎo)入其他css文件。然而，后果是只有執(zhí)行到@import時，瀏覽器才會去下載其他css文件，這導(dǎo)致頁面加載起來特別慢。
但是和Sass中的@import不同，sass的@import規(guī)則在生成css文件時就把相關(guān)文件導(dǎo)入進來。這意味著所有相關(guān)的樣式被歸納到了同一個css文件中，而無需發(fā)起額外的下載請求。另外，所有在被導(dǎo)入文件中定義的變量和混合器均可在導(dǎo)入文件中使用。
當然sass兼容原生css也可以通過@import導(dǎo)入css文件。盡管這會造成瀏覽器解析css時的額外下載

@import "colors";//這條命令將把sidebar.scss文件中所有樣式添加到當前樣式表中

• 嵌套導(dǎo)入

sass允許@import命令寫在css規(guī)則內(nèi)

//這是a.sass
aside {
  background: blue;
  color: white;
}

//這是b.sass
.a-sass {@import "a"}
//等同如下
.a-sass {
  aside {
    background: blue;
    color: white;
  }
}

• 重點都在后面 混合器來了

前面說的都是和css相類似的，很多只是規(guī)則出現(xiàn)了不同，給編寫上提高了速度。但是我們都知道做一個成熟的項目會有很多復(fù)雜的大量的樣式來布局你的網(wǎng)站。
會有很多相似的樣式大量的重用樣式出現(xiàn)，獨立的變量已經(jīng)無法應(yīng)付這種情況了。

混合器使用@mixin標識符定義，很想css中@media或者@font-face這個標識符給一大段樣式賦予一個名字，這樣你就可以輕易地通過引用這個名字重用這段樣式。（通過@include引用定義的混合器）

@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
//通過 @include 引用混合器
notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

合理的運用混合器你會發(fā)現(xiàn)你的代碼會非常的易于維護，越寫代碼越簡單。同時你需要更加注意的是混合器命名的語義和去判斷該組屬性是否應(yīng)該組合成一個混合器

混合器中的css規(guī)則

混合器中不僅可以包含屬性，也可以包含css規(guī)則，包含選擇器和選擇器中的屬性

@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;
}
//生成的css是這樣的
ul.plain {
  color: #444;
  list-style: none;
}
ul.plain li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}

給混合器傳參

混合器并不一定總得生成相同的樣式?？梢酝ㄟ^在@include混合器時給混合器傳參，參數(shù)其實就是可以賦值給css屬性值的變量

@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}
//當混合器被@include時，你可以把它當作一個css函數(shù)來傳參。如果你像下邊這樣寫

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

//Sass最終生成的是：

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

注意 有時候可能會很難區(qū)分每個參數(shù)是什么意思，參數(shù)之間是一個什么樣的順序

//sass允許通過語法$name: value的形式指定每個參數(shù)的值
a {
    @include link-colors(
      $normal: blue,
      $visited: green,
      $hover: red
  );
}

我們還可以加入默認參數(shù)值

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

a{
  @include link-colors(red)
}
//Sass最終生成的是：

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

• 選擇器繼承

sass的主要目的是為了讓我們在寫css的時候能更加的精簡，有效，快速。選擇器的繼承是減少重復(fù)精簡css的重要方法?；贜icole Sullivan面向?qū)ο蟮腸ss的理念。選擇器繼承是說一個選擇器可以繼承為另一個選擇器定義的所有樣式。這個通過@extend語法實現(xiàn)，如下代碼

//通過選擇器繼承樣式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
//這個相當于<div class="error seriousError "></div>

什么時候使用繼承

混合器是解決樣式的重用，而繼承就屬于是解決類名的重用，當一個元素擁有的類（比如說.seriousError）表明它屬于另一個類（比如說.error），這時使用繼承再合適不過了。

繼承的高級用法

最常用的一種高級用法是繼承一個html元素的樣式。

//通過繼承a這一超鏈接元素來實現(xiàn)
.disabled {
  color: gray;
  @extend a;
}

<style lang="sass">
.foo .bar { @extend .baz; }
.bip .baz { a: b; }
</style>

<!-- 繼承可能迅速變復(fù)雜 -->
<!-- Case 1 -->
<div class="foo">
  <div class="bip">
    <div class="bar">...</div>
  </div>
</div>
<!-- Case 2 -->
<div class="bip">
  <div class="foo">
    <div class="bar">...</div>
  </div>
</div>
<!-- Case 3 -->
<div class="foo bip">
  <div class="bar">...</div>
</div>