Синтаксис

SCSS

В синтаксисе SCSS используется расширение файла .scss. За несколькими небольшими исключениями, это надмножество CSS, то есть, по сути, весь корректный код CSS также является корректным кодом SCSS. Благодаря сходству с CSS к этому синтаксису проще всего привыкнуть, и он наиболее популярен.

Синтаксис SCSS выглядит так:

@mixin button-base() {
  @include typography(button);
  @include ripple-surface;
  @include ripple-radius-bounded;

  display: inline-flex;
  position: relative;
  height: $button-height;
  border: none;
  vertical-align: middle;

  &:hover {
    cursor: pointer;
  }

  &:disabled {
    color: $mdc-button-disabled-ink-color;
    cursor: default;
    pointer-events: none;
  }
}

Синтаксис с отступами

Синтаксис с отступами был исходным синтаксисом Sass, поэтому в нём используется расширение файла .sass. Из-за этого расширения его иногда просто называют «Sass». Синтаксис с отступами поддерживает все те же возможности, что и SCSS, но для описания структуры документа в нём вместо фигурных скобок и точек с запятой используются отступы.

В целом везде, где в CSS или SCSS вы бы поставили фигурные скобки, в синтаксисе с отступами достаточно добавить один уровень отступа. А строка, заканчивающаяся в месте, где может завершиться инструкция, считается завершённой точкой с запятой. В синтаксисе с отступами есть также несколько дополнительных отличий, описанных в соответствующих разделах справочника.

Синтаксис с отступами выглядит так:

// SASS
@mixin button-base()
  @include typography(button)
  @include ripple-surface
  @include ripple-radius-bounded

  display: inline-flex
  position: relative
  height: $button-height
  border: none
  vertical-align: middle

  &:hover
    cursor: pointer

  &:disabled
    color: $mdc-button-disabled-ink-color
    cursor: default
    pointer-events: none

Многострочные инструкции

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

Dart Sass

начиная с версии 1.84.0

LibSass

✗

Ruby Sass

✗

В синтаксисе с отступами инструкции могут занимать несколько строк, если переносы строк встречаются в местах, где инструкция не может завершиться. Это относится к выражениям в скобках или других видах скобок, а также к местам между ключевыми словами в директиве @-правила Sass.

// SASS
.grid
  display: grid
  grid-template: (
    "header" min-content
    "main" 1fr
  )

@for 
  $i from 
  1 through 3
    ul:nth-child(3n + #{$i})
      margin-left: $i * 10