ASP.NETでSassを使うための基礎知識

この記事は[弥生 Advent Calendar 2024](https://qiita.com/advent-calendar/2024/yayoi)の19日目の記事です。
# はじめに
私のプロジェクトではASP.NETを用いたWebアプリケーションを構築しており、スタイルはSassを利用して定義しています。
私自身のキャリアとして、ここ何年もバックエンドの開発がメインで、フロントエンドの知識はレガシー/モダンかかわらず至らない部分が多いです。
例に漏れずASP.NETでSassを扱うことにも若干躓きました。
というわけで、本記事では、ASP.NETでSassを使うための基礎知識について書いてみようと思います。
# Sassとは
**S**yntactically **A**wesome **S**tyle **S**heetsの略で、CSSを扱いやすくする目的で開発されたメタ言語です。生のCSSに比べて可読性が高く、より効率的にスタイル定義を行うことができます。
## SASS記法とSCSS記法
Sassでは、SASS記法とSCSS記法、2種類の記法が使用できます。
```sass:SASS
$primary-color: #3498db

.solid-button
  background-color: $primary-color
  border: none

.outline-button
  background-color: $primary-color
  border: none
```
```scss:SCSS
$primary-color: #3498db;

.solid-button {
  background-color: $primary-color;
  border: none;
}

.outline-button {
  background-color: $primary-color;
  border: none;
}
```
どちらもコンパイルすると以下のCSSが出力されます。
```css:CSS
.solid-button {
  background-color: #3498db;
  border: none;
}
.outline-button {
  background-color: #3498db;
  border: none;
}
```
### 比較
|  | SASS記法 | SCSS記法 |
|:-:|:-:|:-:|
| 特徴 | インデントで表現する独自の記法 | CSSをベースにした記法 |
| メリット | 記述量が抑えられる。シンプル。  | CSSの資産を生かせる。CSSわかる人からすると直感的。  |

ChatGPTに聞くと、SASS記法はSassの初期に好まれていたようですが、
現在ではSCSS記法の方が一般的だそうです。

## Sassでできること
代表的な機能について紹介します。

### ネスト
CSSではクラスを並べて記述することで疑似的にネストを表現できますが、Sassでは直感的なネスト構造で記述ができます。
```scss:SCSS
.container {
  .header {
    color: blue;
  }
  .content {
    color: green;
  }
}
```
↓ コンパイル
```css:CSS
.container .header {
  color: blue;
}

.container .content {
  color: green;
}
```
### 変数
Sassでは変数を定義することができます。これによって共通的なスタイルを一元管理することができます。
```scss:SCSS
$primary-color: #3498db;

.solid-button {
  background-color: $primary-color;
  border: none;
}

.outline-button {
  background-color: $primary-color;
  border: none;
}
```
↓ コンパイル
```css:CSS
.solid-button {
  background-color: #3498db;
  border: none;
}
.outline-button {
  background-color: #3498db;
  border: none;
}
```
### 継承
`@extend`句で他のCSSクラスで定義されているスタイルを継承することができます。
継承によって、冗長なスタイルの記述を削減することができ、共通のスタイルを適用したいクラスを共通クラスとして管理することができます。
```scss:SCSS
%button-base {
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 5px;
}

.solid-button {
  @extend %button-base;
  background-color: #3498db;
  color: white;
  border: none;
}

.outline-button {
  @extend %button-base;
  background-color: transparent;
  color: #3498db;
  border: 2px solid #3498db;
}
```
↓ コンパイル
```css:CSS
.solid-button, .outline-button {
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 5px;
}

.solid-button {
  background-color: #3498db;
  color: white;
  border: none;
}

.outline-button {
  background-color: transparent;
  color: #3498db;
  border: 2px solid #3498db;
}
```

:::note
`%`はプレースホルダーセレクタと呼ばれるもので、こちらもSassの機能です。
こちらをつけておくことで、button-baseはコンパイル時にCSSクラスとして出力されません。
もちろん、`%`をつけずにCSSとして出力させることも可能です。
:::

:::note warn
継承は便利ですが、乱用すると痛い目にあいそうです。[^1]
BEMやSMACSS、FLOCSSといった設計思想をベースとしつつ、使いどころを見極めて使用する必要がありそうです。
:::
[^1]:https://qiita.com/y_hokkey/items/a746219dd688e18ac795 (古い記事ですが) 

### ミックスイン
ミックスインは、継承と同じようにスタイルの再利用性を高める効果があります。
継承とは異なり、パラメータで動的にスタイルを変更できるため柔軟性が高いです。
また、`@mixin`で定義されたスタイルは`@include`したクラス内にのみ展開されます。したがって、スコープが限定的となり、継承ほど乱用厳禁な感じにはならなそうだと思いました。
```scss:SCSS
@mixin button-style($color, $radius: 5px) {
  background-color: $color;
  border-radius: $radius;
  padding: 10px 20px;
  border: none;
  color: #fff;
  text-transform: uppercase;
}

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

.secondary-button {
  @include button-style(#2ecc71, 10px);
}
```
↓ コンパイル
```css:CSS
.primary-button {
  background-color: #3498db;
  border-radius: 5px;
  padding: 10px 20px;
  border: none;
  color: #fff;
  text-transform: uppercase;
}

.secondary-button {
  background-color: #2ecc71;
  border-radius: 10px;
  padding: 10px 20px;
  border: none;
  color: #fff;
  text-transform: uppercase;
}
```
# ASP.NETで使う
ここまでSassの機能について説明してきましたが、SASS記法やSCSS記法で記述されたファイルは、そのままではHTML（ASP.NETだとcshtml）では使うことができません。
SassコンパイルしてCSSを出力する必要があります。
![sass_compile.drawio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199870/67402dfa-2b7e-ac30-67f1-91ad4b56a9f0.png)

では、どのようにしてSassコンパイルを行えばいいでしょうか？

実際にサンプルのASP.NETプロジェクトを使って、SCSSファイルをコンパイルしたCSSを適用させてみようと思います。
## サンプルプロジェクトについて説明
サンプルはASP.NET Coreで作成しています。
VisualStudio2022でASP.NET Core Webアプリテンプレートから作成しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199870/ffb9fb99-90b4-2672-56b3-0df1235e0471.png)
テンプレートから作成されたプロジェクトで、Index.cshtmlにボタンを2つ（PRIMARY、SECONDARY）追加しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199870/cea6835b-eb0d-e946-a3e9-a8d874a42ba6.png)

