PORTFOLIO & WEB DESIGN MEMORANDOM BLOG   
PORTFOLIO & WEB DESIGN MEMORANDOM BLOG   

【CSS】SCSSの基礎

タグ :

SCSSの入れ子構造

入れ子構造（ネスト構造） とは、親要素の中に子要素のスタイルを書くことで、
階層構造を視覚的にわかりやすくする SCSSの特徴です。

例：ネストあり

  2. .card {
  3.   background: #fff;
  4.   padding: 20px;
  6.   .title {
  7.     font-size: 18px;
  8.     font-weight: bold;
  9.   }
  11.   .text {
  12.     color: #555;
  13.   }
  14. }

↑をCSSに変換

  2. .card {
  3.   background: #fff;
  4.   padding: 20px;
  5. }
  7. .card .title {
  8.   font-size: 18px;
  9.   font-weight: bold;
  10. }
  12. .card .text {
  13.   color: #555;
  14. }

◆ネストの利点（メリット）

1. 親子関係が見やすい
• .card の中の .title や .text が直感的にわかる。

2. 構造が自然に反映される
• HTMLの階層と同じようにSCSSが書ける。

3. 記述が短くなる
• 親クラスを何度も書かなくてよい。

ネストの注意点・デメリット

•ネストが深くなりすぎると危険

  2. .header {
  3.   .nav {
  4.     ul {
  5.       li {
  6.         a {
  7.           span {
  8.             color: red;
  9.           }
  10.         }
  11.       }
  12.     }
  13.   }
  14. }

↑をCSSに変換

  2. .header .nav ul li a span {
  3.   color: red;
  4. }

保守性が悪くなり、セレクタも重く なります。

◆ 推奨ルール

• ネストは 2〜3階層まで に抑える。
• コンポーネント単位で分けて、責任を分離する。

よく使うネスト構文

& アンパサンド（親セレクタの再利用）

  2. .button {
  3.   color: #000;
  5.   &:hover {
  6.     color: #fff;
  7.     background: #000;
  8.   }
  10.   &.is-active {
  11.     border: 1px solid blue;
  12.   }
  13. }

↑をCSSに変換

  2. .button {
  3.   color: #000;
  4. }
  6. .button:hover {
  7.   color: #fff;
  8.   background: #000;
  9. }
  11. .button.is-active {
  12.   border: 1px solid blue;
  13. }

SCSS（Sass）の変数設定

SCSS（Sass）の変数は、値を再利用可能にして、スタイルの保守性を高めるための非常に便利な機能です。
色、フォントサイズ、余白、ブレークポイントなど、さまざまな値を変数として定義できます。

基本構文

  2. $変数名: 値;

  2. $primary-color: #3498db;
  3. $font-stack: 'Helvetica Neue', sans-serif;
  4. $padding-base: 16px;

使用方法

  2. body {
  3.   font-family: $font-stack;
  4.   background-color: $primary-color;
  5.   padding: $padding-base;
  6. }

よく使う変数の例

  2. // カラーパレット
  3. $color-primary: #1abc9c;
  4. $color-secondary: #2ecc71;
  5. $color-accent: #e74c3c;
  6. $color-text: #333;
  7. $color-bg: #f9f9f9;
  9. // フォントサイズ
  10. $font-size-base: 16px;
  11. $font-size-large: 20px;
  12. $font-size-small: 12px;
  14. // スペーシング
  15. $spacing-sm: 8px;
  16. $spacing-md: 16px;
  17. $spacing-lg: 32px;
  19. // ブレークポイント
  20. $breakpoint-sm: 576px;
  21. $breakpoint-md: 768px;
  22. $breakpoint-lg: 992px;
  23. $breakpoint-xl: 1200px;

実用サンプル

  2. $color-primary: #007bff;
  3. $font-size-base: 16px;
  4. $padding-base: 1rem;
  6. .button {
  7.   background-color: $color-primary;
  8.   color: white;
  9.   font-size: $font-size-base;
  10.   padding: $padding-base;
  11.   border: none;
  12.   border-radius: 4px;
  14.   &:hover {
  15.     background-color: darken($color-primary, 10%);
  16.   }
  17. }

