SCSS

scss

• &: 父選擇器

• $: 聲明變量 $themo_color: #ff0000;

• 數據類型： 數字、字符串、顏色、布爾值、空值、數組(用空格或逗號做分隔符)、maps (key1: value1, key2: value2)

• 運算類型： 數字運算（+ - * / %） 關係運算（> < >= <=）布爾運算（and or not）

• 函數：color: hsl(saturation: 100%, $lightness: 50%); 可傳參

• #{}：插值語句，在選擇器或屬性名中使用變量， 例 #{$attr}-color: blue;

• @import 注意：scss文件包含媒體查詢時僅作css語句引入

  @import "rounded-corners", "text-shadow"; 導入多個文件

• 文件名前添加下劃線時不編譯這些文件，但導入語句中卻不須要添加下劃線。

• @media: 媒體查詢

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}
編譯爲：
.sidebar {
    width: 300px; 
}
 @media screen and (orientation: landscape) {
    .sidebar {
       width: 500px; 
    }
 }
複製代碼

• @extend: 樣式繼承

繼承樣式類： @extend .error;

• @extend-Only（%選擇器）：當它們單獨使用時，不會被編譯到 CSS 文件中。

使用
#context %extreme {
  color: blue;
}
.notice {
  @extend %extreme;
}
編譯
#context .notice {
  color: blue;
}
複製代碼

！特別提醒: 在製做 Sass 樣式庫的時候使用，Sass 可以忽略用不到的樣式。

• @mixin: 混合指令

//定義
@mixin large-text($size,$color: #333){ //參數能夠設置默認值
  font: {
    family: Arial;
    size: $size;
    weight: bold;
  }
  color: $color;
}
//引用
@include large-text(20px, #fba);
@include large-text($size: 20px, $color: #fba); //關鍵詞參數，相似js對象
複製代碼

• @function: 函數指令

$grid-width: 40px;
$gutter-width: 10px;
//定義
@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}
//引用
#sidebar { width: grid-width(5); }
複製代碼