【Sass/SCSS】チュートリアル-変数とネスト

Posted at 2024-08-27

はじめに

皆さんこんにちは。
私は、独学でプログラミングを学習しているエンジニアの卵です。
とはいえ、中身は36歳のおじさんです。
それはさておき、記事の本題に入ります。
つい先日、Sassの環境構築が済みましたので、本格的にSassを学んでいきます。
本記事では、チュートリアルで学んだ事を記事にまとめました。
学習前の方はこちらの記事を参考にサクッと基礎を身につけちゃってください！
ちょっと長くなりそうなので２部に分けて書きます。もしかしたら３部まであるかも…。

※Sassの環境構築がまだの方はこちら。コンパイル方法も載せてます。
【Sass】環境構築やってみた

1．実行環境

私の実行環境は以下の通りとなります。
実行環境が違う場合でも記述方式は変わりませんので安心してください。
ただし、私が採用しているのはSCSS構文になりますので、Sass構文の方は他の記事を参考にしてください。

項目	Ver
Node.js	v20.16.0
Gulp	CLI v3.0.0 / Local v5.0.0
Sass	v1.77.8
dart2js ※DartSass	v3.4.4

2．SCSS構文とSass構文の違い

Sassには2つの構文スタイルがあり、それぞれSCSS構文とSass構文と呼ばれています。
これらは同じSassの機能を使えますが、記述方法が異なります。
以下はそれぞれの構文の違いです。

SCSS構文の特徴

・CSSと互換性がある
SCSSは、通常のCSSと互換性のある構文で、CSSに慣れた方にとって馴染みやすい構文スタイルとなります。

・波括弧( {} )とセミコロン( ; )を使用
波括弧( {} )とセミコロン( ; )を使用してCSSと同じように記述します。

（例）

scss

body {
  font: 100%  Helvetica, sans-serif;
  color: #333

  .container {
    margin: auto;
    padding: 10px;
    }
  }

Sass構文の特徴

・インデントベース
Sass構文は、インデント（空白）を使用してブロックの階層を示します。これにより、波括弧やセミコロンが不要となり、よりシンプルな記述が可能です。

・短い記述
波括弧やセミコロンを使わない為、コードが短くシンプルですが、インデントには注意が必要です。

（例）

sass

body
  font: 100%  Helvetica, sans-serif
  color: #333

  .container
    margin: auto
    padding: 10px

3．SCSSの基本構文

3.1.変数

・基本的な変数の使い方
変数を使用して再利用可能なスタイルを定義します。
SCSSの変数の定義は、ドル記号（＄）から始まります。
以下のコードは、変数$primary-colorにカラーコード、変数$fontにフォント形式を格納し、変数を使用してスタイルを適用しています。

・詳細な使い方
変数を使用することで、テーマカラーやフォントサイズなどを一箇所で管理できる為、メンテナンス性が向上します。

See the Pen Untitled by 丸山悠希 (@iwdulmiq-the-builder) on CodePen.

※1 "Result"ボタンを押すとプレビューが表示されます。
※2 SCSS欄の下部、"View Compiled"を押すとCSSにコンパイルされたコードを見ることができます。

3.2．ネスト

SCSSのネストは、CSSの階層構造を視覚的に表現する為のものです。通常のCSSではセレクタを繰り返して記述する必要がありますが、SCSSではネストを使って親子関係を表現できます。

・通常のCSS

CSS

nav {
    background-color: #333;
}

nav ul {
    list-style-type: none;
}

nav ul li {
    display: inline-block;
}

nav ul li a {
    color: white;
    text-decoration: none;
}

・SCSSでのネスト
親要素の中に子要素をネストさせることで、CSSの構造を分かりやすく整理します。

See the Pen Untitled by 丸山悠希 (@iwdulmiq-the-builder) on CodePen.

・詳細な使い方
疑似クラス・疑似要素のネスト
疑似クラスや疑似要素も親要素の中にネストできます。
アンパサンド(＆)記号を使うことで親要素を参照することができます。これにより疑似クラスのスタイルを適用することができます。

See the Pen Untitled by 丸山悠希 (@iwdulmiq-the-builder) on CodePen.

BEM(Block Element Modifier)記法のネスト
BEM記法に対して、スタイルを効率的に記述することができます。
BEM記法が分からない方は、下記に簡単な解説を用意してますので読んでみてください。

BEMの解説 ※クリックで開きます。

BEMとは、Block(ブロック) 、Element(エレメント)、 Modifier(修飾子)の略で、CSSの命名規則の一つです。それぞれの意味は以下の通りです。
・Block
独立した再利用可能なコンポーネントです。
例えば、ナビゲーションメニュー、ボタンなどが含まれます。

・Element
Blockの中に存在する一部の要素です。
例えば、ナビゲーションメニュー内のリストやボタンの中のテキストなどが該当します。

・Modifier
BlockやElementの状態やバリエーションを表すものです。
例えば、ボタンが大きい、ボタンがアクティブ状態であるなどです。

・記述方法
以下のようにBlockとElementを二つのアンダースコア(__)で繋ぎ、ElementとModifierを二つのセンターバー(--)で繋ぎます。

Block__Element--Modifier

それでは以下のSCSSコードを解説します。
.buttonクラスには、共通のスタイルを適用しています。
&--largeと&--smallは、それぞれの.buttonクラスにModifier(修飾子)を追加することで、それぞれに特定のスタイルを適用しています。
ちなみに(＆)記号は親クラス名をそのまま引き継ぎます。

See the Pen Untitled by 丸山悠希 (@iwdulmiq-the-builder) on CodePen.

4．まとめ

本記事では、変数とネストの使い方について解説しました。
変数を使うことでテーマカラーやフォントサイズなどを一箇所で管理することができます。スタイルの変更があった時は、変数の値を変えることで変更できますのでメンテナンスが楽ですね。
ネストは、CSSの階層構造を視覚的に表現できるため、可読性の向上に繋がります。ただし、深すぎるネストは逆効果となりますので、3～4層以上の深さにならないように注意しましょう。
Sassにはミックスイン、関数、継承などの機能があります。こちらに関しても記事にしたいと考えておりますので、読んでいただけると幸いです。
長々とありがとうございました。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

【Sass/SCSS】チュートリアル-変数とネスト

はじめに

目次

1．実行環境

2．SCSS構文とSass構文の違い

SCSS構文の特徴

Sass構文の特徴

3．SCSSの基本構文

3.1.変数

3.2．ネスト

4．まとめ