樣式表結構

就像 CSS 一樣,大多數 Sass 樣式表主要由包含屬性宣告的樣式規則組成。但 Sass 樣式表還有許多其他功能可以與這些功能並存。

陳述式陳述式永久連結

Sass 樣式表由一系列的「陳述式」組成,這些陳述式會依序求值以建構最終的 CSS。某些陳述式可能具有使用 {} 定義的「區塊」,其中包含其他陳述式。例如,樣式規則是一個帶有區塊的陳述式。該區塊包含其他陳述式,例如屬性宣告。

在 SCSS 中,陳述式以分號分隔(如果陳述式使用區塊,則分號是可選的)。在縮排語法中,它們僅以換行符號分隔。

通用陳述式通用陳述式永久連結

這些類型的陳述式可以在 Sass 樣式表的任何位置使用。

  • 變數宣告,例如 $var: value
  • 流程控制 at-規則,例如 @if@each
  • @error@warn@debug 規則。

CSS 陳述式CSS 陳述式永久連結

這些語句會產生 CSS。它們可以在任何地方使用,除了在 @function 函式內部。

頂層語句頂層語句永久連結

這些語句只能在樣式表的頂層使用,或者嵌套在頂層的 CSS 語句內。

其他語句其他語句永久連結

  • width: 100px 這樣的屬性宣告只能在樣式規則和一些 CSS at-規則內使用。
  • @extend 規則只能在樣式規則內使用。

表達式表達式永久連結

表達式是指屬性或變數宣告右側的任何內容。每個表達式都會產生一個。任何有效的 CSS 屬性值也是一個 Sass 表達式,但 Sass 表達式比普通的 CSS 值更強大。它們會作為參數傳遞給 mixins函式,用於 @if 規則 的控制流程,並使用 算術 進行操作。我們稱 Sass 的表達式語法為 SassScript

字面量字面量永久連結

最簡單的表達式只表示靜態值。

  • 數字,可能帶有單位,也可能不帶單位,例如 12100px
  • 字串,可能帶有引號,也可能不帶引號,例如 "Helvetica Neue"bold
  • 顏色,可以透過其十六進位表示法或名稱來引用,例如 #c6538cblue
  • 布林值 字面量 truefalse
  • 單例 null
  • 值清單,它們可以用空格或逗號分隔,並且可以放在方括號中或不放在括號中,例如 1.5em 1em 0 2emHelvetica, Arial, sans-serif[col1-start]
  • 將值與鍵關聯的映射,例如 ("background": red, "foreground": pink)

運算運算永久連結

Sass 定義了許多運算的語法。

  • ==!= 用於檢查兩個值是否相同。
  • +-*/% 對數字具有其通常的數學含義,對於單位的特殊行為與科學數學中單位的用法相匹配。
  • <<=>>= 檢查兩個數字是否大於或小於另一個數字。
  • andornot 具有常見的布林行為。除了 falsenull 之外,Sass 將所有值視為「true」。
  • +-/ 可用於字串串接。
  • () 可用於明確控制運算的優先順序。

其他表達式其他表達式永久連結

  • 變數,例如 $var
  • 函式呼叫,例如 nth($list, 1)var(--main-bg-color),可以呼叫 Sass 核心函式庫函式或使用者定義的函式,或者可以直接編譯成CSS
  • 特殊函式,例如 calc(1px + 100%)url(http://myapp.com/assets/logo.png),它們有自己獨特的解析規則。
  • 父選擇器&
  • !important,它被解析為未加引號的字串。