はじめに
今回、Sass(SCSS)の概要についてと、Sassを使用したローダーアニメーションを作る方法について書いてみました。
なお、本記事の作成にあたって
Sassドキュメント
ガチで学びたい人のためのWEB開発実践入門（フロントエンド編）
を参考にしています。
この記事の読者対象
- Webサイトにアニメーションを追加したい方
- CSSがある程度理解している方
- Sassの環境構築や使用方法について学びたい方
- Node.jsとnpmのインストールが済んでいる方
環境
Mac: Ventura 13.3.1
Visual Studio Code
SCSS: dart-sassを使用します。
Sassとは
Sass（Syntactically Awesome Stylesheets）は、CSSをより強力で効率的にするためのスクリプト言語です。Sassの主な特徴は変数、ミキシン、ネスト、セレクタの継承などで、これによりコードの再利用、維持、拡張が容易になります。
Sassの導入メリット
1: 作業効率の向上
Sassを導入することで、最初に感じるであろうメリットは、作業効率が上がることです。CSSと比較して、Sassではコードの記述量が大幅に少なくなります。これは、ネスト機能や変数、ミックスインなどの高度な機能を活用することで可能になります。これらの機能は、一度定義しておけば何度でも再利用できるため、複雑なコードの記述や管理が非常に楽になります。これらの機能を活用することで、一度Sassを使うと、もはや元のCSSのベタ書きには戻れなくなるでしょう。
2: メンテナンス性の向上
また、Sassの導入はメンテナンス性の向上にもつながります。Sassでは、サイトのメインカラーやサブカラー、コンテナの幅など、頻繁に使用する値を変数として定義しておくことができます。それにより、「メインカラーを赤からオレンジに変更したい」というような要望が後から出てきた場合でも、変数の値を1箇所変更するだけで対応することができます。一方、通常のCSSでは、修正する箇所を全て見つけ出して変更する必要があります。そのため、Sassを使用することで、後からの修正に強く、メンテナンス性が大幅に向上します。
Sassの歴史
lib-sass
LibSassは、SassのC/C++実装で、オリジナルのRuby実装よりもパフォーマンスが高く、Ruby環境が必要ないという利点がありました。しかし、Ruby Sassの新機能の追従が難しく、2019年に開発が停止されました。
node-sass
Node-sassは、LibSassをNode.js環境で使うためのラッパーで、npmを通じて簡単にインストールできました。しかし、LibSassの開発が停止したため、Node-sassも2020年に開発が停止されました。
dart-sass
Dart Sassは、現在推奨されているSassの実装で、Dartで書かれています。Dart SassはSassの新機能を最初に実装するため、最新のSass機能を使う場合はDart Sassを使用することが推奨されています。
※以降の説明ではdart-sassを使用します。
Sassの環境構築
Sassを使うためには、まずコンピュータにNode.jsとnpmがインストールされていることを確認してください。Node.jsはJavaScriptを実行するためのプラットフォームで、npmはJavaScriptのパッケージマネージャです。これらはSassをコンパイルするために必要です。
1: Node.jsとnpmのインストール: Node.jsとnpmは一緒にインストールされます。Node.jsの公式ウェブサイトからダウンロードしてインストールできます。
※ここは完了している前提で進めていきます。
2: Sassのインストール: Node.jsとnpmがインストールされたら、次にSassをインストールします。コマンドラインを開いて以下のコマンドを実行します。
npm install -g sass
これにより、Sassがグローバルにインストールされ、どのディレクトリからでも利用できるようになります。
3: Sassの使用: Sassがインストールされたら、次にSassファイルをCSSにコンパイルします。これは以下のコマンドで実行できます。
sass input.scss output.css
ここでinput.scssはSassファイルの名前（パス含む）で、output.cssは生成されるCSSファイルの名前（パス含む）です。このコマンドを実行すると、SassファイルがCSSファイルに変換され、指定した場所に保存されます。
また、Sassにはウォッチモードという機能もあります。これを使用すると、Sassファイルの変更をリアルタイムで監視し、ファイルが変更されるたびに自動的にCSSファイルを更新します。ウォッチモードを使用するには、以下のコマンドを実行します。
sass --watch input.scss:output.css
これでSassの環境構築は完了です。
VSCodeの拡張機能で自動コンパイルする
Visual Studio CodeのLive Sass Compiler拡張機能は、Sassファイルを保存すると自動的にCSSにコンパイルする機能を提供します。これはターミナルでsass --watch input.scss:output.cssを実行するのと同じ監視モードです。したがって、Live Sass Compilerを使用すれば、ターミナルで毎回コマンドを打つ必要がなくなります。
ただし、Visual Studio CodeのLive Sass Compilerを使うためには、Visual Studio Codeがインストールされていること、そしてLive Sass Compiler拡張機能がインストール・有効化されていることが必要です。
ScssとSassの違い
最初に作られたのがSASS記法（.sass）で、後に作られたのがSCSS記法（.scss）になり、一般的にSCSS記法の方が広く普及しています。
Scss
.example {
color: blue;
}
Sass
.example
color: blue
ScssとSassは同じ機能と能力を持っています。つまり、変数、ネスト、ミキシン、インポートなど、どちらの構文を使用しても利用できます。
アニメーションでローダーを作成
アニメーションを使用してローダーを作成する方法について説明します。ここでは、HTMLとloader.scssファイルを使用します。
まず、HTMLに記述されているthree-dot-spinnerクラスの各要素に対して、Sassでアニメーションを定義します。この例では、3つの点（bounce1、bounce2、bounce3）が順に拡大・縮小するアニメーションを作成します。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="loader.css">
</head>
<body>
<div class="three-dot-spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
</body>
</html>
このアニメーションを作成するには、loader.scssファイルに次のように記述します。
$cBlack: black;
.three-dot-spinner {
text-align: center;
& div {
display: inline-block;
width: 18px;
height: 18px;
background-color: $cBlack;
border-radius: 50%;
animation: sk-bouncedelay 1.4s infinite;
}
& .bounce1 {
animation-delay: -0.32s;
}
& .bounce2 {
animation-delay: -0.16s;
}
& .bounce3 {
animation-delay: 0s;
}
}
@keyframes sk-bouncedelay {
0%, 80%, 100% {
transform: scale(0);
}
40% {
transform: scale(1);
}
}
このコードでは、まず$cBlackという変数を定義しています。この変数は、ローダーの点の色を指定するために使用されます。
その後、three-dot-spinnerクラスの中で3つの点（div要素）に対するスタイルを定義しています。それぞれの点は、インラインブロックとして表示され、幅と高さが18px、背景色が黒、形状が円形（border-radius: 50%）であり、sk-bouncedelayという名前のアニメーションが無限に適用されます。
次に、各点に対して異なるアニメーションの遅延時間（animation-delay）を設定します。これにより、各点が順番にアニメーションを開始し、3つの点が連続して跳ねるように見えます。
最後に、keyframesディレクティブを使用してsk-bouncedelayアニメーションを定義します。このアニメーションでは、0%、80%、100%の時間で点の大きさを0（見えない状態）にし、40%の時間で点の大きさを1（最大）にします。これにより、各点が順番に拡大・縮小するアニメーションが作成されます。
以上が、Sassを使用してアニメーションローダーを作成する手順です。この手順を踏むことで、ユーザーにとって視覚的に魅力的なウェブサイトを作成することができます。
ちなみにSassをコンパイルすると、loader.cssと、loader.css.mapが自動的に作成されます。
ここに関しては直接記述することはないです。
loader.css
(自動生成される)
.three-dot-spinner {
text-align: center;
}
.three-dot-spinner div {
display: inline-block;
width: 18px;
height: 18px;
background-color: black;
border-radius: 50%;
animation: sk-bouncedelay 1.4s infinite;
}
.three-dot-spinner .bounce1 {
animation-delay: -0.32s;
}
.three-dot-spinner .bounce2 {
animation-delay: -0.16s;
}
@keyframes sk-bouncedelay {
0% {
transform: scale(0);
}
40% {
transform: scale(1);
}
80% {
transform: scale(0);
}
100% {
transform: scale(0);
}
}/*# sourceMappingURL=loader.css.map */
Sassの利点と欠点
さて、ここまででSassの基本的な機能とその使い方について説明しました。しかし、すべての開発者やプロジェクトにとってSassが必ずしも最良の選択肢であるわけではありません。次に、Sassの利点と欠点について詳しく見てみましょう。
利点
効率性: Sassはコードの再利用性を高め、重複を減らします。これにより、開発者はより少ない時間と労力でCSSを書くことができます。
可読性と保守性: ネスト、変数、ミキシンなどの機能により、Sassは大規模なスタイルシートの可読性と保守性を向上させます。
高度な機能: Sassは、制御ディレクティブ（if、for、eachなど）、関数、色の操作など、CSSにはない高度な機能を提供します。これにより、より複雑なスタイルシートを簡単に作成できます。
欠点
学習コスト: Sassは新しい構文と概念を導入するため、学習には時間と労力が必要です。
コンパイル時間: 大規模なプロジェクトでは、Sassファイルのコンパイルに時間がかかることがあります。
デバッグ: CSSと違い、ブラウザはSassを直接解釈できません。そのため、エラーが発生した場合、デバッグは少々困難になることがあります。しかし、ソースマップの利用によりこの問題はある程度緩和できます。