Sass學習

1st 介紹及安裝使用：

Sass（Syntactically Awesome StyleSheets）

Sass與Less同樣，也是CSS預處理器，有着變量（variables），嵌套（Nested rules），混合（mixins）等功能。使用如Compass的樣式庫有助於更好的組織管理文件，以及高效開發項目！

語法格式：

有兩種寫法：1.SCSS（sassy css），這種只是在css語法基礎上進行擴展，以.scss格式結尾；2.縮進格式（indented sass），一般稱做「sass」。使用的是ruby語法，縮進代替花括號，換行代替分號。這種格式以.sass結尾。（ruby，日本人發明的，前些年與python齊名，世界上不少網站是用ruby寫的，如早期的Twitter。可是國內環境不是很好，原先我也沒怎麼接觸過這麼語言。）

推薦SCSS寫法！與css無痕過渡！

使用Sass：

三種方法使用Sass：做爲命令行工具；做爲獨立的Ruby模塊（module）；做爲Rack-enabled框架的插件（如ruby on rails與Merb）。可是不管哪一種方式都須要先安裝Sass gem！

windows系統須要先安裝ruby,點擊連接跳轉。蘋果默認已經安裝了，Windows系統-----╮(╯▽╰)╭

安裝命令：gem install sass

命令行語法可經過sass --help進行查看！

運行sass編譯文件：

sass test.scss test.css

監視單個sass文件，每次修改保存時自動編譯！

sass --watch test.scss:test.css

監視整個文件夾：

sass --watch app/scss:public/stylesheets

 

2nd 快速入門

2.1 變量（variable）：使用$符號標識（老版本用!標識）

示例example.scss：

$testColor:gold;
.test1{
    color:$testColor;
    $width:100px;    
    width: $width;
}

sass example.scss example.css編譯後：

.test1 {
  color: gold;
  width: 100px; }

/*# sourceMappingURL=example.css.map */

　　注意：1.$testColor變量定義在規則塊以外，$width定義在規則塊內部，只能在規則塊內部應用！　　2.變量定義要在變量使用以前（即$width:100px;在width:$width;前面；不然報錯，這與less不一樣）

2.2 嵌套規則（Nested Rules）

當咱們編寫以下css時：

.test1 p {
  border: 1px solid goldenrod; }
.test1 .test2 p {
  color: blue; }
.test1 .test2 .test3 h1 {
  background-color: gold; }

　　結構就顯的不是特別清晰了！

採用sass的嵌套規則，咱們能夠寫成：

.test1{
    p{
        border: 1px solid goldenrod;
    }
    .test2{
        p{
            color: blue;
        }
        .test3{
            h1{
                background-color: gold;
            }
        }
    }
}

　　可讀性加強，易於維護！

編譯後產生的css文件，效果是同樣的！

2.2.1 父選擇器的標識符&

嵌套在簡單的前景下一班可行，可是若是碰到:hover的僞類，就行不通了！這時候就須要用到&。

示例：

.test1{
    background-color: red;
    a{
        color: blue;
        :hover{
            color: goldenrod;
        }
    }
}

當編譯後，注意紅箭頭部分！

這時候.test1 a的全部子元素在被hover後會變色，這與hover在超連接上的獲得的效果不符合！

注意：這裏咱們能夠得出sass每次解開一個嵌套規則後，變化後：父元素+「空格」+子元素！！！

因此scss文件編寫：

 

 這時候運行結果：

.test1 {
  background-color: red; }
  .test1 a {
    color: blue; }
    .test1 a:hover {
      color: goldenrod; }

　　&：對父元素的引用！！！

2.2.2 羣組選擇器的嵌套：

示例：

.test2, .test3{
    h1,h2,h3{
        background-color: gold;
    }
    h4,h5,h6{
        background-color: blue;
    }
}

　編譯後：

.test2 h1, .test2 h2, .test2 h3, .test3 h1, .test3 h2, .test3 h3 {
  background-color: gold; }
.test2 h4, .test2 h5, .test2 h6, .test3 h4, .test3 h5, .test3 h6 {
  background-color: blue; }

