初心者にはSassのコンパイルが紛らわしすぎる

## この投稿を読んでわかること
- Sassとは
- CSSとの違いは
- コンパイルの仕方
- どんな時にSassを用いるのか

## コンパイルって言葉も覚えにくけりゃ、作業もむずい
やっとhtml/cssを乗り越えた初心者にしてみれば、JavaScriptも大変なのに、チーム開発のあれこれ（FLOCSSやらBEMやらGitやら）も本当に難しいんですよ…

やっとこさ乗り越えたので、備忘録的に書いていきます。

## Sassってなんぞや
**S**yntactically **A**wesome **S**tyle**S**heetの略。
（構文的に超すごいスタイルシート）

CSSを拡張したメタ言語で、CSSのコード記述をより効率的にかつ可読性を高めるためのツールをSassと言います。

## 記述法は2つ
Sassは「SASS」という記法と「SCSS」という記法の2つが存在します。

<font color=skyblue>**SASS**：インデントベースの構文を使用し、ブレース（{}）やセミコロン（;）を省略できる。
```
$primary-color: #333

body
  color: $primary-color

h1
  font-size: 2em
```
見た目は簡潔で見やすいですね。続いて、SCSSについて。

<font color=skyblue>**SCSS**：CSSに非常に似た構文で、ブレースとセミコロンを使用する。

```
$primary-color: #333;

body {
  color: $primary-color;
}

h1 {
  font-size: 2em;
}
```
書き方はCSSと同じです。


他にも違いがあり、それを説明するためには、まずSassの特徴について説明する必要があります。

## Sassの特徴

:::note warn
**Sassの特徴**
①ネスト（入れ子構造）によって記述を簡略化できる
②変数が利用できる
③ミックスイン（@mixin）が利用できる
④ファイル分割をすることができる
:::

### ①ネスト（入れ子構造）によって記述を簡略化できる
これは親子関係がわかりやすい記載ができるということです。どういう意味か、実際のコードで説明します。
```
<nav>
    <ul>
        <li><a href="#">ナビゲーション１</a></li>
        <li><a href="#">ナビゲーション２</a></li>
        <li><a href="#">ナビゲーション３</a></li>
    </ul>
</nav>
```
というhtmlがあったとき、CSSは以下のように指定していきます。
```
nav ul {
    display:flex;
    gap: 10px;
}
nav ul li {
    color:#333333;
    padding:20px;
}
nav ul li a {
    text-decoration:none;
}
```
これらをSASS、SCSSの記法でそれぞれ記述すると、下記のようになります。

```
/*SASS記法*/
nav 
    ul 
    　display:flex
    　gap: 10px
    li 
    　color:#333333
    　padding:20px
    a 
    　text-decoration:none
```
```
/*SCSS記法*/
nav {
    ul {
    　display:flex;
    　gap: 10px;
    }
    li {
    　color:#333333;
    　padding:20px;
    }
    a {
    　text-decoration:none;
    }
}
```
インデントがあるので、どの入れ子なのかがパッと見てわかるような記述ができます。


### ②変数が利用できる
CSSと大きく異なるのは変数が利用できることです。これを画面サイズの指定や、色の指定に使うことによって、記載が簡略化されたり、変更が容易になります。
```
/*SCSS記法(色の指定)*/
$main-color: #3498db;
$padding: 20px;

.button {
  background-color: $main-color;
  padding: $padding;
  color: white;
}
/*ブランドカラーを固定している時などは使い勝手がいいシステム*/

/*SCSS記法(サイズの指定)*/
$screen: mobile;
$breakpoint-mobile: 480px;
$breakpoint-tablet: 768px;

.container {
  @if $screen == mobile {
    @media (max-width: $breakpoint-mobile) {
      background: lightblue;
    }
  } @else if $screen == tablet {
    @media (max-width: $breakpoint-tablet) {
      background: lightgreen;
    }
  } @else {
    background: white;
  }
}
/*ブレークポイントも変数化でき、@ifを用いることで画面サイズに応じたスタイル分岐も可能*/
```

### ③ミックスイン（@mixin）が利用できる
よく使うスタイルのテンプレート（ひな型）を定義できる機能。
引数を使って柔軟に値を変更することができます。
```
@mixin button-style($bg-color, $text-color) {
  padding: 10px 20px;
  background-color: $bg-color;
  color: $text-color;
  border: none;
  border-radius: 5px;
}

.btn-primary {
  @include button-style(#3498db, white);
}

.btn-secondary {
  @include button-style(#95a5a6, black);
}

```
よく使われる項目：「**ボタンのスタイル**」や「**共通の枠・影・間隔**」

