構文

SCSSSCSS permalink

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;
  }
}

インデント構文インデント構文 permalink

インデント構文はSassの元の構文であるため、ファイル拡張子.sassを使用します。この拡張子のため、単に「Sass」と呼ばれることもあります。インデント構文はSCSSと同じ機能をすべてサポートしますが、ドキュメントの形式を記述するために、中括弧とセミコロンの代わりにインデントを使用します。

一般的に、CSSまたはSCSSで中括弧を書くときはいつでも、インデント構文では1レベル深くインデントできます。そして、行が終了するたびに、それはセミコロンとしてカウントされます。インデント構文には、参照全体で説明されている追加の違いもいくつかあります。

インデント構文は次のようになります

@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