2025/05/15

コーディングの話

SCSSを使い始めてからCSSに戻れない話。

こんにちは🌞

GWが終わり、日常が戻ってきましたね🌱

あっという間に桜が散って、新緑が溢れる季節になりました。

学生時代は『5月病』を言い訳に、GW明けはだらだら過ごしていましたが、

社会人はそういうわけにもいきませんよね😮‍💨

突然ですが皆さんはコーディングをするとき、CSSを使いますか??

それともSCSS派でしょうか??

案件によってCSSでの実装を指定されることもありますが、私は普段からSCSSをよく使います✍️

久しぶりにCSSでコーディングすると、

「あれ、CSSってこんなに書きにくかったっけ？」

と感じてしまうまでになりました。

今回は、そんなSCSSの沼にどっぷりハマってしまった私が、

なぜCSSに戻れなくなってしまったのか、その理由をゆるっと語っていこうと思います🗣️

SCSSを使ってみたくなった方は、初心者向けにまとめた

『今日から書ける！SCSSの基本と使い方まとめ』を読んでみてください。

SCSSとの出会い

私がSCSSに出会ったのは、個人的にとある案件を引き受けたときでした。

コーディング規則についてのドキュメントを読んでみると、こんな文言が。

SASS での構築
BEMに基づいた命名規則
FLOCCS設計

SASS→CSSを拡張して書きやすくするメタ言語。Syntactically Awesome Style Sheets の略。
BEM→CSSを設計･命名していく手法。Block Element Modifierの略。
FLOCCS→CSSを仕様構成別に分割して記述する手法。F、L、SはそれぞれFoundation・Layout・Objectの頭文字。

また、ベースにしてほしいと伝えられたコーディングファイルを見てみると、

そこにはCSSのようでCSSではない、まるで暗号のようなコードが広がっていました。

個人で引き受けた案件で、休日に取り組んでいたためその場で社長に質問することもできず、

迫る期限に怯えながら、ひたすらコードとにらめっこしていたのを今でも鮮明に覚えています。

そんな私の様子を見て、後日社内で社長がSCSSの勉強会を開いてくださり、

そこから本格的にSCSSの便利さ・魅力を知ることになりました。

SCSSのここがすごい！

1.コードが構造的に書ける「ネスト」

SCSSではネストと言って入れ子構造でセレクタを書くことができます。

/* CSSで書いた場合 */
.sec-company .company-title {
    font-size: 40px;
}

.sec-company .company-title .en {
    font-size: 16px;
    margin-top: 12px;
}

CSS

上のコードをSCSSを使って書いてみると、

// SCSSで書いた場合
.sec-company {
    .company-title {
        font-size: 40px;
         .en {
          font-size: 16px;
          margin-top: 12px;
        }
    } 
}

SCSS

こんなふうに入れ子にして書くことができます。

HTMLの階層とスタイルの階層が対応していて、コードを見ただけで構造が把握しやすくなります。

何度も同じセレクタを書かなくていいので時間短縮になります🕰️

2.よく使うスタイルを再利用「ミックスイン」

何度も同じコードを書いていると、『まとめられたら便利なのに』と思うことありませんか？？

HTMLで同じクラス名をつけておけば良い話ですが、

微妙に色が違ったり、サイズが違ったりすると、

同じコードを何度も書かなければいけなくなってしまいます。

そんな時に使えて便利なのがミックスインです。

// 変数$mbに引数40pxを渡している
@mixin flex-center($mb: 40px) {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: $mb;
}

SCSS

ul {
  @include flex-center(56px); 
}

//CSSで出力されるとこうなります👇
ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 56px;
}

SCSS

mixinは@includeを使って呼び出すことができます。

また、引数（パラメータ）を設定することで、状況に応じて値だけを変えて呼び出せます。

上記のコードではmargin-bottomに変数$mbで置いておくことで、

数値を臨機応変に調整できるようになっています。

3.カラーやサイズを統一できる「変数」

SCSSでは何度も出てくるカラーや数値を変数として管理することができます。

Figmaでもスタイルやバリアブルを登録できるようになっているので、

カラーコードよりも色の名前で変数でまとめておく方が、

実装時の手間が省けると実感しています。

$main-color: #FFFFFF；
$highlight-color: #ff6e6c;
$secondary-color: #67568c;
$tertiary-color: #fbdd74;
$mb: 40px;

//　実際に使うときは...
.sec-title {
    color: $secondary-color;
}

SCSS

このコードを見て『CSSでも同じことできるんじゃなかったっけ??』と思われた方、

鋭いです✨

CSSでもカスタムプロパティという『変数のように値を定義して使いまわせる仕組み』があります。

変数を使うことで、色やサイズなどの共通スタイルを一括管理しやすくなります。

:root {
    --main-color: #FFFFFF;
    --highlight-color: #ff6e6c;
    --secondary-color: #67568c;
    --tertiary-color: #fbdd74;
    --mb: 40px;
}

/* 実際に使うときは... */
.sec-title {
    color: var(--secondary-color);
}

CSS

ではCSSのカスタムプロパティと比較して、SCSSの変数を使うメリットはあるのでしょうか??

結論、あります🥹

ネストの階層に関係なく変数を使うことができる
- SCSSの変数は、どんなに深くネストした場所でも自由に呼び出せます。
変数を計算式に使用することができる
- 色の明るさを少し変えたり、サイズを調整したりといった計算も、SCSSの変数なら簡単にできます。例えば、$mb * 1.2 のように書けるので、デザインの微調整がとっても楽になるんです。
mixinなどの他の機能と合わせて使用できる
- SCSSの変数は、ミックスインや関数と合わせて使えるのが大きな魅力。共通のスタイルをまとめつつ、変数で細かく調整できるので、コードの再利用性がアップします。
変数やスタイルを複数のファイルに分けて管理することが可能
- SCSSはファイルを分割して管理できるので、変数も「色だけ」「サイズだけ」といった感じでまとめておけます。大きなプロジェクトやチーム開発では、これがあるのとないのとで作業効率が大違い！

SCSSを使う際には変数も合わせて使ってみてほしいです。

4.ファイル分けでプロジェクトが整う

ページ数の多い案件では、複数人で開発を進めることがよくあります。

その際に問題になりやすいのが、「自分以外の人が書いたスタイルがどこにあるか分からない」という状況です。

そこで役立つのが、SCSSの設計手法のひとつである「FLOCSS」です。

FLOCSSでは、スタイルを以下のように役割ごとに分類してファイルを管理します。

├─ foundation/   → リセットCSSや変数、mixinなど土台となる設定
├─ layout/       → ヘッダーやフッター、メインレイアウトなどページ全体の枠組み
├─ object/
│   ├─ component/→ ボタン・カードなど再利用できるUIパーツ
│   ├─ project/  → サイト固有のブロック（例：商品一覧、記事スライダーなど）
├─ utility/      → marginやtext-alignなど、使い捨ての補助クラス

Plaintext

のように**「どんな目的のスタイルか」**を明確にした構成にしておくと、