SASSの基本
この記事ではSASSの基本について説明します。
SASSの基本機能をステップバイステップで解説し、実践的なサンプルコードを用いてその使い方を説明します。
YouTube Video
SASSの基本
SASS（Syntactically Awesome Stylesheets）は、CSSを拡張するためのスタイルシート言語です。SASSを使用することで、変数、ネスト、ミックスイン、継承など、CSSでは提供されていない高度な機能を利用できます。それにより、スタイルシートの管理と再利用が容易になります。
SASSとは
SASSは、CSSの記述を簡略化しつつ、より柔軟で強力なスタイルを定義できる言語です。SCSS（Sassy CSS）という形式も提供しており、これはCSSに近い構文を持っています。以下はその例です。
SCSS例
1$base-font: Arial, sans-serif;
2$bg-color: #f4f4f4;
3
4body {
5 font-family: $base-font;
6 background-color: $bg-color;
7}CSS例
1body {
2 font-family: Arial, sans-serif;
3 background-color: #f4f4f4;
4}SASSのセットアップ
インストール方法
SASSを使用するには、まずNode.jsをインストールし、以下のコマンドを使用してSASSをインストールします。
1npm install -g sassコンパイル方法
SASSファイル（.scss または .sass）をCSSに変換するには、以下のコマンドを使用します。
1sass input.scss output.cssまた、watchオプションを使用すると、ファイルの変更を監視して、リアルタイムで変換を行うことができます。
変数
SASSでは変数を使用して、色やフォントサイズなどの値を再利用できます。
サンプルコード
1$primary-color: #3498db;
2$font-stack: 'Roboto', sans-serif;
3
4body {
5 color: $primary-color;
6 font-family: $font-stack;
7}- このコードは、SASSの変数を使って色やフォントを定義し、
bodyセレクタ内で再利用することで、スタイルの一貫性と保守性を高めています。
コンパイル結果
1body {
2 color: #3498db;
3 font-family: 'Roboto', sans-serif;
4}ネスト
SASSは、CSSセレクタをネストすることで、コードの可読性を向上させます。
サンプルコード
1nav {
2 ul {
3 list-style: none;
4 margin: 0;
5 padding: 0;
6
7 li {
8 display: inline-block;
9
10 a {
11 text-decoration: none;
12 color: #333;
13
14 &:hover {
15 color: #3498db;
16 }
17 }
18 }
19 }
20}- このコードは、階層構造をネストして記述し、スタイルの構造を視覚的にわかりやすくしています。
コンパイル結果
1nav ul {
2 list-style: none;
3 margin: 0;
4 padding: 0;
5}
6
7nav ul li {
8 display: inline-block;
9}
10
11nav ul li a {
12 text-decoration: none;
13 color: #333;
14}
15
16nav ul li a:hover {
17 color: #3498db;
18}ミックスイン
ミックスインを使用すると、複数のセレクタ間でコードを再利用できます。
サンプルコード
1@mixin border-radius($radius) {
2 border-radius: $radius;
3 -webkit-border-radius: $radius;
4 -moz-border-radius: $radius;
5}
6
7button {
8 @include border-radius(10px);
9}
10
11.card {
12 @include border-radius(5px);
13}- このコードは、
@mixinで定義したborder-radiusのスタイルをbuttonと.cardに@includeを使って再利用し、重複のない効率的なスタイル記述を実現しています。
コンパイル結果
1button {
2 border-radius: 10px;
3 -webkit-border-radius: 10px;
4 -moz-border-radius: 10px;
5}
6
7.card {
8 border-radius: 5px;
9 -webkit-border-radius: 5px;
10 -moz-border-radius: 5px;
11}継承（@extend）
継承を使用すると、既存のスタイルを他のセレクタに適用できます。
サンプルコード
1%button-style {
2 padding: 10px 20px;
3 color: white;
4 background-color: #3498db;
5}
6
7button {
8 @extend %button-style;
9 border: none;
10}
11
12.link-button {
13 @extend %button-style;
14 text-decoration: none;
15}- このコードは、
%button-styleというプレースホルダーセレクタを定義し、@extendを使ってbuttonと.link-buttonに共通のスタイルを継承させることで、スタイルの再利用と一貫性を実現しています。
コンパイル結果
1button, .link-button {
2 padding: 10px 20px;
3 color: white;
4 background-color: #3498db;
5}
6
7button {
8 border: none;
9}
10
11.link-button {
12 text-decoration: none;
13}条件分岐とループ
SASSでは条件分岐やループを使用して、動的にスタイルを生成できます。
条件分岐の例
1$theme: dark;
2
3body {
4 background-color: if($theme == light, #fff, #333);
5 color: if($theme == light, #333, #fff);
6}- このコードは、SASSの
if関数を使って$themeの値に応じて背景色と文字色を切り替え、条件分岐によるスタイルの動的生成を実現しています。
ループの例
1@for $i from 1 through 3 {
2 .column-#{$i} {
3 width: calc(100% / $i);
4 }
5}- このコードは、SASSの
@forループを使って.column-1から.column-3までのクラスを動的に生成しています。
コンパイル結果
1body {
2 background-color: #333;
3 color: #fff;
4}
5
6.column-1 {
7 width: 100%;
8}
9
10.column-2 {
11 width: 50%;
12}
13
14.column-3 {
15 width: 33.3333%;
16}ファイルの分割とインポート
SASSではファイルを分割し、@useまたは@importを使用して再利用できます。
ファイル構成
styles/
_variables.scss
_mixins.scss
main.scss_variables.scss
1$primary-color: #3498db;_mixins.scss
1@mixin flex-center {
2 display: flex;
3 justify-content: center;
4 align-items: center;
5}main.scss
1@use 'variables';
2@use 'mixins';
3
4header {
5 background-color: variables.$primary-color;
6 @include mixins.flex-center;
7}コンパイル結果
1header {
2 background-color: #3498db;
3 display: flex;
4 justify-content: center;
5 align-items: center;
6}まとめ
SASSを活用することで、CSSの記述を効率化し、コードの再利用性や保守性を向上させることができます。
YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。