CSS At-规则

兼容性（名称插值）
Dart Sass
自 1.15.0 起
LibSass
✗
Ruby Sass
✗

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

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

游乐场

SCSS 语法

@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";
}
游乐场

Sass 语法

@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 输出

@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 输出的顶层，而样式规则位于其中。这样可以很容易地添加条件样式，而无需重写样式规则的 选择器。

游乐场

SCSS 语法

.print-only {
  display: none;

  @media print { display: block; }
}
游乐场

Sass 语法

.print-only
  display: none

  @media print
    display: block

CSS 输出

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

@media@media 永久链接

兼容性（范围语法）
Dart Sass
自 1.11.0 起
LibSass
✗
Ruby Sass
自 3.7.0 起

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

游乐场

SCSS 语法

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

Sass 语法

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

CSS 输出

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

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

游乐场

SCSS 语法

$layout-breakpoint-small: 960px;

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

Sass 语法

$layout-breakpoint-small: 960px

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

CSS 输出

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

在可能的情况下，Sass 还会合并彼此嵌套的媒体查询，以使其更容易支持尚不支持嵌套 @media 规则的浏览器。

游乐场

SCSS 语法

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

    @media (color) {
      border-color: #036;
    }
  }
}
游乐场

Sass 语法

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

    @media (color)
      border-color: #036

CSS 输出

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

@supports@supports 永久链接

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

游乐场

SCSS 语法

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

.banner {
  @include sticky-position;
}
游乐场

Sass 语法

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



.banner
  @include sticky-position

CSS 输出

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

@keyframes@keyframes 永久链接

@keyframes 规则的工作方式与一般的 at-规则相同，只是它的子规则必须是有效的关键帧规则（<number>%、from 或 to），而不是正常的 选择器。

游乐场

SCSS 语法

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

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

  to {
    margin-left: 0%;
    width: 100%;
  }
}
游乐场

Sass 语法

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


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


  to
    margin-left: 0%
    width: 100%

CSS 输出

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