综述

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

通常,在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
上次更新: 2019-10-11 1:26:28 PM