Sass

「CSS 預處理器用一種專門的編程語言，進行 Web 頁面樣式設計，而後再編譯成正常的 CSS 文件，以供項目使用。CSS 預處理器爲 CSS 增長一些編程的特性，無需考慮瀏覽器的兼容性問題。在衆多優秀的 CSS 預處理器語言中屬Sass、LESS和Stylus最優秀.

Sass 和 SCSS 實際上是同一種東西，咱們平時都稱之爲 Sass，二者之間不一樣之處有如下兩點：

1.文件擴展名不一樣，Sass 是以「.sass」後綴爲擴展名，而 SCSS 是以「.scss」後綴爲擴展名

2.語法書寫方式不一樣，Sass 是以嚴格的縮進式語法規則來書寫，不帶大括號({})和分號(;)，而 SCSS 的語法書寫和咱們的 CSS 語法書寫方式很是相似

SCSS 和 CSS 寫法無差異，這也是 Sass 後來愈來愈受大衆喜歡緣由之一。簡單點說，把你現有的「.css」文件直接修改爲「.scss」便可使用。

變量聲明

Sass 中 用 $符號聲明變量,如：
$width：100px;
使用變量，如：

div{
width:$width;
}

 

默認變量

sass 的默認變量僅須要在值後面加上 !default 便可。

$baseLineHeight:1.5 !default;

body{

    line-height: $baseLineHeight;

}

 

編譯後的css代碼：

body{

    line-height:1.5;

}

 

sass 的默認變量通常是用來設置默認值，而後根據需求來覆蓋的，覆蓋方式也很簡單，只須要在默認變量以前從新聲明下變量便可。 

$baseLineHeight: 2;

$baseLineHeight: 1.5 !default;

body{

    line-height: $baseLineHeight;

}

 

編譯後的css代碼：

body{

    line-height:2;

}

 

能夠看出如今編譯後的 line-height 爲 2，而不是咱們默認的 1.5。默認變量的價值在進行組件化開發的時候會很是有用。

Sass 的嵌套分爲三種：

• 選擇器嵌套
• 屬性嵌套
• 僞類嵌套

 

[Sass]嵌套-選擇器嵌套

 Sass 中，就可使用選擇器的嵌套來實現：

nav {

  a {

    color: red;

    header & {

      color:green;

    }

  } 

}

 

編譯爲相應的CSS：

nav a {

  color:red;

}

 

header nav a {

  color:green;

}

 

 

Sass 屬性嵌套

CSS 有一些屬性前綴相同，只是後綴不同，好比：border-top/border-right，與這個相似的還有 margin、padding、font 等屬性。

在 Sass 中咱們能夠這樣寫：

.box {

  border: {

   top: 1px solid red;

   bottom: 1px solid green;

  }

}

編譯後相應的CSS爲：

.box {

    border-top: 1px solid red;

    border-bottom: 1px solid green;

}

 

[Sass]嵌套-僞類嵌套

其實僞類嵌套和屬性嵌套很是相似，只不過他須要藉助`&`符號一塊兒配合使用

例如：.

.box{

        &:before{             

/*僞類嵌套與屬性嵌套的區別在與，這裏必須加&，不能省略*/

         content:"僞元素嵌套";

  }

}

 

相應的CSS代碼以下：

.box:before{

    content:"僞元素嵌套";

}