SCSS変数のメリット

1.保守性の向上
一箇所の変更で全体に影響を与えられる

2.デザインの一貫性
色やフォントなどを統一できる

3.チーム開発で便利
命名規則に沿えば他の人でも直感的に理解しやすい

FLOCSS や BEM と組み合わせた SCSS の変数管理方法

FLOCSS（ファイル構成ルール）とは

FLOCSS（Folder + Layout + Object + Component + Project）では、次のようにファイルを分けて管理します。

  2. /scss/
  3.   ├── foundation/ // 基本設定（変数やmixinなど）
  4.   ├── layout/ // ヘッダーやフッターなどのレイアウトパーツ
  5.   ├── object/
  6.   │ ├── component/ // UIコンポーネント（ボタンなど）
  7.   │ ├── project/ // プロジェクト固有のモジュール
  8.   │ └── utility/ // ヘルパークラス（margin調整など）
  9.   └── style.scss // メインの読み込みファイル

BEM（命名規則）について

BEMは、クラス名を以下の形式で管理します。

BEMにおける –（ダブルハイフン）と __（ダブルアンダースコア）は、
それぞれ役割がまったく違うので、しっかり区別することが重要です。

◆ __（ダブルアンダースコア）：Element（要素）

• 「Blockの中の構成要素」を表します。
• Blockが親で、Elementはその部分的なパーツ。
• ElementはBlockがなければ存在できないものです。

  2. .card {} // Block
  3. .card__title {} // Element（カードの中のタイトル）
  4. .card__image {} // Element（画像）

◆ –（ダブルハイフン）：Modifier（修飾子）

• BlockやElementの状態やバリエーションを表します。
• 色違い・サイズ違い・アクティブ状態など。
• 基本構造に意味のある変化を加えるものです。

  2. .button {} // Block
  3. .button--large {} // Modifier（大きいサイズのバリエーション）
  4. .button--secondary {} // Modifier（色の違い）

◆ 組み合わせた例

  2. <div class="card card--featured">
  3.   <h2 class="card__title">タイトル</h2>
  4.   <img class="card__image" src="..." />
  5. </div>

• .card → Block
• .card__title → Element（タイトル部分）
• .card–featured → Modifier（特別な装飾付き）

◆ 覚え方のコツ

__アンダースコア・・・部品（構成要素）

–ハイフン・・・バリエーション（状態変更）

  2. .card__title--large {} // ElementにもModifierをつけられる

FLOCSS + BEM における変数の管理方法

1. foundation/_variables.scss にすべての変数をまとめる

  2. // colors
  3. $color-primary: #3498db;
  4. $color-secondary: #2ecc71;
  5. $color-text: #333;
  6. $color-white: #fff;
  7. $color-bg: #f5f5f5;
  9. // font sizes
  10. $font-size-base: 16px;
  11. $font-size-sm: 14px;
  12. $font-size-lg: 20px;
  14. // spacing
  15. $space-xs: 4px;
  16. $space-sm: 8px;
  17. $space-md: 16px;
  18. $space-lg: 32px;
  20. // breakpoints
  21. $breakpoint-sm: 576px;
  22. $breakpoint-md: 768px;
  23. $breakpoint-lg: 992px;

2. foundation/_mixin.scss で共通処理を定義（例：メディアクエリ）

  2. // colors
  3. @mixin mq($breakpoint) {
  4.   @if $breakpoint == sm {
  5.     @media (min-width: $breakpoint-sm) { @content; }
  6.   } @else if $breakpoint == md {
  7.     @media (min-width: $breakpoint-md) { @content; }
  8.   } @else if $breakpoint == lg {
  9.     @media (min-width: $breakpoint-lg) { @content; }
  10.   }
  11. }

