语法

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

通常，在 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