支持 CSS 规则

Sass支持所有属于CSS本身的规则。为了保持灵活性并与未来版本的 CSS 向前兼容，Sass 提供了基本支持，默认情况下几乎涵盖了所有 CSS 规则。CSS 规则写为@<name><value>，@<name>{…}，或@<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 规则嵌套在样式规则中，则两者会自动交换位置，以便 AT 规则位于 CSS 输出的顶层并且样式规则位于其中。这使得添加条件样式变得容易，而无需重写样式规则的选择器。

scss 语句	css 语句
.print-only { display: none; @media print { display: block; } }	.print-only { display: none; } @media print { .print-only { display: block; } }

@media

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

scss 语句	css 语句
$layout-breakpoint-small: 960px; @media (min-width: $layout-breakpoint-small) { .hide-extra-small { display: none; } }	@media (min-width: 960px) { .hide-extra-small { display: none; } }

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

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

scss 语句

css 语句

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

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

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

@supports

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

scss 语句	css 语句
@mixin sticky-position { position: fixed; @supports (position: sticky) { position: sticky; } } .banner { @include sticky-position; }	.banner { position: fixed; } @supports (position: sticky) { .banner { position: sticky; } }

scss 语句

css 语句

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

.banner {
  @include sticky-position;
}

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

@keyframes

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

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

scss 语句

css 语句

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

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

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

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