>[info]整理自 [Sass 中文網](https://www.sass.hk/docs/) [TOC] # 1.嵌套規則（Nestd Rules） Sass 允許將一套 CSS 樣式嵌套進另一套樣式中，內層的樣式將它外層的選擇器作為父選擇器 ```css #main p { color: #00ff00; width: 97%; .redbox { background-color: #ff0000; color: #000000; } } ``` 編譯為 ```css #main p { color: #00ff00; width: 97%; } #main p .redbox { background-color: #ff0000; color: #000000; } ``` # 2.父選擇器（Referencing Parent Selectors） `&` 代表嵌套規則外層的父選擇器，`&` 必須作為選擇器的第一個字符，其后可以跟隨后綴生成復合的選擇器如 `&- ` `&:` `&::`等 # 3.定義變量 變量以美元符號`$`開頭，賦值方式與 CSS 屬性的寫法一樣。 變量作用域：變量支持塊級作用域，嵌套規則內定義的變量只能在嵌套規則使用（局部變量），不在嵌套規則內定義的變量則可以在任何地方使用（全局變量）。將局部變量轉換為全局變量可以添加 `!global` 聲明 ```css #main { $width: 5em !global; width: $width; } #sidebar { width: $width; } ``` 編譯為 ```css #main { width: 5em; } #sidebar { width: 5em; } ``` # 4.數據類型（Data Types） SassScript 支持 6 種主要的數據類型： 1)數字：`1, 2, 13, 10px` 2)字符串：有引號字符串與無引號字符串，`"foo", 'bar', baz` 3)顏色：`blue, #04a3f9, rgba(255,0,0,0.5)` 4)布爾型：`true, false` 5)空值：`null` 6)數組 (list)，用空格或逗號作分隔符：`1.5em 1em 0 2em, Helvetica, Arial, sans-serif maps` SassScript 也支持其他 CSS 屬性值，比如 Unicode 字符集，或?`!important`?聲明。然而 Sass 不會特殊對待這些屬性值，一律視為無引號字符串。 ## 字符串（String） SassScript 支持 CSS 的兩種字符串類型：有引號字符串 (quoted strings)，如` "Lucida Grande"'http://sass-lang.com'；`與無引號字符串 (unquoted strings)，如 `sans-serif bold`，在編譯 CSS 文件時不會改變其類型。只有一種情況例外，使用 `#{}` (interpolation) 時，有引號字符串將被編譯為無引號字符串，這樣便于在 mixin 中引用選擇器名： ```css @mixin firefox-message($selector) { body.firefox #{$selector}:before { content: "Hi, Firefox users!"; } } @include firefox-message(".header"); ``` 編譯為 ```css body.firefox .header:before { content: "Hi, Firefox users!"; } ``` ## 數組（Lists） 數組 (lists) 指 Sass 如何處理 CSS 中`margin: 10px 15px 0 0`或者`font-face: Helvetica, Arial, sans-serif`這樣通過空格或者逗號分隔的一系列的值。事實上，獨立的值也被視為數組 —— 只包含一個值的數組。 - `nth`函數可以直接訪問數組中的某一項； - `join`函數可以將多個數組連接在一起； - `append`函數可以在數組中添加新值； - `@each`指令能夠遍歷數組中的每一項。 數組中可以包含子數組，比如`1px 2px, 5px 6px`是包含`1px 2px`與`5px 6px`兩個數組的數組。如果內外兩層數組使用相同的分隔方式，需要用圓括號包裹內層，所以也可以寫成`(1px 2px) (5px 6px)`。變化是：之前的`1px 2px, 5px 6px`使用逗號分割了兩個子數組 (comma-separated)，而`(1px 2px) (5px 6px)`則使用空格分割(space-separated)。 當數組被編譯為 CSS 時，Sass 不會添加任何圓括號（CSS 中沒有這種寫法），所以`(1px 2px) (5px 6px)`與`1px 2px, 5px 6px`在編譯后的 CSS 文件中是完全一樣的，但是它們在 Sass 文件中卻有不同的意義，前者是包含兩個數組的數組，而后者是包含四個值的數組。 ## Maps [https://www.cnblogs.com/whqet/p/Sassmap.html](https://www.cnblogs.com/whqet/p/Sassmap.html) # 5.運算（Operations） 所有數據類型均支持相等運算`==`或`!=`，此外，每種數據類型也有其各自支持的運算方式。 ## 數字運算 SassScript 支持數字的加減乘除、取整等運算 (`+, -, *, /, %`)，如果必要會在不同單位間轉換值。 ```css p { width: 1in + 8pt; } ``` 編譯為 ```css p { width: 1.111in; } ``` 以下三種情況/將被視為除法運算符號： * 如果值，或值的一部分，是變量或者函數的返回值 * 如果值被圓括號包裹 * 如果值是算數表達式的一部分 ``` css p { font: 10px/8px; // Plain CSS, no division $width: 1000px; width: $width/2; // Uses a variable, does division width: round(1.5)/2; // Uses a function, does division height: (500px/2); // Uses parentheses, does division margin-left: 5px + 8px/2px; // Uses +, does division } ``` 編譯為 ```css p { font: 10px/8px; width: 500px; height: 250px; margin-left: 9px; } ``` ## 顏色值運算 ## 字符串運算 ## 布爾運算 ## 圓括號 # 6.函數（Functions） Sass 支持自定義函數，并能在任何屬性值或 Sass script 中使用： ```css $grid-width: 40px; $gutter-width: 10px; @function grid-width($n) { @return $n * $grid-width + ($n - 1) * $gutter-width; } #sidebar { width: grid-width(5); } ``` 編譯為 ```css #sidebar { width: 240px; } ``` 與 mixin 相同，也可以傳遞若干個全局變量給函數作為參數。一個函數可以含有多條語句，需要調用 @return 輸出結果。 自定義的函數也可以使用關鍵詞參數，上面的例子還可以這樣寫： `#sidebar { width: grid-width($n: 5); }` 建議在自定義函數前添加前綴避免命名沖突，其他人閱讀代碼時也會知道這不是 Sass 或者 CSS 的自帶功能。 # 7.插值語句（Interpolation:#{}） # 8.@-Rules ## @import Sass 拓展了`@import`的功能，允許其導入 SCSS 或 Sass 文件。被導入的文件將合并編譯到同一個 CSS 文件中，另外，被導入的文件中所包含的變量或者混合指令 (mixin) 都可以在導入的文件中使用。 通常，@import 尋找 Sass 文件并將其導入，但在以下情況下，@import 僅作為普通的 CSS 語句，不會導入任何 Sass 文件。 * 文件拓展名是 `.css` * 文件名以 `http://` 開頭 * 文件名是 `url()` * `@import` 包含 `media queries` 如果不在上述情況內，文件的拓展名是 .scss 或 .sass，則導入成功。沒有指定拓展名，Sass 將會試著尋找文件名相同，拓展名為 .scss 或 .sass 的文件并將其導入。 ## @extend 在設計網頁的時候常常遇到這種情況：一個元素使用的樣式與另一個元素完全相同，但又添加了額外的樣式。通常會在 HTML 中給元素定義兩個 class，一個通用樣式，一個特殊樣式。假設現在要設計一個普通錯誤樣式與一個嚴重錯誤樣式，一般會這樣寫： ```css .error { border: 1px #f00; background-color: #fdd; } .seriousError { @extend .error; border-width: 3px; } ``` 上面代碼的意思是將`.error`下的所有樣式繼承給`.seriousError`，`border-width: 3px;`是單獨給`.seriousError`設定特殊樣式，這樣，使用`.seriousError`的地方可以不再使用`.error`。 其他使用到`.error`的樣式也會同樣繼承給`.seriousError`，例如，另一個樣式`.error.intrusion`使用了`hacked.png`做背景，`<div class="seriousError intrusion">`也同樣會使用`hacked.png`背景。 ## @mixin 與 @include 使用`@include`指令引用混合樣式，格式是在其后添加混合名稱，以及需要的參數（可選）： ```css .page-title { @include large-text; padding: 4px; margin-top: 10px; } ``` 編譯為 ```css .page-title { font-family: Arial; font-size: 20px; font-weight: bold; color: #ff0000; padding: 4px; margin-top: 10px; } ``` 也可以在最外層引用混合樣式，不會直接定義屬性，也不可以使用父選擇器。 混合樣式中也可以包含其他混合樣式 混合樣式中應該只定義后代選擇器，這樣可以安全的導入到文件的任何位置 # 9.參數（Arguments）