语法

SCSSSCSS permalink

SCSS 语法使用文件扩展名 .scss。除了一些小例外，它是 CSS 的超集，这意味着基本上所有有效的 CSS 也是有效的 SCSS。由于它与 CSS 相似，因此它是最容易习惯且最受欢迎的语法。

¥The SCSS syntax uses the file extension .scss. With a few small exceptions, it’s a superset of CSS, which means essentially all valid CSS is valid SCSS as well. Because of its similarity to CSS, it’s the easiest syntax to get used to and the most popular.

SCSS 看起来像这样：

¥SCSS looks like this:

@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

¥The Indented Syntax

缩进语法是 Sass 的原始语法，因此它使用文件扩展名 .sass。由于此扩展名，有时简称为 "Sass"。缩进语法支持与 SCSS 相同的所有功能，但它使用缩进而不是大括号和分号来描述文档的格式。

¥The indented syntax was Sass’s original syntax, so it uses the file extension .sass. Because of this extension, it’s sometimes just called "Sass". The indented syntax supports all the same features as SCSS, but it uses indentation instead of curly braces and semicolons to describe the format of the document.

一般来说，任何时候你在 CSS 或 SCSS 中编写大括号时，都可以在缩进语法中更深一级缩进。每当一行结束时，都算作一个分号。整个参考中都指出了缩进语法中的一些其他差异。

¥In general, any time you’d write curly braces in CSS or SCSS, you can just indent one level deeper in the indented syntax. And any time a line ends, that counts as a semicolon. There are also a few additional differences in the indented syntax that are noted throughout the reference.

缩进语法如下所示：

¥The indented syntax looks like this:

@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