Syntax

SCSSSCSS permalink

The SCSS syntax uses the file extension .scss. With a few small exceptions, it’s a superset of CSS, which means essentially all valid CSS is valid SCSS as well. Because of its similarity to CSS, it’s the easiest syntax to get used to and the most popular.

SCSS looks like this:

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

The Indented SyntaxThe Indented Syntax permalink

The indented syntax was Sass’s original syntax, so it uses the file extension .sass. Because of this extension, it’s sometimes just called "Sass". The indented syntax supports all the same features as SCSS, but it uses indentation instead of curly braces and semicolons to describe the format of the document.

In general, any time you’d write curly braces in CSS or SCSS, you can just indent one level deeper in the indented syntax. And any time a line ends in a place where a statement can end, that counts as a semicolon. There are also a few additional differences in the indented syntax that are noted throughout the reference.

The indented syntax looks like this:

@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

Multiline statementsMultiline statements permalink

Compatibility:

Dart Sass

since 1.84.0

LibSass

✗

Ruby Sass

✗

In the indented syntax, statements can span multiple lines as long as line breaks occur in places where the statement can’t end. This includes inside parentheses or other brackets, or between keywords in a Sass-specific @-rule.

.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