语法

SCSSSCSS permalink

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

缩进的语法缩进的语法 permalink

缩进语法是 Sass 的原始语法，因此它使用文件 扩展名 .sass 。由于这个扩展名的原因，这种语法有时直接被称为 "Sass"。 缩进语法支持与 SCSS 相同的所有特性，但是它使用 缩进而不是花括号和分号来描述文档的 格式。

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. 通常而言，在 CSS 或 SCSS 中需要书写花括号的场景， 在缩进语法（Indented Syntax）中只需通过增加一次缩进即可实现。同理，凡是一条语句可以结束的行末， 均会被视作已包含分号。此外，缩进语法中存在的其他细微差异， 已在参考手册的相关章节中逐一 注明。

缩进语法是这样的：

@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