At-Правила CSS

Совместимость (Name Interpolation):
Dart Sass
since 1.15.0
LibSass
✗
Ruby Sass
✗

Sass поддерживает все at-правила, которые являются частью собственно CSS. Чтобы сохранить гибкость и совместимость с будущими версиями CSS, Sass имеет общую поддержку, которая по умолчанию охватывает почти все at-правила. At-правило CSS записывается как @<name> <value>, @<name> { ... } или @<name> <value> { ... }. Имя должно быть идентификатором, а значение (если оно существует) может быть чем угодно. И имя, и значение могут содержать интерполяцию.

SCSS Syntax

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

Если at-правило CSS вложено в правило стиля, эти два правила автоматически меняются местами, так что at-правило находится на верхнем уровне вывода CSS, а правило стиля находится внутри него. Это упрощает добавление условного стиля без необходимости переписывать селектор правила стиля.

SCSS Syntax

.print-only {
  display: none;

  @media print { display: block; }
}

@media permalink@media

Совместимость (Range Syntax):
Dart Sass
since 1.11.0
LibSass
✗
Ruby Sass
since 3.7.0

Правило @media выполняет все вышеперечисленное и многое другое. Помимо возможности интерполяции, он позволяет использовать выражения SassScript непосредственно в запросы функций.

SCSS Syntax

$layout-breakpoint-small: 960px;

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

По возможности Sass также объединяет вложенные друг в друга медиа-запросы, чтобы упростить поддержку браузеров, которые еще не поддерживают вложенные правила @media.

SCSS Syntax

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

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

@supports permalink@supports

Правило @supports также позволяет использовать выражения SassScript expressions в запросах объявления.

SCSS Syntax

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

.banner {
  @include sticky-position;
}

@keyframes permalink@keyframes

Правило @keyframes rule работает так же, как общее at-правило, за исключением того, что его дочерние правила должны быть действительными правилами ключевых кадров (<number>%, from или to), а не обычными селекторами.

SCSS Syntax

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

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

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