原生 Css

兼容性(名称插值): Dart Sass since 1.15.0 | LibSass ✗ | Ruby Sass ✗

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

Sass 支持属于 CSS 本身的所有 at 规则。为了保持灵活性和与未来版本的 CSS 的向前兼容，Sass 具有默认涵盖几乎所有 @ 规则的一般支持。 CSS at 规则写为@<name> <value>、@<name> { ... }或@<name> <value> { ... }。名称必须是标识符，值(如果存在)几乎可以是任何东西。名称和值都可以包含 interpolation。

scss

Scss

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";
}

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

scss

Scss

scss

.print-only {
  display: none;

  @media print { display: block; }
}

`@media`

兼容性(范围语法): Dart Sass since 1.11.0 | LibSass ✗ | Ruby Sass since 3.7.0

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

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

scss

Scss

scss

@media 规则可以完成上述所有工作，甚至更多。除了允许插值外，它还允许直接在功能查询。

scss

Scss

scss

$layout-breakpoint-small: 960px;

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

在可能的情况下，Sass 还将合并嵌套在彼此中的媒体查询，以便更轻松地支持尚未原生支持嵌套的 @media 规则的浏览器。

scss

Scss

scss

`@supports`

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

scss

Scss

scss

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

.banner {
  @include sticky-position;
}

`@keyframes`

@keyframes 规则就像一般的 at 规则一样工作，除了它的子规则必须是有效的关键帧规则(<number>%、from 或 to)而不是普通的选择器。

scss

Scss

scss

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

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

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