また、先ほどのミックスインの例で使ったSCSSファイルを使います。
button.scssというファイル名で、wwwroot/scssフォルダに作成しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199870/c39a2cc3-ca6f-595d-1328-9d67e75ab2b5.png)

まだ、ボタンにスタイルは当たっていないので、画面としてはこのようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199870/45a5daa0-2fca-b5a4-9ec4-46d661085614.png)

## Sassを使えるようセットアップする
Visual StudioでSassコンパイルが行えるようにするには、
拡張機能であるWeb Compilerを使う方法があります。

https://marketplace.visualstudio.com/items?itemName=Failwyn.WebCompiler64

こちらの拡張機能は、Webフロントエンド開発で使用するファイルのコンパイル機能を提供するツールです。
Sassの他にも、JSXやTypescriptなどにも対応しています。
### Web Compiler拡張機能のインストール
ツールバーの「拡張機能」から、拡張機能の管理を選択して拡張機能マネージャーを開きます。
左側の検索ボックスに`webcompiler`と入力すると、Web Compilerが検索できますのでこちらをインストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199870/baada7ff-090d-f1b6-0429-b02a9464dd91.png)
### コンパイルしてみる
それでは、早速コンパイルしてみましょう。

今回はwwwroot/scssフォルダのbutton.scssをコンパイルしますので、こちらを右クリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199870/686e1b62-591d-0d71-98db-d67e30163d52.png)]

Web Compiler拡張機能をインストールしましたので、コンテキストメニューに「Web Compiler」が追加されています。
こちらから「Compile file」を実行します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199870/64b37a1c-bf2c-1f46-b216-fbbc46994299.png)

