CSS 规则

Sass 支持作为适当 CSS 一部分的每个规则。为了保持灵活性和未来与即将推出的 CSS 版本兼容，Sass 提供了涵盖几乎所有 at 规则本身的一般支持。
句法：

@ , @ {
   ... 
}

或者

@  {
   ... 
}

规则必须始终是一个标识符，值(如果存在)可以是任何东西。规则和值都可以有插值。如果任何 CSS at-rule 嵌套在样式规则中，它们都会交换自己的位置，以便 at-rule 位于 CSS 输出的顶层，而样式规则位于其中。这使得添加条件样式变得容易，而无需重写样式规则选择器。

例子：

.gfg {
  margin: 4px;
  
  @media geeks { margin: 8px; }
}

输出：

.gfg {
  margin: 4px;
}
@media geeks {
  .gfg {
    margin: 8px;
  }
}

@media 规则：除了允许插值外，@ media规则还允许在查询中直接使用 Sass 脚本表达式。只要有可能，Sass 还会合并相互嵌套的媒体查询，以便支持当前不支持嵌套@media规则的浏览器。

例子：

@media (hover: hover) {
  .gfg:hover {
    border: 4px solid green;
  
    @media (color) {
      border-color: black;
    }
  }
}

输出：

@media (hover: hover) {
  .gfg:hover {
    border: 4px solid green;
  }
}
@media (hover: hover) and (color)
{
  .gfg:hover {
    border-color: black;
  }
}

@supports 规则： @supports规则还允许在声明查询中使用 Sass 脚本表达式。
例子：

@mixin gfg {
  font-family: arial;
  @supports (font-family: geeks ) {
    font-family: geeks;
  }
}
  
.header {
  @include gfg;
}

输出：

.header {
  font-family: arial;
}
@supports (font-family: geeks) {
  .header {
    font-family: geeks;
  }
}

@keyframes 规则： @keyframes 规则的工作方式与任何其他一般规则一样。唯一的区别是它的子规则应该是一些有效的关键帧规则(%、from 或 to)而不是任何普通的选择器。
例子：

@keyframes font-change {
  from {
    font-family: arial;
    color: black;
  }
  
  50% {
    font-family: sans;
    color: green;
  }
  
  to {
    font-family: algerian;
    color: cyan;
  }
}

输出：

@keyframes font-change {
  from {
    font-family: arial;
    color: black;
  }
  50% {
    font-family: sans;
    color: green;
  }
  to {
    font-family: algerian;
    color: cyan;
  }
}