### ④ファイル分割をすることができる
CSSは基本的に、style.cssにのみスタイルを記載していきます。
Sassはこの後説明するコンパイルによって、scssファイルを分割しても1つのstyle.cssに変換してくれるので、以下の例のように、ファイルを分割して記載することができます。
```
//構造
scss/
├── _variables.scss    // 色・余白などの変数定義
├── _mixins.scss       // ミックスイン定義
├── _reset.scss        // リセットCSS
├── _header.scss       // ヘッダーのスタイル
├── _footer.scss       // フッターのスタイル
├── _buttons.scss      // ボタンスタイル
└── main.scss          // 上記すべてを読み込む中心ファイル

//main.scssに以下を記載することで、分割しても1つのcssに変換ができる
@use 'variables';
@use 'mixins';
@use 'reset';
@use 'header';
@use 'footer';
@use 'buttons';
```
**FLOCSS**などの設計と組み合わせることで、保守性の高い設計を作ることができる。
役割ごとにファイルを分割することで、修正がしやすくなったり、更新時の影響範囲が狭まるので、テストや確認がしやすい。

## コンパイルの仕方
先ほどコンパイルという言葉が出てきましたが、どういう意味でしょうか。

:::note info
**コンパイル**
scssファイルをcssファイルに変換する作業のこと。
:::

コンパイルの仕方は
- Live Sass Compiler（個人・小規模開発向け簡易版）
- Dart Sass
の2つが存在する。

### Live Sass Compiler
VSCodeに入れる拡張機能で、設定を行った後コーディングしていると、リアルタイムでCSSに変えてくれる。

**設定の流れ**
１、VScodeの拡張機能から「Live Sass Compiler（Glenn Marks）」をダウンロードする
２、　```.vscode/settings.json```に下記を記載する
※やり方
　作業ディレクトリの中に```.vscode```ディレクトリを作る
　```cmd+Shift+P```で開いた画面から```Preferences: Open User Settings(JSON)```を探して開く
　下記を記載する
　ファイル→名前をつけて保存→```.vscode```ディレクトリに保存する
```
settings.json

 {
    "workbench.colorTheme": "Visual Studio Dark - C++",
    "editor.formatOnSave": true,
    "diffEditor.ignoreTrimWhitespace": false,
    
    //以下を記載する
      "liveSassCompile.settings.formats": [
    {
      "format": "expanded", //出力形式（きれいに整形）
      "extensionName": ".min.css",// 出力ファイルの拡張子
      "savePath": "/asset/css" // 出力先のフォルダ
    }
  ]
}
```
**POINT**　元々記載されている{}内に追記すること

### Dart Sass
Sass公式が出している本物の変換ツールで、会社やチームで開発するときによく使う。
コマンドを使ってCSSに変換するものから、VScodeで簡単に変換できるものもある。
以下のサイトの説明がわかりやすかったので、添付します。

https://hirock-lab.com/blog/dartjs-sass-compiler-and-sass-watcher%E3%81%AE%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%AB%E6%96%B9%E6%B3%95/

## 結局Sassってどんな時に使うの？
以下の時に場合分けできると思います。
| 状況                   | Sassを使う理由              |
| -------------------- | ---------------------- |
| サイトのパーツが多く、CSSが長くなる  | コードを**分けたり再利用**しやすくなる  |
| 色やサイズが何度も出てくる        | **変数**を使って一括管理できる      |
| ボタンや枠線など、似たスタイルが多い   | **ミックスイン**でテンプレ化できる    |
| 複数人で開発している           | **整理しやすい構造**にできて保守しやすい |
| メディアクエリ（レスポンシブ）をよく使う | **入れ子で管理できる**ので見やすい    |

## 記法はどちらを使うの？
:::note info
**結論**
最近の主流は、CSSと同じ記述もでき、ネストでも書ける**SCSS記法**
:::
CSSと書き方が近いSCSS記法が主流として使用されています。


## まとめ
個人で開発する時、言ってしまえば分かりにくくても、自分がわかっていれば問題なかったりします。ただ開発は他の人・会社色々な人と協力して行うことがほとんどです。
そんな場面を経てチーム開発が円滑に進むよう、さまざまな手法が開発されていったんだなあ、と歴史を感じました :eyes: 
![Image_fx (7).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4065192/87302b57-a5b7-4879-8215-41568fb02c25.jpeg)