初めて触るSCSSのすすめ

大量にCSSを書いてるとファイルが肥大化しすぎて管理しづらくなってくる。
そんな時に超絶おすすめなSCSSの使い方やメリットを簡単に記載する。

# SCSSって何？
公式：https://sass-lang.com/
簡単にいうとCSSの拡張版。CSSを効率的に書くための記法になる。
同じような拡張版でSaSSというものがある。
SaSSはRubyっぽい記法なのが特徴。元々はSaSSから始まったが、この記法がデザイナーから不評だったらしく
CSS3っぽく書けるSCSSが主流になっているらしい。

# SCSSの使い方
cssと同様、スタイルファイルの拡張子に`.scss`をつける。
ただし、scssの拡張子のままではhtmlが読み込んでくれないため.`scss`のファイルをコンパイルしてやって`.css`に変換する必要がある。

## コンパイル方法
色々なやり方があるが、VScodeの拡張機能を使うと簡単なため今回はこの方法を記載する

### 拡張機能「Easy Sass」
公式：https://marketplace.visualstudio.com/items?itemName=spook.easysass
Easy Sassを使うと、ファイルを保存した時に自動でコンパイルが走ってくれる。
ただし複数のファイルをmainのファイルにimport(後述記載)してる場合、import先のファイルは変更後に自動でコンパイルされるがmainのファイルはコンパイルされないため、手動でコンパイルしてやる必要がある。
コマンドパレットから「Compile all SCSS/SASS files in the project」を打つと全てのファイルが一括でコンパイルできる。

#### 出力ファイル
デフォルトの設定だとEasy SaSSからコンパイルされて出来上がるファイルは`.css`と`.min.css`の２ファイルになる。
`.min.css`はcssファイルを圧縮したもので、普通の`.css`ファイルよりサイズが軽量になっている。
この`.min.css`ファイルを出力させないようにするには
基本設定 -> 設定 -> 拡張機能 -> EasySass configuration -> Formats で

```json:settings.json
    "easysass.formats": [
        {
          "format": "expanded",
          "extension": ".css"
        }
      ]
```
を入力してやれば良い


# SCSSの便利な機能
色々あるが、よく使いそうな機能をいくつか紹介する

## 変数宣言
SCSSは変数が使える。
サイトのベースになる設定を変数に宣言しておくと、後々変更が入った際など修正が楽になる

```scss:scss
$base_color:red;
$base_width: 300px;
$base_height: 300px;
$base_bg_color:blue;

.myCss {
  color: $base_color;
  width: $base_width;
  height:$base_height;
  background-color: $base_bg_color;
}
```

## ネスト(入れ子)
SCSSはスタイルをネストで記載できる。
ネストで書くことによってファイルの肥大化を抑え、管理が容易になる。

例えば通常のCSSの場合

```css:css
.myCss {
  font-size: 12px;
}

.myCss ul {
  list-style: none;
}

.myCss ul li {
  color: red;
}
```
と書くところを

```scss:scss
.myCss{
  font-size: 12px;

  ul{
    list-style: none;

    li{
      color:red;
    }
  }
}
```
と書ける

## 「&」で条件分岐
擬似クラスもネストで簡単に書ける。
直感的に書けるのでかなりわかりやすい。

```scss:scss
.myCss{
  color:red;

  &:hover{
    color:blue;
  }

  &:active{
    color:green;
  }
}
```

## mixin
mixinは関数のようなもので、使い回すような設定をあらかじめ`@mixin`で定義しておき、`@include`で呼び出すことができる。例えば変数と組み合わせると、メディアクエリの設定が簡単になったりする。

```scss:scss

// メディアを定義
$media: (
  "sp": "screen and (max-width: 767px)",
  "tab": "screen and (max-width: 1024px - 1px)",
  "pc": "screen and (min-width: 1024px)"
);

// mixinを定義
@mixin mq($breakpoint: sp) {

  @media #{map-get($media, $breakpoint)} {

    @content;
  }
}


// includeで呼び出し
.myCss{

  @include mq('pc'){
    color: red;
  }

  @include mq('tab'){
    color: blue;
  }

  @include mq('sp'){
    color: green;
  }

}
```

## 四則演算
CSSではcalc関数で四則演算ができるが、SCSSで関数を使わずに計算ができる。


```scss:scss
.myCss{
  width: (320 / 1200) * 100%;
  height: (200 / 480) * 100%;
  background-color: red;
}
```

## 外部ファイルの読み込み
SCSSでは設定ファイルをいくつかに分け、`@import`で読み込むことができる。
例えば役割ごとに設定ファイルを分けることで保守性が上がり、管理がしやすくなる。
また、読み込むファイルは先頭に「_」をつける。

```:(例)ディレクトリ構成
├── index.html
├── css
│   ├── style.scss
│   ├── var　　// 変数定義
│   │     └──_var.scss
│   ├── mixin　　// maxin定義
│   │     └──_mixin.scss
│   └── page　　// スタイリング定義
│          ├──_header.scss
│          ├──_body.scss
│          └──_footer.scss
```

style.scssで読み込む。
変数やmixinはpageよりも先に読み込むのを注意。

```scss:scss
@import "var/**";
@import "mixin/**";
@import "page/**";
```


## extend(継承)
extendは定義しているスタイルを継承することができる。

```scss:scss
.myCss{
  width: (320 / 1200) * 100%;
  height: (200 / 480) * 100%;
  background-color: red;
}

.myCss2{
  @extend .myCss;
}
```
こう書くと、myCss2クラスにmyCssクラスのスタイルが継承される。
ちなみに同名のプロパティを上書きした場合、上書きした内容が優先される。

```scss:scss
.myCss{
  width: (320 / 1200) * 100%;
  height: (200 / 480) * 100%;
  background-color: red;
}

.myCss2{
  @extend .myCss;
  background-color: blue;  // blueが優先される
}
```