Syntax

SCSSSCSS permalink

Die SCSS-Syntax verwendet die Dateierweiterung .scss. Mit wenigen Ausnahmen ist sie eine Obermenge von CSS, was bedeutet, dass im Wesentlichen jedes gültige CSS auch gültiges SCSS ist. Aufgrund ihrer Ähnlichkeit zu CSS ist sie die am einfachsten zu erlernende und beliebteste Syntax.

SCSS sieht so aus

@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;
  }
}

Die eingerückte SyntaxDie eingerückte Syntax permalink

Die eingerückte Syntax war die ursprüngliche Syntax von Sass und verwendet daher die Dateierweiterung .sass. Wegen dieser Erweiterung wird sie manchmal einfach als "Sass" bezeichnet. Die eingerückte Syntax unterstützt alle Funktionen von SCSS, verwendet aber Einrückungen anstelle von geschweiften Klammern und Semikolons, um das Format des Dokuments zu beschreiben.

Im Allgemeinen gilt: Immer wenn Sie in CSS oder SCSS geschweifte Klammern schreiben würden, können Sie in der eingerückten Syntax einfach eine Ebene tiefer einrücken. Und jedes Mal, wenn eine Zeile endet, zählt dies als Semikolon. Es gibt auch einige zusätzliche Unterschiede in der eingerückten Syntax, die im gesamten Referenzmaterial aufgeführt sind.

Die eingerückte Syntax sieht so aus

@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