句法

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

通常，任何时候用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