Объявления свойств

В Sass, как и в CSS, объявления свойств определяют стиль элементов, соответствующих селектору. Но Sass добавляет дополнительные функции, упрощающие их написание и автоматизацию. Прежде всего, значением объявления может быть любое выражение SassScript, которое будет вычислено и включено в результат.

SCSS Syntax

.circle {
  $size: 100px;
  width: $size;
  height: $size;
  border-radius: $size * 0.5;
}

Интерполяция permalinkИнтерполяция

Имя свойства может включать интерполяцию, что позволяет динамически генерировать свойства по мере необходимости. Вы даже можете интерполировать все название свойства!

SCSS Syntax

@mixin prefix($property, $value, $prefixes) {
  @each $prefix in $prefixes {
    -#{$prefix}-#{$property}: $value;
  }
  #{$property}: $value;
}

.gray {
  @include prefix(filter, grayscale(50%), moz webkit);
}

Вложенность permalinkВложенность

Многие свойства CSS начинаются с одного и того же префикса, который действует как своего рода пространство имен. Например, font-family, font-size и font-weight начинаются с font-. Sass делает это проще и менее избыточным, позволяя вложить объявления свойств. Имена внешних свойств добавляются к внутренним через дефис.

SCSS Syntax

.enlarge {
  font-size: 14px;
  transition: {
    property: font-size;
    duration: 4s;
    delay: 2s;
  }

  &:hover { font-size: 36px; }
}

Некоторые из этих свойств CSS имеют сокращенные версии, в которых пространство имен используется в качестве имени свойства. Для них вы можете записать как сокращенное значение, так и более явные вложенные версии.

SCSS Syntax

.info-page {
  margin: auto {
    bottom: 10px;
    top: 2px;
  }
}

Скрытые декларации permalinkСкрытые декларации

Иногда вам нужно, чтобы объявление свойства отображалось только время от времени. Если значением объявления является null или пустая строка без кавычек, Sass вообще не будет компилировать это объявление в CSS.

SCSS Syntax

$rounded-corners: false;

.button {
  border: 1px solid black;
  border-radius: if($rounded-corners, 5px, null);
}

Настраиваемые свойства permalinkНастраиваемые свойства

Совместимость (SassScript Syntax):
Dart Sass
✓
LibSass
since 3.5.0
Ruby Sass
since 3.5.0

Пользовательские свойства CSS, также известные как переменные CSS, имеют необычный синтаксис объявления: они допускают практически любой текст в значениях объявления. Более того, эти значения доступны для JavaScript, поэтому любое значение может иметь отношение к пользователю. Сюда входят значения, которые обычно анализируются как SassScript.

Из-за этого Sass анализирует объявления настраиваемых свойств иначе, чем объявления других свойств. Все токены, включая те, которые выглядят как SassScript, передаются в CSS как есть. Единственное исключение - интерполяция, единственный способ добавить динамические значения в настраиваемое свойство.

SCSS Syntax

$primary: #81899b;
$accent: #302e24;
$warn: #dfa612;

:root {
  --primary: #{$primary};
  --accent: #{$accent};
  --warn: #{$warn};

  // Несмотря на то, что это похоже на переменную Sass, это действительный CSS, поэтому он не оценивается.
  --consumed-by-js: $primary;
}

⚠️ Внимание!

К сожалению, интерполяция удаляет кавычки из строк, что затрудняет использование строк в кавычках в качестве значений для настраиваемых свойств, когда они поступают из переменных Sass. В качестве обходного пути вы можете использовать функцию meta.inspect()]meta.inspect() function, чтобы сохранить кавычки.

SCSS Syntax

@use "sass:meta";

$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas;

:root {
  --font-family-sans-serif: #{meta.inspect($font-family-sans-serif)};
  --font-family-monospace: #{meta.inspect($font-family-monospace)};
}