Lzh on GitHub

css @规则

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

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

@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 at-rule 嵌套在样式规则内，两者会自动交换位置，以便 at-rule 位于 CSS 输出的顶层，而样式规则位于其内部。这使得添加条件样式变得容易，而无需重写样式规则的选择器。

.print-only {
  display: none;

  @media print { display: block; }
}

@media

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

$layout-breakpoint-small: 960px;

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

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

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

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

@supports

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

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

.banner {
  @include sticky-position;
}

@keyframes

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

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

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

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