注意：變數可以在css規則塊定義之外存在。如下例子：
$n**-color: #f90;n**
//編譯後
n**
$n**-color這個變數定義在了規則塊外邊，所以在這個樣式表中都可以像n**規則塊那樣引用它。
$width這個變數定義在了n**的規則塊內，所以它只能在n**規則塊 內使用。這意味著是你可以在樣式表的其他地方定義和使用
$width變數，不會對這裡造成影響。
變數引用：css生成時，變數會被他們的值替代，以後只需要改變這個變數的值，所有引用變數的地方的值都會改變。
$highlight-color: #f90;.selected
//編譯後
.selected
變數名用中劃線還是下劃線：這兩種用法相互相容，沒有區別。用中劃線宣告的變數可以使用下劃線的方式引用，反之亦然。
如果變數需要鑲嵌在字串之中，就必須需要寫在#{}之中。
$left: left;div:40px;
}
body
父選擇器的識別符號：&
sass使用後代選擇器的方式生成這種連線（父選擇器 空格 子選擇器）。使用:hover偽類時這種後代選擇器連線不起作用，所以需要用到&。看完以下例子就明白了.
1article a 4}
56//編譯後如下78
article a
11article a :hover
問題： 第11行** a後面多了空格，所以color:red是不起作用的
當包含父選擇器識別符號的巢狀規則被開啟時，它不會像後代選擇器那樣進行拼接，而是&被父選擇器直接替換：
article a}//編譯後
article a
article a:hover
群組選擇器的巢狀：減少工作量，但是會降低**速度
.container}//編譯後
.container h1, .container h2, .container h3
子組合選擇器和同層組合選擇器：>、+和~;
// 選擇article下的所有命中section選擇器的元素article section
// 子組合選擇器》選擇乙個元素的直接子元素
article > section
// 同層相鄰組合選擇器+選擇header元素後緊跟的p元素header + p
//同層全體組合選擇器~，選擇所有跟在article後的同層article元素，不管它們之間隔了多少其他元素
article ~ article
article> section
dl >
dd } n** + &
}//編譯後
article ~ article
article > section
article dl > dt
article dl > dd
n** + article
巢狀屬性：以border為例:
//border後面必須加上冒號:n**
}//編譯後
n**
border縮寫形式:
n**}//編譯後
n**
標準的css注釋 /* comment */ ，會保留到編譯後的css檔案。
單行注釋 // comment，只保留在sass原始檔中，編譯後被省略。
在/*後面加乙個感嘆號，表示這是"重要注釋"。即使是壓縮模式編譯，也會保留這行注釋，通常可以用於宣告版權資訊。
/*!重要注釋！
*/
Sass 變數預設 default
如果分配給變數的值後面新增了 default 標誌 這意味著該變數如果已經賦值，那麼它不會被重新賦值，但是，如果它尚未賦值，那麼它會被賦予新的給定值。如果在此之前變數已經賦值，那就不使用預設值，如果沒有賦值，則使用預設值。如果變數之前沒有賦值，則使用預設值 如果之前沒有賦值,則使用預設值 const...
sass mysql 總結Sass 變數
sass 英文全稱 syntactically awesome stylesheets 是乙個最初由 hampton catlin 設計並由 natalie weizenbaum 開發的層疊樣式表語言。變數用於儲存一些資訊，它可以重複使用。sass 變數可以儲存以下資訊 字串數字 顏色值布林值 列表...
sass高階 變數運算
變數操作 兩個變數之間的運算子需要用空格隔開，否則會報錯。width1 50px width2 100px body 連字符號中間使用帶空格的加號效果不變 a hover 注意 說明運算時sass只關注運算子前後兩個用空格隔開的值，其餘的都不管原樣輸出 層級關係 雙引號權重最大，沒有引號其次，單引號...