样式表的结构

声明声明 permalink

¥Statements

Sass 样式表由一系列语句组成，对这些语句进行评估以构建生成的 CSS。某些语句可能具有使用 { 和 } 定义的块，其中包含其他语句。例如，样式规则是带有块的语句。该块包含其他语句，例如属性声明。

¥A Sass stylesheet is made up of a series of statements, which are evaluated in order to build the resulting CSS. Some statements may have blocks, defined using { and }, which contain other statements. For example, a style rule is a statement with a block. That block contains other statements, such as property declarations.

在 SCSS 中，语句之间用分号分隔（如果语句使用块，则分号是可选的）。在缩进语法中，它们只是用换行符分隔。

¥In SCSS, statements are separated by semicolons (which are optional if the statement uses a block). In the indented syntax, they’re just separated by newlines.

通用声明通用声明 permalink

¥Universal Statements

这些类型的语句可以在 Sass 样式表中的任何位置使用：

¥These types of statements can be used anywhere in a Sass stylesheet:

• 变量声明，如 $var: value。

  ¥Variable declarations, like $var: value.

• 流量控制规则，如 @if 和 @each。

  ¥Flow control at-rules, like @if and @each.

• @error、@warn 和 @debug 规则。

  ¥The @error, @warn, and @debug rules.

CSS 语句CSS 语句 permalink

¥CSS Statements

这些语句生成 CSS。它们可以在除 @function 之外的任何地方使用：

¥These statements produce CSS. They can be used anywhere except within a @function:

• 样式规则，如 h1 { /* ... */ }。

  ¥Style rules, like h1 { /* ... */ }.

• CSS at 规则，如 @media 和 @font-face。

  ¥CSS at-rules, like @media and @font-face.

• Mixin 用途 使用 @include。

  ¥Mixin uses using @include.

• @at-root 规则.

  ¥The @at-root rule.

高层声明高层声明 permalink

¥Top-Level Statements

这些语句只能在样式表的顶层使用，或者嵌套在顶层的 CSS 语句中：

¥These statements can only be used at the top level of a stylesheet, or nested within a CSS statement at the top level:

• 模块负载，使用 @use。

  ¥Module loads, using @use.

• 导入，使用 @import。

  ¥Imports, using @import.

• 混合定义 使用 @mixin。

  ¥Mixin definitions using @mixin.

• 函数定义 使用 @function。

  ¥Function definitions using @function.

其他声明其他声明 permalink

¥Other Statements

• 与 width: 100px 一样，属性声明 只能在样式规则和某些 CSS at 规则中使用。

  ¥Property declarations like width: 100px may only be used within style rules and some CSS at-rules.

• @extend 规则 只能在样式规则中使用。

  ¥The @extend rule may only be used within style rules.

表达式表达式 permalink

¥Expressions

表达式是属性或变量声明右侧的任何内容。每个表达式都会生成一个 值。任何有效的 CSS 属性值也是 Sass 表达式，但 Sass 表达式比普通 CSS 值更强大。它们作为参数传递给 混入 和 函数，用于 @if 规则 的控制流，并使用 算术 进行操作。我们将 Sass 的表达式语法称为 SassScript。

¥An expression is anything that goes on the right-hand side of a property or variable declaration. Each expression produces a value. Any valid CSS property value is also a Sass expression, but Sass expressions are much more powerful than plain CSS values. They’re passed as arguments to mixins and functions, used for control flow with the @if rule, and manipulated using arithmetic. We call Sass’s expression syntax SassScript.

字面量字面量 permalink

¥Literals

最简单的表达式仅表示静态值：

¥The simplest expressions just represent static values:

• 数字，可能有单位，也可能没有单位，如 12 或 100px。

  ¥Numbers, which may or may not have units, like 12 or 100px.

• 字符串，可能有引号，也可能没有，如 "Helvetica Neue" 或 bold。

  ¥Strings, which may or may not have quotes, like "Helvetica Neue" or bold.

• 颜色，可以通过其十六进制表示形式或名称来引用，例如 #c6538c 或 blue。

  ¥Colors, which can be referred to by their hex representation or by name, like #c6538c or blue.

• 布尔值 字面量为 true 或 false。

  ¥The boolean literals true or false.

• 单例 null。

  ¥The singleton null.

• 值列表，可以用空格或逗号分隔，并且可以用方括号括起来或根本不加括号，例如 1.5em 1em 0 2em、Helvetica, Arial, sans-serif 或 [col1-start]。

  ¥Lists of values, which may be separated by spaces or commas and which may be enclosed in square brackets or no brackets at all, like 1.5em 1em 0 2em, Helvetica, Arial, sans-serif, or [col1-start].

• 映射 将值与键相关联，如 ("background": red, "foreground": pink)。

  ¥Maps that associate values with keys, like ("background": red, "foreground": pink).

运算运算 permalink

¥Operations

Sass 定义了许多操作的语法：

¥Sass defines syntax for a number of operations:

• == and != are used to check if two values are the same.
• +, -, *, /, and % have their usual mathematical meaning for numbers, with special behaviors for units that matches the use of units in scientific math.
• <, <=, >, and >= check whether two numbers are greater or less than one another.
• and, or, and not have the usual boolean behavior. Sass considers every value "true" except for false and null.
• +, -, and / can be used to concatenate strings.
• ( and ) can be used to explicitly control the precedence order of operations.

其他表达方式其他表达方式 permalink

¥Other Expressions

• 变量，如 $var。

  ¥Variables, like $var.

• 函数调用，与 nth($list, 1) 或 var(--main-bg-color) 一样，可能调用 Sass 核心库函数或用户定义函数，也可能直接编译为 CSS。

  ¥Function calls, like nth($list, 1) or var(--main-bg-color), which may call Sass core library functions or user-defined functions, or which may be compiled directly to CSS.

• 特殊函数 与 calc(1px + 100%) 或 url(http://myapp.com/assets/logo.png) 一样，都有自己独特的解析规则。

  ¥Special functions, like calc(1px + 100%) or url(http://myapp.com/assets/logo.png), that have their own unique parsing rules.

• 父选择器、&。

  ¥The parent selector, &.

• 值 !important，被解析为不带引号的字符串。

  ¥The value !important, which is parsed as an unquoted string.