コンパイルが実行され、SCSSファイルに連なる形でCSSファイルとminifyされたCSSファイルが作成されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199870/82898f63-1bb1-3c39-84cb-3da267e785e1.png)

実際には、SCSSファイルと同じフォルダにコンパイル後ファイルが作成されています。
```powershell
ls

    Directory: D:\source\ASP.NETSassSample\SassSample.NETCore\wwwroot\scss

Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
-a---          2024/12/16    22:44            313 button.css
-a---          2024/12/16    22:44            252 button.min.css
-a---          2024/12/13    23:13            335 button.scss
```

CSSファイルの中身はこんな感じです。先ほどのミックスインの例で示したCSSのようになっていますね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199870/00ffa851-a2fe-ce26-1774-8e49cbcb8e64.png)

このままではスタイルが読み込まれませんので、Index.cshtmlにスタイルの読み込みを追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199870/8a67f530-c81f-86b0-e015-66f7c6f45ef0.png)

これでアプリケーションを起動して確認してみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199870/55f72a40-0d38-4cf3-8ab8-0a9cd7c75a62.png)

無事にスタイルが適用されました。

### SCSSを変更してみる
SCSSファイル更新時の動きを確認してみましょう。

先ほどのSCSSから、secondary-buttonの色と丸みを変更しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199870/acab5481-4615-9566-4a09-941db937a39a.png)

SCSSファイルを保存しただけで、変更後のSCSSでCSSファイルがリコンパイルされました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199870/62d39a65-55d8-3128-9a00-6c6dce92be3e.png)

画面を確認してみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199870/4e45b872-af24-428c-e104-7bcf7a2352f2.png)

SCSSファイル変更時に自動でリコンパイルされることがわかりました。

### CSSファイルの出力先を変更する
今の状態だとSCSSファイルと同じフォルダにコンパイルされたCSSファイルが出力されてしまいます。
wwwroot/scssフォルダ内にCSSファイルがあるのはちょっと気持ち悪いですね。
CSSファイルは別フォルダに出力したい場合はどうすればよいでしょうか？

Web Compiler 拡張機能でコンパイルを実行すると`compilerconfig.json`が自動で作成されていることに気が付きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199870/ee15b40a-ff5f-0ecb-aa51-d23dc94b7d94.png)

こちらのconfigファイルでコンパイルの挙動を設定することができます。

出力先を変更してみましょう。
`compilerconfig.json`で`outputFile`のパスを変更します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199870/f481bf9b-06e5-60ae-96d8-6a359b2059e8.png)

設定を変更するとすぐに、変更後のパスにCSSファイルが作成されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199870/19d9362e-c1c0-0174-aea8-7b69d7813f09.png)

注意点としては、元のCSSファイルは残ってしまうためこちらは自分で削除する必要があります。

あとは、CSSファイルを読み込む先を変更して、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199870/21a32d49-8dd5-6853-00fc-647f477ed369.png)

アプリケーションを実行してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199870/a59a299c-0eb5-6d43-4d6b-b57d4d786021.png)

問題なくスタイルが適用されていますね。

## まとめ
VisualStudioの拡張機能を使うことで、とても簡単にASP.NETプロジェクトにSassを組み込むことができました。
具体的には以下のステップを踏むだけで、基本的なセットアップができました。
- Web Compiler 拡張機能をインストール
- SCSSファイルを右クリック→Web Compilerメニューからコンパイル
- 必要に応じて`compilerconfig.json`で設定を調整

今回使用したサンプルソースは下記にて参照することができます。
https://github.com/houchiey/SassSample.NETCore

# さいごに
Sassの基本的なところとASP.NETで導入する際の基本的な設定について説明してみましたが、いかがでしたでしょうか。

調べてみると、ASP.NETとSassという組み合わせの記事って意外と少なくプロジェクトで躓いた時もちょっと苦労しました。
近年のモダンフロントエンド構築にはReactなどのフレームワークを活用するのが一般的かとは思いますが、ASP.NETで画面まで構築する際にも、生のCSSではなくSassを導入するメリットはあると思います。
そんな時に、少しでもこの記事が役に立つとうれしいです。