Sass 教程

Sass 内置模块

阅读(517)

Sass 提供了许多内置模块,其中包含有用的功能(偶尔还有 mixin)。这些模块可以像任何用户定义的样式表一样使用 @use 规则加载,并且可以像任何其他模块成员一样调用它们的函数。所有内置模块 URL 都以 sass: 开头,表示它们是...

Sass 操作符

阅读(317)

Sass 支持一些有用的运算符来处理不同的值。其中包括标准数学运算符,如 + 和 *,以及各种其他类型的运算符: ==和!=用于检查两个值是否相同。 +,-,*,/,并%有数字他们通常的数学含义,同时,对于在科学的数学使用单位的一致单位特殊...

Sass @while

阅读(229)

语法: 编译为 CSS 结果:

Sass @for

阅读(250)

语法: 如果使用 to,则排除最终数字;如果使用 THROUGH,则包含它。 编译为 CSS 结果:

Sass @each

阅读(483)

通过@each规则,可以轻松地为列表(List)中的每个元素或映射(Map)中的每个元素对发出样式或计算代码。它非常适合重复的样式,它们之间只有一些变化。它通常是 @each <variable> in <expression>...

Sass @if 和 @else

阅读(379)

@if规则@if <expression> { ... }编写,它控制是否评估其块(包括以CSS形式发出任何样式)。表达式通常返回 true 或 false — 如果表达式返回 true,则计算块,如果表达式返回 false,则不计算...

Sass @at-root

阅读(393)

@at-root通常写@at-root <selector> { ... },并导致其中的所有内容在文档的根目录下发出,而不是使用正常的嵌套。它最常用于使用 SassScript 父选择器和选择器函数进行高级嵌套。 例如,假设您要编写...

Sass @debug

阅读(379)

有时,在开发样式表时查看变量或表达式的值很有用。这就是@debug规则的用途:它写@debug,并打印该表达式的值以及文件名和行号。 调试消息的确切格式因实现而异。这是Dart Sass中的样子: test.scss:3 Debug: di...

Sass @warn

阅读(350)

在编写 mixins 和函数时,您可能希望阻止用户传递某些参数或某些值。他们可能正在传递现已弃用的旧参数,或者他们可能以不太理想的方式调用您的 API。 @warn规则就是为此而设计的。它是@warn编写的,它为用户打印表达式的值(通常是字...

Sass @error

阅读(363)

在编写接受参数的 mixins 和函数时,您通常希望确保这些参数具有 API 所需的类型和格式。如果不是,则需要通知用户,并且您的mixin/函数需要停止运行。 Sass 通过编写@error的 @error 规则使这变得容易。它打印表达式...