语法

Sass 支持两种不同的语法。两种语法可以互相加载,所以 选择哪一种语法取决于你和你的团队。

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 相同的所有特性,但是它使用 缩进而不是花括号和分号来描述文档的格式。

通常,在 CSSSCSS 中书写花括号时, 对应着在缩进语法中再缩进一层即可。 任何一行结束, 都被当作分号。在缩进语法中还有一些额外的差异, 这些差异将贯穿整个手册中给出提示。

缩进语法是这样的:

@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