# バリアント（Variants）

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

![.search-formへ付与されるバリアント.-prefixedと.-compact](https://1824161834-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzHMp2qRyOnHJ9hTLNO%2F-LzHR_sAmaj43Py7Q9Ka%2F-LzHWiasme5qZLUO_Oms%2Fimage.png?alt=media\&token=a9b82761-37cd-4ffe-8fce-32adb018cdaa)

## バリアントの命名

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

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

## エレメントのバリアント

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

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

## ダッシュプリフィックス

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

* エレメントに対する曖昧さを防げる
* CSSクラスが`_` もしくは`-`のみで始まる
* ダッシュはアンダースコアよりタイプするのが簡単
* UNIXのコマンドにおけるオプションに似ている(`gcc -O2 -Wall -emit-last`)