3. _button.scss（component）で変数を使ったBEMスタイル

  2. // object/component/_button.scss
  4. .button {
  5.   display: inline-block;
  6.   font-size: $font-size-base;
  7.   padding: $space-sm $space-md;
  8.   background-color: $color-primary;
  9.   color: $color-white;
  10.   border-radius: 4px;
  11.   text-align: center;
  13.   &--secondary {
  14.     background-color: $color-secondary;
  15.   }
  17.   &--large {
  18.     font-size: $font-size-lg;
  19.     padding: $space-md $space-lg;
  20.   }
  22.   &:hover {
  23.     opacity: 0.8;
  24.   }
  25. }

4. style.scss ですべてを読み込む

  2. // style.scss
  4. @import "foundation/variables";
  5. @import "foundation/mixin";
  7. @import "layout/header";
  8. @import "layout/footer";
  10. @import "object/component/button";
  11. @import "object/project/home";

命名＆変数のルール

◆ 色
命名ルール例：$color-primary
補足：役割に基づく命名が基本

◆ サイズ
命名ルール例：$font-size-base
補足：_base, _sm, _lg など

◆ 余白
命名ルール例：$space-sm
補足：スケール単位で統一

◆ BEMクラス名
命名ルール例：.block__element–mod
補足：FLOCSS内の各componentで使用

SCSSの@importとは？

  2. @import 'filename';

•拡張子 .scss や _（アンダースコア）は省略可能。
•SCSSファイルを分割して管理でき、1つにまとめて読み込めます。

◆ ファイル構成

  2. /scss
  3.   ├── _variables.scss
  4.   ├── _mixins.scss
  5.   └── main.scss

  2. // main.scss
  3. @import 'variables';
  4. @import 'mixins';
  6. body {
  7.   background-color: $main-bg;
  8. }

★ 今までの@importはもう古い！これからは@use使う！

これまでは@importでファイルを読み込んでいましたが、Sass公式では今後使わないように！と言っています。

@useの使い方

SCSSファイルを読み込む新しい書き方です。

  2. @use 'ファイル名';

読み込んだファイルの中身を「ファイル名.変数名」で使う

  2. // _variables.scss
  3. $main-color: #ff6600;

  2. // main.scss
  3. @use 'variables';
  5. body {
  6.   color: variables.$main-color;
  7. }

variables.$main-color みたいに「どのファイルの変数か」分かるように書くのがルールです。

@forwardも使う！

これは、「他のファイルの中身をまとめて渡す」ために使います。

FLOCSSのように、たくさんファイルがあるときに便利！

ファイルの構成

  2. scss/
  3. ├── foundation/
  4. │ ├── _variables.scss
  5. │ ├── _reset.scss
  6. │ └── _index.scss ← ここにまとめる！
  7. └── main.scss

① _variables.scss

  2. $main-color: #007acc;

② _reset.scss

  2. * {
  3.   margin: 0;
  4.   padding: 0;
  5. }

③ _index.scss ← ここに@forwardを使ってまとめる！

  2. @forward 'variables';
  3. @forward 'reset';

④ main.scss ← ここで@useするだけでOK！

  2. @use './foundation/index' as foundation;
  4. body {
  5.   color: foundation.$main-color;
  6. }

「foundation」という名前でまとめて読み込める。

まとめ

機能：@use
目的：読み込む
書き方：@use ‘ファイル名’;
ポイント：名前空間が必要！

機能：@forward
目的：まとめて渡す
書き方：@forward ‘ファイル名’;
ポイント：インデックスファイルで使う

このやり方で書く利点

•ファイルがスッキリ整理できる
•変数の場所が分かりやすい
•エラーが減る！

SCSSのリスト機能とループ処理（@each）を使って、同じパターンのクラスを自動生成する方法

  2. $colors: red, blue, green;
  4. @each $color in $colors {
  5.   .text-#{$color} {
  6.     color: $color;
  7.   }
  8. }

↑をCSSに変換

  2. .text-red {
  3.   color: red;
  4. }
  6. .text-blue {
  7.   color: blue;
  8. }
  10. .text-green {
  11.   color: green;
  12. }

解説

① $colors: red, blue, green;

これはSassのリスト（配列のようなもの）です。
変数 $colors に red, blue, green の3つの色を格納しています。

② @each $color in $colors { … }

これはループ構文です。
リストの中身を1つずつ $color に代入して、ブロックの中の処理を繰り返します。

