バリアント（Variants）

コンポーネントとエレメントは、バリアントを含むことが出来ます.

バリアントの命名

バリアント用のクラス名にはダッシュ - プリフィックスが付きます.

.like-button {
  &.-wide { /* ... */ }
  &.-short { /* ... */ }
  &.-disabled { /* ... */ }
}

エレメントもバリアントを持つことが出来ます.

.shopping-card {
  > .title { /* ... */ }
  > .title.-small { /* ... */ }
}

ダッシュ(-)は以下のような理由でバリアントのための良いプリフィックスです.

Last updated 4 years ago