📜  萨斯|规则

📅  最后修改于: 2021-10-29 03:58:55             🧑  作者: Mango

At-rules 只是一些 CSS 语句,它们指示 CSS 在特定条件下如何表现。它们以“@”符号开头,后跟标识符并以分号(在 SCSS 的情况下)或下一个 CSS 语句(在 SASS 的情况下)结束,具体取决于所使用的 Sass 语法。

句法:

css
@identifier(rule);


css
.error
  border: 1px green
  background-color: black
 
  &--serious
    @extend .error
    border-width: 3px


以下是使用的 Sass at 规则列表:

  • @use 一起处理来自不同 Sass 样式表的 mixin、函数和变量。它还将来自各种不同样式表的 CSS 合二为一。
  • @forward处理 Sass 样式表,并使其混入、函数和变量可用于 @use 规则。
  • @import扩展 CSS at-rule 以处理来自其他样式表的样式、mixin、函数和变量。
  • @mixin@include使再次使用样式部分变得容易。
  • 在萨斯表达式中使用@函数定义了定制功能。
  • @extend允许选择器相互接收样式。
  • @at-root将样式放在 CSS 文档的根目录中。
  • @error导致编译失败并显示给定的错误消息,如上例中所用。
  • @warn在不完全停止编译的情况下打印警告。
  • @debug打印命令用于调试目的。
  • @if、@each、@for@while这样的流控制规则控制样式的发射次数。

Sass 还为简单的 CSS 规则提供了某些行为,例如: @charset@namespace。它们可以包含插值,并且可以嵌套在样式规则中。其中一些,例如@media@supports ,即使不使用插值,也允许直接在规则本身中使用 Sass。

Sass 的许多额外功能都以这些at-rules的形式出现。

示例代码:

css

.error
  border: 1px green
  background-color: black
 
  &--serious
    @extend .error
    border-width: 3px

这将给出以下 CSS 输出:

.error, .error--serious {
  border: 1px green;
  background-color: black;
}
.error--serious {
  border-width: 3px;
}