Scss

Sass有兩種 sass和scss。兩者差別比較小，SCSS是在CSS3的基礎上作拓展，而SASS是一種簡化格式，用縮進代替{}，用換行代替分號等，這裏統一使用scss。

特色：

• 徹底兼容CSS3；
• 在CSS基礎上增長變量、嵌套、混合等功能；
• 有函數進行運算

嵌套

Sass容許CSS裏進行嵌套，內層樣式將他的外層的選擇器做爲父選擇器；

在內層中可使用&來代替嵌套規則外的父選擇器。多層嵌套時，最外層的父選擇器會一步一步往下傳遞；

&後也能夠接其餘字符生成符合的選擇器；

某些 CSS 屬性遵循相同的命名空間 (namespace)，好比 font-family, font-size, font-weight 都以 font 做爲屬性的命名空間。

如：

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}
編譯爲：
.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; }複製代碼

變量$

能夠像js裏同樣定義變量，而後在屬性裏使用。

如：$width；5px;
使用：
#main{
    width:$width;
}複製代碼

其餘

Scss裏支持算法運算，()等

@-Rules 和 指令

sass支持全部的CSS3的@功能。

@import 導入

Sass拓展了CS是的@ipmort功能，被導入的文件中包含的變量和指定均可以在導入的文件中使用。

一般 @import會尋找並導入scss文件，但在如下狀況下，@import僅做爲普通的CSS語句，不會導入Sass。

• 文件類型爲css
• 以http://開頭；
• 以url();
• @import中包含media queries；

若須要導入scss文件，但又不但願將其編譯爲css，能夠在文件名前加下劃線，可是在導入語句中卻不須要加下劃線。ps：不能同時存在_A.scss和A.scss這樣的同名文件，存在時_A將被忽略

@media

與CSS相似，這裏只是容許其在CSS規則中嵌套。

@extend

若一個元素的樣式與另外一個的徹底同樣，可是又新增了額外樣式，這樣就可使用extend。

能夠容許一個元素繼承多個元素的樣式，同名的樣式，後面的覆蓋前面的；

@mixin

與extend相似，都是一種簡化代碼，重複使用的指令。

@mixin 定義一段樣式，@include則能夠引用@mixin定義的樣式。

//定義 $color 爲參數,:green爲參數默認值，當沒有參數的時候改設置生效，其餘的與下文的函數指令同樣
@mixin btn($color:green){
    color:$color;
    font-size:20px;
}
//使用
.page{
    @include btn(blue);
}
複製代碼

與extend相似，也能夠屢次引用mixin。

mixin裏能夠帶參數，而extend不行。

函數指令

Sass 支持自定義函數。

@function grid-width($n：1) { //@function 修飾變量，證實這是一個方法；若調用時沒有入參，則使用默認值
  @return $n*5+'px';  //@return 修飾返回值
}

#sidebar { width: grid-width(5); } //使用函數
#sidebar { width: grid-width($n：5); } //和上面的效果徹底同樣，下面的使用關鍵字參數，只要參數名同樣，不管順序如何都能對應上。複製代碼

其餘指令

略