### 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. 加減乘除