Go to Qiita Advent Calendar 2024 Top
LoginSignup
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

弥生Advent Calendar 2024

Day 19
@houchiey

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

Last updated at Posted at 2024-12-18

この記事は弥生 Advent Calendar 2024の19日目の記事です。

はじめに

私のプロジェクトではASP.NETを用いたWebアプリケーションを構築しており、スタイルはSassを利用して定義しています。
私自身のキャリアとして、ここ何年もバックエンドの開発がメインで、フロントエンドの知識はレガシー/モダンかかわらず至らない部分が多いです。
例に漏れずASP.NETでSassを扱うことにも若干躓きました。
というわけで、本記事では、ASP.NETでSassを使うための基礎知識について書いてみようと思います。

Sassとは

Syntactically Awesome Style Sheetsの略で、CSSを扱いやすくする目的で開発されたメタ言語です。生のCSSに比べて可読性が高く、より効率的にスタイル定義を行うことができます。

SASS記法とSCSS記法

Sassでは、SASS記法とSCSS記法、2種類の記法が使用できます。

SASS
$primary-color: #3498db

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

.outline-button
  background-color: $primary-color
  border: none
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;
}

比較

SASS記法 SCSS記法
特徴 インデントで表現する独自の記法 CSSをベースにした記法
メリット 記述量が抑えられる。シンプル。 CSSの資産を生かせる。CSSわかる人からすると直感的。

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

Sassでできること

代表的な機能について紹介します。

ネスト

CSSではクラスを並べて記述することで疑似的にネストを表現できますが、Sassでは直感的なネスト構造で記述ができます。

SCSS
.container {
  .header {
    color: blue;
  }
  .content {
    color: green;
  }
}

↓ コンパイル

CSS
.container .header {
  color: blue;
}

.container .content {
  color: green;
}

変数

Sassでは変数を定義することができます。これによって共通的なスタイルを一元管理することができます。

SCSS
$primary-color: #3498db;

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

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

↓ コンパイル

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

継承

@extend句で他のCSSクラスで定義されているスタイルを継承することができます。
継承によって、冗長なスタイルの記述を削減することができ、共通のスタイルを適用したいクラスを共通クラスとして管理することができます。

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
.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;
}

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

継承は便利ですが、乱用すると痛い目にあいそうです。1
BEMやSMACSS、FLOCSSといった設計思想をベースとしつつ、使いどころを見極めて使用する必要がありそうです。

ミックスイン

ミックスインは、継承と同じようにスタイルの再利用性を高める効果があります。
継承とは異なり、パラメータで動的にスタイルを変更できるため柔軟性が高いです。
また、@mixinで定義されたスタイルは@includeしたクラス内にのみ展開されます。したがって、スコープが限定的となり、継承ほど乱用厳禁な感じにはならなそうだと思いました。

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
.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

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

実際にサンプルのASP.NETプロジェクトを使って、SCSSファイルをコンパイルしたCSSを適用させてみようと思います。

サンプルプロジェクトについて説明

サンプルはASP.NET Coreで作成しています。
VisualStudio2022でASP.NET Core Webアプリテンプレートから作成しました。
image.png
テンプレートから作成されたプロジェクトで、Index.cshtmlにボタンを2つ（PRIMARY、SECONDARY）追加しています。
image.png

また、先ほどのミックスインの例で使ったSCSSファイルを使います。
button.scssというファイル名で、wwwroot/scssフォルダに作成しました。
image.png

まだ、ボタンにスタイルは当たっていないので、画面としてはこのようになります。
image.png

Sassを使えるようセットアップする

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

こちらの拡張機能は、Webフロントエンド開発で使用するファイルのコンパイル機能を提供するツールです。
Sassの他にも、JSXやTypescriptなどにも対応しています。

Web Compiler拡張機能のインストール

ツールバーの「拡張機能」から、拡張機能の管理を選択して拡張機能マネージャーを開きます。
左側の検索ボックスにwebcompilerと入力すると、Web Compilerが検索できますのでこちらをインストールします。
image.png

コンパイルしてみる

それでは、早速コンパイルしてみましょう。

今回はwwwroot/scssフォルダのbutton.scssをコンパイルしますので、こちらを右クリックします。
image.png]

Web Compiler拡張機能をインストールしましたので、コンテキストメニューに「Web Compiler」が追加されています。
こちらから「Compile file」を実行します。
image.png

コンパイルが実行され、SCSSファイルに連なる形でCSSファイルとminifyされたCSSファイルが作成されました。
image.png

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

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

このままではスタイルが読み込まれませんので、Index.cshtmlにスタイルの読み込みを追加します。
image.png

これでアプリケーションを起動して確認してみましょう。
image.png

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

SCSSを変更してみる

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

先ほどのSCSSから、secondary-buttonの色と丸みを変更しました。
image.png

SCSSファイルを保存しただけで、変更後のSCSSでCSSファイルがリコンパイルされました。
image.png

画面を確認してみましょう。
image.png

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

CSSファイルの出力先を変更する

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

Web Compiler 拡張機能でコンパイルを実行するとcompilerconfig.jsonが自動で作成されていることに気が付きます。
image.png

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

出力先を変更してみましょう。
compilerconfig.jsonでoutputFileのパスを変更します。
image.png

設定を変更するとすぐに、変更後のパスにCSSファイルが作成されました。
image.png

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

あとは、CSSファイルを読み込む先を変更して、
image.png

アプリケーションを実行してみます。
image.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を導入するメリットはあると思います。
そんな時に、少しでもこの記事が役に立つとうれしいです。

  1. https://qiita.com/y_hokkey/items/a746219dd688e18ac795 (古い記事ですが) ↩

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?