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

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

SCSS Syntax

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

Sass Syntax

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

CSS Output

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50px;
}

Интерполяция 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);
}

Sass Syntax

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

  #{$property}: $value


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

CSS Output

.gray {
  -moz-filter: grayscale(50%);
  -webkit-filter: grayscale(50%);
  filter: grayscale(50%);
}

Вложенность 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; }
}

Sass Syntax

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

  &:hover
    font-size: 36px

CSS Output

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

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

SCSS Syntax

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

Sass Syntax

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

CSS Output

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

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

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

SCSS Syntax

$rounded-corners: false;

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

Sass Syntax

$rounded-corners: false

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

CSS Output

.button {
  border: 1px solid black;
}

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

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

Более старые версии LibSass и Ruby Sass анализировали объявления настраиваемых свойств так же, как и любое другое объявление свойств, позволяя использовать полный диапазон выражений SassScript в качестве значений. Даже при использовании этих версий рекомендуется использовать интерполяцию для внедрения значений SassScript для прямой совместимости.

Смотрите страницу критических изменений для получения более подробной информации.

Пользовательские свойства 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 Syntax

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

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

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

CSS Output

:root {
  --primary: #81899b;
  --accent: #302e24;
  --warn: #dfa612;
  --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)};
}

Sass 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)}

CSS Output

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