SCSSってなに??

SCSSは効率的なスタイル設計ができるCSSを拡張した記法です。

見た目はほぼCSSと同じなのが特徴ですが、変数やネスト、関数などの便利機能も使えるのが魅力です。

この後詳しく説明していきます。

SCSSを使う準備

今回はVS Codeでの作業を想定して説明していきます。

拡張機能のダウンロード

画面左端にあるメニューから、拡張機能のアイコンをクリックします。

検索窓で「Sass Compiler」と入力します。

Live Sass Compilerが出てきたらインストールしてください。

『Live Sass Compiler』はSCSSのコードをCSSに直してくれる拡張機能です。

SCSSはそのままでは使えないため、「CSSに変換する作業（＝コンパイル）」が必要です。

コンパイルとは、SCSSのような人間向けのコードを、ブラウザが理解できるCSSに直す作業のことです。

画面下の『Watch Sass』をクリックするとコンパイルが開始されます。

エラーがなければ上記のようにSCSSがコンパイルされて、cssファイルとcss.mapファイルが生成されます。（css.mapファイルを生成する場合は要設定）

css.mapとは「開発者ツール（検証ツール）」で調べたときに、SCSSで書いた元の場所を教えてくれるファイルです。

たとえば、開発者ツールで <h1> の color をチェックすると…

.css.map がある場合 → main.scss の 20行目に書いてある、と表示される

.css.map がない場合 → style.css の 200行目などと表示される（元のSCSSファイルのどこかわからない）

そのため、どこを改善すれば良いかがとてもわかりやすいです。

エラーがあれば赤のボックスで囲った部分のように、

エラーが起こっている箇所を教えてくれます。

基本の書き方

ネスト

まず、SCSSの特徴的な書き方として挙げられるのが『ネスト』です。

ネストとは下のコードのように入れ子のように記述することを言います。

このように書くことで、何度も同じセレクタを書かなくて済むのでとても楽です✨

.footer-flex-r {
    display: flex;
    gap: 20px;
    a {
        display: block;
        width: clamp(165px, 14.4vw, 231px);
    }
}

変数

SCSSでは、$ を使って値に名前をつけて保存することができます。

これを『変数（へんすう）』と呼びます。

よく使う文字サイズや色を登録しておくととても便利です。

最近では、Figmaのデータでもバリアブルやスタイルを用いて変数を登録できるようになりました。

デザインをコードに起こす際に、Figmaの変数をSCSSにも登録しておけば、

便利で、作業時間も短縮することができます。

$primary-color: #3498db;
$font-size-base: 16px;
$spacing-unit: 8px;

.button {
  background-color: $primary-color;
  font-size: $font-size-base;
  padding: $spacing-unit * 2;
}

ミックスイン（@mixin / @include）

ミックスインとは、よく使うコードのパターンを保存しておくことができるものです。

@mixin center-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

ミックスインを呼び出す時は@includeを使います。

.box {
  width: 100px;
  height: 100px;
  @include center-flex;
}

ミックスインの中の値を変えたい場合は以下のように書くことができます。

@mixin text-style($size, $weight, $color) {
  font-size: $size;
  font-weight: $weight;
  color: $color;
}

p {
  @include text-style(14px, normal, #333);
}

実務でよく使うのはレスポンシブ対応する場合のブレークポイントの値です。

@mixin の中に書かれた @content は、

@include を使うときに書いたブロック（中かっこ {} の中身）を、その場所に差し込むという意味です。

$tab_large: 1100px;
@mixin tab_large {
    @media screen and (max-width: ($tab_large)) {
        @content;
    }
}

この場合はincludeを入れ子にして使います。

.l-header-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    @include tab_large {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

CSSとして書き出される場合は以下のようになります。

.l-header-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    @media screen and (max-width: 1100px) {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

ファイル名の付け方

SCSSファイルは基本的に先頭に_（アンダースコア）をつけることになっています。

アンダースコアがついているファイルはコンパイルされないことになっています。

_reset.scss       // CSSリセット
_header.scss      // ヘッダーのスタイル
_footer.scss      // フッターのスタイル

ではどのファイルをコンパイルすればいいのか、次の章で詳しく見ていきましょう。

ファイルの呼び出し

SCSSでコーディングをする時は下記のように各ファイルをフォルダに格納します。

以下はあくまでも一例ですが、SCSSファイルは目的ごとにフォルダを分けます。

この中でSCSSファイルの中でコンパイルされるのはstyle.scssだけです。

css/
├── foundation/          // リセットや基本スタイル
│   ├── _reset.scss
│   └── _base.scss
├── components/    // ボタンやカードなどの部品
│   ├── _button.scss
│   └── _card.scss
├── layout/        // ヘッダー・フッター・グリッドなど
│   ├── _header.scss
│   ├── _footer.scss
├── pages/         // 各ページ専用のスタイル
│   └── _home.scss
└── style.scss      // すべてをまとめるエントリーファイル

style.scssは以下のような記述になります。

@useを使って他のscssファイルを呼び出しています。

@charset "utf-8";

//Foundation
@use "foundation/reset";
@use "foundation/base";

//Component
@use "component/button";
@use "object/card";

//Layout
@use "layout/header";
@use "layout/footer";

//Pages
@use "pages/home";

最後に

いかがでしたでしょうか？？

今回のブログではSCSSの基本構文を紹介しました💁🏻‍♀️

初めてSCSSを触った時は、CSSとの違いに混乱し、

見慣れないコードが溢れていることに戸惑いました😵‍💫

今、SCSSのいろんな機能を使ってみて思うのは、『全て使い切る必要はない』ということです。

CSSと比較してSCSSは複数ファイルにまたがって記述します。

『どこに何が書いてあるかわからなくなってしまった』という状態は本末転倒です。

自分や一緒に作業する人にとってわかりやすいように使うことが大事だと感じています。

試行錯誤しながらSCSSを使ってみてください。

最後までご覧いただきありがとうございました🙇🏻‍♀️