語法

SCSSSCSS 永久連結

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