樣式表結構
就像 CSS 一樣,大多數 Sass 樣式表主要由包含屬性宣告的樣式規則組成。但 Sass 樣式表還有許多其他功能可以與這些功能並存。
陳述式陳述式永久連結
Sass 樣式表由一系列的「陳述式」組成,這些陳述式會依序求值以建構最終的 CSS。某些陳述式可能具有使用 {
和 }
定義的「區塊」,其中包含其他陳述式。例如,樣式規則是一個帶有區塊的陳述式。該區塊包含其他陳述式,例如屬性宣告。
在 SCSS 中,陳述式以分號分隔(如果陳述式使用區塊,則分號是可選的)。在縮排語法中,它們僅以換行符號分隔。
通用陳述式通用陳述式永久連結
這些類型的陳述式可以在 Sass 樣式表的任何位置使用。
- 變數宣告,例如
$var: value
。 - 流程控制 at-規則,例如
@if
和@each
。 @error
、@warn
和@debug
規則。
CSS 陳述式CSS 陳述式永久連結
這些語句會產生 CSS。它們可以在任何地方使用,除了在 @function
函式內部。
- 樣式規則,例如
h1 { /* ... */ }
。 - CSS at-規則,例如
@media
和@font-face
。 - 使用
@include
的Mixin 使用。 @at-root
規則。
頂層語句頂層語句永久連結
這些語句只能在樣式表的頂層使用,或者嵌套在頂層的 CSS 語句內。
其他語句其他語句永久連結
- 像
width: 100px
這樣的屬性宣告只能在樣式規則和一些 CSS at-規則內使用。 @extend
規則只能在樣式規則內使用。
表達式表達式永久連結
表達式是指屬性或變數宣告右側的任何內容。每個表達式都會產生一個值。任何有效的 CSS 屬性值也是一個 Sass 表達式,但 Sass 表達式比普通的 CSS 值更強大。它們會作為參數傳遞給 mixins 和 函式,用於 @if
規則 的控制流程,並使用 算術 進行操作。我們稱 Sass 的表達式語法為 SassScript。
字面量字面量永久連結
最簡單的表達式只表示靜態值。
- 數字,可能帶有單位,也可能不帶單位,例如
12
或100px
。 - 字串,可能帶有引號,也可能不帶引號,例如
"Helvetica Neue"
或bold
。 - 顏色,可以透過其十六進位表示法或名稱來引用,例如
#c6538c
或blue
。 - 布林值 字面量
true
或false
。 - 單例
null
。 - 值清單,它們可以用空格或逗號分隔,並且可以放在方括號中或不放在括號中,例如
1.5em 1em 0 2em
、Helvetica, Arial, sans-serif
或[col1-start]
。 - 將值與鍵關聯的映射,例如
("background": red, "foreground": pink)
。
運算運算永久連結
Sass 定義了許多運算的語法。
==
和!=
用於檢查兩個值是否相同。+
、-
、*
、/
和%
對數字具有其通常的數學含義,對於單位的特殊行為與科學數學中單位的用法相匹配。<
、<=
、>
和>=
檢查兩個數字是否大於或小於另一個數字。and
、or
和not
具有常見的布林行為。除了false
和null
之外,Sass 將所有值視為「true」。+
、-
和/
可用於字串串接。(
和)
可用於明確控制運算的優先順序。