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

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

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

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

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

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

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

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

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

  #{$property}: $value


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

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

Вложенность

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

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

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

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

  &:hover
    font-size: 36px

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

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

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

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

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

Скрытые объявления

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

$rounded-corners: false;

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

// SASS
$rounded-corners: false

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

/* CSS */
.button {
  border: 1px solid black;
}

Пользовательские свойства

Совместимость (синтаксис SassScript):

Dart Sass

✓

LibSass

с версии 3.5.0

Ruby Sass

с версии 3.5.0

➤

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

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

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

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

  // Even though this looks like a Sass variable, it's valid CSS so it's not
  // evaluated.
  --consumed-by-js: $primary;
}

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

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

  // Even though this looks like a Sass variable, it's valid CSS so it's not
  // evaluated.
  --consumed-by-js: $primary

/* CSS */
:root {
  --primary: #81899b;
  --accent: #302e24;
  --warn: #dfa612;
  --consumed-by-js: $primary;
}

@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
@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 */
:root {
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas;
}

Результаты @function

Совместимость:

Dart Sass

с версии 1.94.0

LibSass

✗

Ruby Sass

✗

Свойство result правила @function в обычном CSS работает как пользовательское свойство: его также можно включить в любое место значения свойства, к нему можно обратиться из JavaScript, и поэтому оно может принимать почти любое значение. Sass разбирает его так же, как значение пользовательского свойства, а значит, для включения в него значений SassScript необходимо использовать интерполяцию.

$highlight: #ddf;

@function --highlight() {
  result: var(--highlight, #{$highlight});
}

// SASS
$highlight: #ddf

@function --highlight()
  result: var(--highlight, #{$highlight})

/* CSS */
@function --highlight() {
  result: var(--highlight, #ddf);
}