Sassに触れて1日目に思いついた運用法

タイトルの通り浅い。

# どんなプロジェクトで使ったか
LaravelとVue.js（Laravel Mix）を使ったプロジェクトでBootstrapを使いつつ、自分で考えたViewを実現したい時にSassを書きました。

Laravel Mixに最初からSassが入っていたのでSassを使いました。
CSSになじみがあったのでSCSS記法というものに則ってみました。

# Sassってなに
SassはCSSのメタ言語。Sassの構文で書いたものをコンパイルしてCSSを得ます。
変数や関数、テンプレート構文的なものなどをCSSに追加した感じのものです。

私もこの2つを読んで何となく把握した次第でございます。
[CSSのメタ言語Sass(SCSS)、LESSの完全入門 - Qiita](https://qiita.com/ritukiii/items/67b3c50002b48c6186d6)
[プログラマーから見た、SCSSの正しい(かもしれない)使いかた - Qiita](https://qiita.com/sasuraisan/items/9a9dfb281cfdf5a12bd3)

## SassはCSSの何を解決したのか
個人的には大きくこの2つだと思います。

- 小分けにして使いまわせるようにした
- ネストして書けることにより、より読みやすくなった

### 小分けにして使いまわせるようにした
`@mixin`、`@include`、それと`@extend`によって冗長なスタイルを書く必要がなくなりました。

`@mixin`を使えば、使いまわしたい構文をテンプレートのようにすることができ、`@extend`によって既存のスタイルを継承して使うことができます。

### ネストして書けることにより、より読みやすくなった
BootstrapのButtonをカスタムしたスタイルがあるとします。

```css
.btn-pink {
  color: #fff;
  background-color: #E91E63;
  border-color: #E91E63;
}
.btn-pink:hover {
  color: #fff;
  background-color: #C2185B;
  border-color: #C2185B;
}
.btn-pink:focus, .btn-pink.focus {
  color: #fff;
  background-color: #C2185B;
  border-color: #C2185B;
}
.btn-pink.disabled, .btn-pink:disabled {
  color: #fff;
  background-color: rgba(233, 30, 99, 0.38);
  border-color: rgba(233, 30, 99, 0.38);
}
.btn-pink:not(:disabled):not(.disabled):active, .btn-pink:not(:disabled):not(.disabled).active, .show > .btn-pink.dropdown-toggle {
  color: #fff;
  background-color: #E91E63;
  border-color: #E91E63;
}
.btn-pink:not(:disabled):not(.disabled):active:focus, .btn-pink:not(:disabled):not(.disabled).active:focus, .show > .btn-pink.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(233, 30, 99, 0.5);
}
```

これがスタイルシートファイルの一部分にあると、どこからどこまでが`.btn-pink`クラスのスタイルなのかわかりにくい。（よね？）

けど、Sassで書くとこうなる。

```scss
@mixin btn-theming($color, $background_color, $hovering_color, $hovering_background_color) {
    color: $color;
    background-color: $background_color;
    border-color: $background_color;

    &:hover {
        color: $hovering_color;
        background-color: $hovering_background_color;
        border-color: $hovering_background_color;
    }

    &:focus, &.focus {
        color: $hovering_color;
        background-color: $hovering_background_color;
        border-color: $hovering_background_color;
    }

    &.disabled, &:disabled {
        color: $color;
        background-color: rgba($background_color, 0.38);
        border-color: rgba($background_color, 0.38);
    }

    &:not(:disabled):not(.disabled):active,
    &:not(:disabled):not(.disabled).active,
    .show > &.dropdown-toggle {
        color: $color;
        background-color: $background_color;
        border-color: $background_color;
    }

    &:not(:disabled):not(.disabled):active:focus,
    &:not(:disabled):not(.disabled).active:focus,
    .show > &.dropdown-toggle:focus {
        box-shadow: 0 0 0 0.2rem rgba($background_color, 0.5);
    }
}

.btn-pink {
    @include btn-theming(#fff, #E91E63, #fff, #C2185B);
}
```

`@mixin`によってButtonの色を指定するスタイルを使いまわせるようにすることができる。
それを`.btn-pink`でインクルードして、スタイルシートとして使えるようにしている。

同一のセレクタを使うものを波括弧でくくれるため、CSSよかどこからどこまでがまとまっている部分なのかわかりやすい。
それに、クラス名を逐一書く必要がなくなり、スッキリとしたような気がする。

あと、`rgba()`を16進数 + アルファ値で使える。ありがてぇ。

# で、どしたのさ
## SassMeisterを使ってコンパイル結果をチラ見しながら書いた
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/255294/b4c180e9-ff52-9249-e0c2-47f6b8461625.png)

SassMeisterはWeb上でSassをCSSにコンパイルできる。Qiitaの編集画面みたいに左にSass、右にCSSが出る。
[SassMeister | The Sass Playground!](https://www.sassmeister.com/)

不慣れだし、これで逐一結果をみながら書いてみるのが良かった。

## `@import`しまくるファイルを作った
`@import`を使うことで複数のファイルに分けてSassを書くことができる。

```scss
@import "variables";
```

`@import`するとインポートしたファイルに書いてあるスタイルシートもすべてCSSファイルに出力されるのでご留意ください。

ページやパーツごとに`.scss`を分けて作っておき、それらすべてをまとめて`@import`するファイルを作って、コンパイルするときにひとつのファイルを指定するだけで全部まとめられるようにしました。

ファイルを分けて、どのファイルに書いたか察せるようにクラス名をつけておくことで、大量のスタイルが定義されてて探すのが大変！なんてことを防ぎたいなと思いました。

`.index-header`、`.index-card`は`index.scss`に書いた。みたいな感じです。

## 定数を作った
Sassには変数がある。
この変数に色や数値を入れておけば、これを参照することができる。

```scss
$pink: #E91E63;
$dark_pink: #C2185B;

.text-pink{
    color: $pink !important; // <- モチロン変数は展開されて出力される
}
```

`variables.scss`のようにファイルを分けておいて、そこに定数としてイッパイ書いて`@import`しておけば、後で色を変えたくなった時とかにここを書き替えてコンパイルすれば全部済んじゃってイイネ！って感じ。

## `@mixin`に頼りまくった
前述のとおり、Bootstrapの色を変えたいものなどを`@mixin`を使って、使いまわせるようにした。

`@mixin`は抽象クラスの様な感じ。
`@include`を使って`@mixin`を全部コピペしてくるような感じになる。

`@mixin`は引数をとることができるので、Buttonなどの場合、色を引数により指定できるようにすることでいくらでも使いまわせちゃうのだ。
引数はデフォルト値を持ったりできる。詳しくは調べてください...

```scss
@mixin btn-theming($color, $background_color, $hovering_color, $hovering_background_color) {
    color: $color;
    background-color: $background_color;
    border-color: $background_color;

    &:hover {
        color: $hovering_color;
        background-color: $hovering_background_color;
        border-color: $hovering_background_color;
    }

    &:focus, &.focus {
        color: $hovering_color;
        background-color: $hovering_background_color;
        border-color: $hovering_background_color;
    }

    &.disabled, &:disabled {
        color: $color;
        background-color: rgba($background_color, 0.38);
        border-color: rgba($background_color, 0.38);
    }

    &:not(:disabled):not(.disabled):active,
    &:not(:disabled):not(.disabled).active,
    .show > &.dropdown-toggle {
        color: $color;
        background-color: $background_color;
        border-color: $background_color;
    }

    &:not(:disabled):not(.disabled):active:focus,
    &:not(:disabled):not(.disabled).active:focus,
    .show > &.dropdown-toggle:focus {
        box-shadow: 0 0 0 0.2rem rgba($background_color, 0.5);
    }
}
```

これによりボタンの色違いはたった1行のスタイルで加えることができる。

```scss
.btn-pink {
    @include btn-theming(#fff, #E91E63, #fff, #C2185B);
}
```

スタイルシート書くのがめんどいからボタンの色にまでこだわらなくていっか...なんて怠惰が無くなりました。

# 結局クラスは増える
Sassを使えばHTMLタグにひとつだけクラスをつけて、そのクラスの中でいっぱい`@extend`すれば同じことができるけど、そこまでするメリットは感じられなかった。（Sassはたくさん`@extend`できる）
Vueも使っているのでクラスごとに明確な名前が付いていて、役割がしっかりと分離されている方が使い勝手がよかった。`v-bind:class`でクラスを効かせたり、効かせなかったりを簡単に制御できる。

HTMLってやっぱり可読性はあきらめるしかないのかな...

# CSSファイルがクソデカ・クソ冗長になることがあるらしい
Sassがシンプルならそれでいいでしょってぼくは思いますが、読み込み速度に影響したら嫌ですね。

このテクニックが役に立ちそうです。
[Sassで@mixinを作る時に知っておきたい基礎知識 - Qiita](https://qiita.com/nekoneko-wanwan/items/c8498a21ae0e2b2198be)

---

つべこべ言いましたがCSSよりか便利で融通の利く存在であることは確かです。
お試しあれ～