　　.test2與h一、.test2與h二、 .test2與h3分別組合，而後組成一個羣組選擇器；後面組合規則相似。因此編譯生成了咱們看到的css文件！！！

相比傳統CSS，咱們能夠看出大大減小了代碼量；可是sass看起來文件很小，生成的css文件可能很大，可能對網站性能形成影響！

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

這些組合選擇器能夠放在外層選擇器後面，或者裏層選擇器前面。

示例：

.test4 {
    ~ .test5{border:solid;}
    > .test6{background-color: red;}
    dl >{
        dt{color:blue;}
        dd{color: orange;}
    }
    .test7 + & {margin-top: 5px;}
}

　　編譯後變爲：

.test4 ~ .test5 {
  border: solid; }
.test4 > .test6 {
  background-color: red; }
.test4 dl > dt {
  color: blue; }
.test4 dl > dd {
  color: orange; }
.test7 + .test4 {
  margin-top: 5px; }

2.2.4 還支持嵌套屬性

示例：

h1{
    border:{
        style:dashed;
        color: black;
    }
}

　　注意：border後面有個「:」號！

編譯後：

h1 {
  border-style: dashed;
  border-color: black; }

　　我的不建議這種寫法！！！

3rd 導入sass文件：使用sass的@import規則並不須要指定導入文件的後綴名。便可省略.sass或.scss後綴！

3.1 默認變量值：!important。變量申明瞭值，就用申明的值；沒有則用默認值！

$testHeight:100px;
div{
   width:$testHeight; 
}

3.2 嵌套導入 

若是一個_blue-theme.scss的局部文件：

.test10{
    width: 10px;
    height: 20px;
    border-color: blue;
}

example.scss文件：（@import能夠省略文件前面的'_'，也可省略後綴！）

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

編譯後example.css:

.test12 .test10 {
  width: 10px;
  height: 20px;
  border-color: blue; }

3.3 原生CSS導入：因爲sass兼容原生的css，因此也支持css@import。會出如今如下狀況：

1. 被導入的文件已.css結尾；
2. 被導入的文件的名字是css的url()值；

4th 靜默註釋：//開頭的註釋，不會出如今編譯後的css文件中；/**/註釋的內容會出如今編譯後的css文件中！

 

5th 混合器（mixins）：樣式能夠很好的被重用。

使用@mixin標識符定義；使用@include調用。

示例：

@mixin test100{
    border-style: solid;
    border-color: blue;
    border-width: 10px;
}
div{
    @include test100;
}

編譯後：

div {
  border-style: solid;
  border-color: blue;
  border-width: 10px; }

　5.1 給混合器傳參數

示例：

@mixin test100($x,$y,$z){
    border-style: $x;
    border-color: $y;
    border-width: $z;
}
div{
    @include test100(solid,blue,10px);
}

編譯後：

div {
  border-style: solid;
  border-color: blue;
  border-width: 10px; }

　　注意：參數能夠設置默認值；使用$name:defaule-value;的形式！

 

6th 選擇器繼承：使用@extend實現。

示例：

.a{
    color: blue;
    background-color: orange;
}
.b{
    @extend .a;
    font-size: 18px;
}

編譯後：

.a, .b {
  color: blue;
  background-color: orange; }

.b {
  font-size: 18px; }

　　即.b繼承了全部.a的樣式屬性！

同時.b不只會繼承.a自身的樣式，全部與.a有關的組合選擇器也會被.b以組合選擇器的形式繼承！

示例：

.a{
    color: blue;
    background-color: orange;
}
.a div{
    width: 100px;
}
div1.a{
    padding: 3px;
}
.b{
    @extend .a;
    font-size: 18px;
}

　　編譯後：

.a, .b {
  color: blue;
  background-color: orange; }

.a div, .b div {
  width: 100px; }

div1.a, div1.b {
  padding: 3px; }

.b {
  font-size: 18px; }

　　注意：1.繼承僅僅是重複選擇器，不會重複屬性；因此使用繼承每每比混合器生成的css體積更小！

　　2.不要在css規則中使用後代繼承器去繼承css規則。否則，生成css選擇器數量會很容易失控！

 

最後：

更多學習可參考：

Sass官網

Sass中文參考