sass

Sass 支持两种不同的语法。可以相互加载。

SCSS

SCSS 语法文件扩展名 .scss。是 CSS 的超集，基本上所有有效的 CSS 也是有效的 SCSS。

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

SCSS 语法文件扩展名 .sass。Sass 的原始语法是缩进语法 ，缩进语法支持与 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