③ .text-#{$color}

ここで使われている #{$color} は「変数の値を展開する（=文字列の中に埋め込む）」という意味です。

.text-#{$color}は、それぞれ：
• .text-red
• .text-blue
• .text-green

というクラス名に変換されます。

④ color: $color;

これも $color に代入された値を使って、color: red; などに展開します。

Sass（SCSS）の @mixin と @includeについて

@mixinとは？

  2. @mixin border-radius {
  3.   border-radius: 8px;
  4. }

これは「共通して使いたいスタイルをまとめておく場所」です。
HTMLでいう「部品の型」みたいなものです。

@includeとは？

「@mixinを呼び出して使う」ものです。

  2. .box {
  3.   @include border-radius;
  4. }

これは、さきほど作った @mixin の中身（border-radius: 8px;）を、
.box の中で呼び出して使うことを意味します。

つまりこういう関係

  2. @mixin → 型（レシピ）
  3. @include → 呼び出し（料理する）

実用的な例：引数を使っての応用

  2. // 1. 使い回したいスタイル（mixin定義）
  3. @mixin font($size, $weight) {
  4.   font-size: $size;
  5.   font-weight: $weight;
  6. }
  8. // 2. 必要な場所で呼び出し（include）
  9. .title {
  10.   @include font(24px, bold);
  11. }

↑をCSSに変換

  2. .title {
  3.   font-size: 24px;
  4.   font-weight: bold;
  5. }

@mixin と @includeの利便性

• 同じスタイルを何度も書かなくてよくなる
• 値を引数で変えられるので柔軟に再利用できる
• 管理しやすく、修正も一か所で済む（メンテ性アップ）

よく使われる @mixin サンプル

① ボーダー・角丸

  2. @mixin rounded($radius: 4px) {
  3.   border-radius: $radius;
  4. }

  2. .card {
  3.   @include rounded(8px);
  4. }

ここで ($radius: 4px) と書いてありますが、
これは、「引数が渡されなかったときは 4px を使うよ」
という意味です。

↑をCSSに変換

  2. .card {
  3.   border-radius: 8px;
  4. }

② フレックスボックス（中央寄せ）

  2. @mixin flex-center {
  3.   display: flex;
  4.   justify-content: center;
  5.   align-items: center;
  6. }

  2. .container {
  3.   @include flex-center;
  4. }

③ フォントスタイル

  2. @mixin font($size, $weight: normal, $line: 1.5) {
  3.   font-size: $size;
  4.   font-weight: $weight;
  5.   line-height: $line;
  6. }

  2. .title {
  3.   @include font(24px, bold);
  4. }

④ メディアクエリ（レスポンシブ対応）

  2. @mixin sp {
  3.   @media (max-width: 767px) {
  4.     @content;
  5.   }
  6. }

  2. .header {
  3.   font-size: 18px;
  5.   @include sp {
  6.     font-size: 14px;
  7.   }
  8. }

@content は、mixinの中に「中身のCSSをはめ込む」特殊な機能です。

プロジェクト設計での使いどころ

FLOCSSでの活用例

• Foundation層に基本mixinをまとめる（例：_mixin.scss）
• **Object層（Componentなど）**で@includeして再利用
• Utility層と競合しないように、明確に役割を分ける

  2. // Foundation/_mixin.scss
  3. @mixin clearfix {
  4.   &::after {
  5.     content: "";
  6.     display: table;
  7.     clear: both;
  8.   }
  9. }
  11. // Object/Component/_media.scss
  12. .media {
  13.   @include clearfix;
  14. }

プロジェクトでよくある構成

  2. scss/
  3. ├── foundation/
  4. │ └── _mixin.scss ← mixinをまとめて定義
  5. ├── object/
  6. │ └── component/
  7. │ └── _button.scss ← includeして使う
  8. └── style.scss ← 全体の読み込み

  2. // style.scss
  3. @use "foundation/mixin";
  4. @use "object/component/button";

前ページに戻る
MILMONA   MILMONA   MILMONA   MILMONA   MILMONA   
MILMONA   MILMONA   MILMONA   MILMONA   MILMONA