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