CSS At 规则

兼容性 (Name Interpolation):
Dart Sass
since 1.15.0
LibSass
✗
Ruby Sass
✗

LibSass、Ruby Sass 和旧版本的 Dart Sass 不支持 at 规则名称中的 插值法。它们确实支持值的插值。

¥LibSass, Ruby Sass, and older versions of Dart Sass don’t support interpolation in at-rule names. They do support interpolation in values.

Sass 支持 CSS 本身的所有 at 规则。为了保持灵活性并与 CSS 的未来版本向前兼容，Sass 提供了默认覆盖几乎所有 at 规则的一般支持。CSS at 规则写作 @<name> <value>、@<name> { ... } 或 @<name> <value> { ... }。名称必须是一个标识符，而值（如果存在）几乎可以是任何值。名称和值都可以包含 插值法。

¥Sass supports all the at-rules that are part of CSS proper. To stay flexible and forwards-compatible with future versions of CSS, Sass has general support that covers almost all at-rules by default. A CSS at-rule is written @<name> <value>, @<name> { ... }, or @<name> <value> { ... }. The name must be an identifier, and the value (if one exists) can be pretty much anything. Both the name and the value can contain interpolation.

Playground

SCSS Syntax

@namespace svg url(http://www.w3.org/2000/svg);

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}

@counter-style thumbs {
  system: cyclic;
  symbols: "\1F44D";
}
Playground

Sass Syntax

@namespace svg url(http://www.w3.org/2000/svg)

@font-face
  font-family: "Open Sans"
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2")

@counter-style thumbs
  system: cyclic
  symbols: "\1F44D"

CSS Output

@charset "UTF-8";
@namespace svg url(http://www.w3.org/2000/svg);
@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}
@counter-style thumbs {
  system: cyclic;
  symbols: "👍";
}

如果 CSS at 规则嵌套在样式规则中，则两者会自动交换位置，以便 at 规则位于 CSS 输出的顶层，而样式规则位于其中。这使得添加条件样式变得很容易，而无需重写样式规则的选择器。

¥If a CSS at-rule is nested within a style rule, the two automatically swap positions so that the at-rule is at the top level of the CSS output and the style rule is within it. This makes it easy to add conditional styling without having to rewrite the style rule’s selector.

Playground

SCSS Syntax

.print-only {
  display: none;

  @media print { display: block; }
}
Playground

Sass Syntax

.print-only
  display: none

  @media print
    display: block

CSS Output

.print-only {
  display: none;
}
@media print {
  .print-only {
    display: block;
  }
}

@media@media permalink

兼容性 (Range Syntax):
Dart Sass
since 1.11.0
LibSass
✗
Ruby Sass
since 3.7.0

LibSass 以及旧版本的 Dart Sass 和 Ruby Sass 不支持具有以 范围上下文 编写的功能的媒体查询。它们确实支持其他标准媒体查询。

¥LibSass and older versions of Dart Sass and Ruby Sass don’t support media queries with features written in a range context. They do support other standard media queries.

Playground

SCSS Syntax

@media (width <= 700px) {
  body {
    background: green;
  }
}
Playground

Sass Syntax

@media (width <= 700px)
  body
    background: green

CSS Output

@media (width <= 700px) {
  body {
    background: green;
  }
}

@media 规则 具有上述所有功能以及更多功能。除了允许插值之外，它还允许 SassScript 表达式 直接在 特性查询 中使用。

¥The @media rule does all of the above and more. In addition to allowing interpolation, it allows SassScript expressions to be used directly in the feature queries.

Playground

SCSS Syntax

$layout-breakpoint-small: 960px;

@media (min-width: $layout-breakpoint-small) {
  .hide-extra-small {
    display: none;
  }
}
Playground

Sass Syntax

$layout-breakpoint-small: 960px

@media (min-width: $layout-breakpoint-small)
  .hide-extra-small
    display: none

CSS Output

@media (min-width: 960px) {
  .hide-extra-small {
    display: none;
  }
}

如果可能，Sass 还会合并相互嵌套的媒体查询，以便更轻松地支持尚未原生支持嵌套 @media 规则的浏览器。

¥When possible, Sass will also merge media queries that are nested within one another to make it easier to support browsers that don’t yet natively support nested @media rules.

Playground

SCSS Syntax

@media (hover: hover) {
  .button:hover {
    border: 2px solid black;

    @media (color) {
      border-color: #036;
    }
  }
}
Playground

Sass Syntax

@media (hover: hover)
  .button:hover
    border: 2px solid black

    @media (color)
      border-color: #036

CSS Output

@media (hover: hover) {
  .button:hover {
    border: 2px solid black;
  }
}
@media (hover: hover) and (color) {
  .button:hover {
    border-color: #036;
  }
}

@supports@supports permalink

@supports 规则 还允许在声明查询中使用 SassScript 表达式。

¥The @supports rule also allows SassScript expressions to be used in the declaration queries.

Playground

SCSS Syntax

@mixin sticky-position {
  position: fixed;
  @supports (position: sticky) {
    position: sticky;
  }
}

.banner {
  @include sticky-position;
}
Playground

Sass Syntax

@mixin sticky-position
  position: fixed
  @supports (position: sticky)
    position: sticky



.banner
  @include sticky-position

CSS Output

.banner {
  position: fixed;
}
@supports (position: sticky) {
  .banner {
    position: sticky;
  }
}

@keyframes@keyframes permalink

@keyframes 规则 的工作方式与一般 at 规则类似，只是其子规则必须是有效的关键帧规则（<number>%、from 或 to）而不是普通选择器。

¥The @keyframes rule works just like a general at-rule, except that its child rules must be valid keyframe rules (<number>%, from, or to) rather than normal selectors.

Playground

SCSS Syntax

@keyframes slide-in {
  from {
    margin-left: 100%;
    width: 300%;
  }

  70% {
    margin-left: 90%;
    width: 150%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
Playground

Sass Syntax

@keyframes slide-in
  from
    margin-left: 100%
    width: 300%


  70%
    margin-left: 90%
    width: 150%


  to
    margin-left: 0%
    width: 100%

CSS Output

@keyframes slide-in {
  from {
    margin-left: 100%;
    width: 300%;
  }
  70% {
    margin-left: 90%;
    width: 150%;
  }
  to {
    margin-left: 0%;
    width: 100%;
  }
}