scss編譯

SASS？
SASS是一種CSS的開發工具，提供了許多便利的寫法，大大節省了設計者的時間，使得CSS的開發，變得簡單和可維護。

sass有兩種後綴名文件：

• sass（不使用大括號和分號）---不建議使用
• scss（使用大括號和分號）----廣泛使用
  

導入：

@import "reset.css";

 sass有兩種註釋方式：

•  標準的css註釋方式
• //雙斜杆形式的單行註釋（單行註釋不會被轉譯出來。）

 

SASS提供四個編譯風格的選項：

　　* nested：嵌套縮進的css代碼，它是默認值。

　　* expanded：沒有縮進的、擴展的css代碼。

　　* compact：簡潔格式的css代碼。

　　* compressed：壓縮後的css代碼。

scss---->

1. 變量必須是$開頭

2. !default-----默認值

默認變量通常是用來設置默認值，而後根據需求來覆蓋的，覆蓋的方式也很簡單，只須要在默認變量以前從新聲明下變量便可
特殊變量通常咱們定義的變量都爲屬性值，可直接使用，可是若是變量做爲屬性或在某些特殊狀況下等則必需要以#{$variables}形式使用。

多值變量
list類型（經過空格，逗號或小括號分隔多個值，可用nth($var,$index)取值）

map類型（以key和value成對出現，其中value又能夠是list）
簡單來講list類型有點像js中的數組，而map類型有點像js中的對象。

SCSS容許在代碼中使用算式：

body {
　　　　margin: (14px/2);
　　　　top: 50px + 100px;
　　　　right: $var * 10%;
　　}

 條件語句:

 

p {
　　　　@if 1 + 1 == 2 { border: 1px solid; }
　　　　@if 5 < 3 { border: 2px dotted; }
　　}

 

循環語句:
1. @for $var from <start> through <end>

2. @for $var from <start> to <end>。

PS：   $i（變量），start（起始值），end（結束值）

@for $i from 1 to 10 {
　　　　.border-#{$i} {
　　　　　　border: #{$i}px solid blue;
　　　　}
　　}