Синтаксис

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