### Sass
1. 提升CSS識別度,減少CSS代碼編寫量,提高CSS開發效率
### 變量聲明
1. $語法開頭:$custom-red:red $custom-yellow:yellow
2. 變量全局聲明、變量局部聲明
3. 變量聲明時也可以引用其它變量:$custom-color:$custom-red
### 變量引用
1. css屬性值直接使用變量名
### & 符號
1. &符號是引用的父級選擇器,&符號前后都可以使用選擇器
### 導入SCSS樣式文件
1. @import 'custom.scss' || @import 'custom',后綴可以省略
2. @import '_custom.scss' 當文件名以下劃線開頭時,不會生成同名CSS文件
3. @import 'origin.css' 導入原生CSS時,可以將文件名改為.scss結尾的文件
4. @import 'http://geoglo.css' 導入鏈接地址
### 靜默注釋
1. //這是注釋,這類注釋SCSS在生成CSS的時候不會被包進入文件
2. /*這是注釋*/,這類注釋SCSS在生成CSS的時候會被包進入文件
### 混合/插入
1. @mixin custom { color: red; border: 1px solid skyblue }
2. @include .class { @include custom }
3. 混合中也可以使用& 標簽形式的語法
@mixin custom { &:hover { color: gray } color: red; border: 1px solid skyblue }
4. 混合器傳參并給定默認值
@mixin link-colors($normal, $hover, $visited: orange) {
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
### 繼承
1. @extend 可類繼承、可標簽繼承 .custom { @extend .class; }
### 函數
1. @function grid-width($n) {
@return $n * $grid-width + ($n - 1) * $gutter-width;
}
### 運算符
1. 加減乘除