ダークモード

spaceキーで切り替え可


HTML・CSS

CSSを効率よく記述する、SCSSの説明・使い方・記述方法

CSSを書いていると、
・何度も同じ記述が必要だったり
・同じ CSSのセットが何箇所もあったり
・視認性が悪い
といった問題が起こります。

そんなときに便利なのが SCSSです。

出来るだけ簡単に、SCSSの良さをお届けします。

目次

SCSSとは

CSSを便利に記述するために【 Sass（サス）】という スタイルシート言語が開発されました。

この【 Sass 】には２種類の記述方法があり
それが、
【 SASS 】と【 SCSS 】です。

【 A 】か【 C 】かの違いで、紛らわしいのですが、
この記事では【 Sass 】という言語の【 SCSS 】という記述方法を紹介していきます。

画像はありません
Sass: Syntactically Awesome Style Sheets
Syntactically Awesome Style Sheets

まずは Sassをインストールする必要がある

SCSSで書くには、パソコンに Sassをインストールする必要があります。
実は、Sassにも種類があるのですが、

・Dart Sass
をインストールすれば良いです。
（現在 Dart Sass以外は非推奨です）

インストール方法については、こちらのサイトを紹介します。

・Windows の場合

SASSの導入（インストール）方法 | ShanaBrian Website
SASSの導入（インストール）方法 | ShanaBrian Website
SASS・SCSSの逆引きリファレンス「SASSの導入（インストール）方法」を掲載している…

・Mac の場合（私はこちらのサイトを参考にしました。いつもお世話になってます。）

画像はありません
Sass のインストールと設定（Dart Sass）｜Web Design Leaves
Dart Sass を Mac のターミナルで Homebrew を使ってインストールする…

コンパイラの準備

コンパイラとは【 翻訳機 】のようなものです。
SCSSの記述が HTMLには伝わらないので、CSSに変換して HTMLで読ませなければいけません。

VS Codeなどコードエディターの拡張機能を使い、SCSSを CSSに変換します。

Sassコンパイラの使い方や、設定はこちら。

画像はありません
Sassコンパイラーの使い方｜Web Design Leaves
VS Code を使って Web 制作（ホームページ作成）を行うために必要な設定や拡張機能…

コンパイラに関して注意事項

Live Sass Compiler（by Glenn Marks）について

使いやすく非常に便利だと思いますが、VS Codeで使用した際、ワークスペースに置いている全てのフォルダーの SCSSが変換されてしまい困りました。（設定にも目を通しましたが変更できない模様…）
ワークスペースに複数サイトの SCSSファイルを置く場合はご注意を。

DartJS Sass Compiler and Sass Watcher について

こちらは Live Sass Compiler と比べて使いにくさはあるものの、保存した SCSSファイルのみが変換されます。少し面倒なところがあるものの、ワークスペースに複数サイトのフォルダを置く私はこちらを使ってました。
設定しだいでは、Live Sass Compilerのような使い方も可能です。
詳しくはこちら：

【VSCode】Dart Sassが使える拡張機能 - DartJS Sass Compiler and Sass Watcherの使い方｜夢みるゴリラ
【VSCode】Dart Sassが使える拡張機能 - DartJS Sass Compiler and Sass Watcherの使い方｜夢みるゴリラ
今日はVSCodeのDart Sassが使える拡張機能「DartJS Sass Compi…

SCSS 使用時の階層構造（例）

SCSS 使用時の階層構造の一例

config フォルダ　→　サイト全体に影響する SCSS。
contents フォルダ　→　ページ内で共通に使っている SCSS。
page フォルダ　→　各ページに使っている SCSS。

style.scss ファイル　→　上記の SCSSファイルをまとめ、変換されるファイル。
CSS フォルダ　→　SCSSから変換された CSSファイルが、出力される場所。

というように、CSSを分類できることで、把握や修正がしやすくなります。

変換させないファイル

Sassでは、ファイル名の頭にある［ _ （アンダースコア）］のことを【 パーシャル（partial）】と言い、これが付いたファイルは変換されません。
変換させるファイルは style.scssにまとめる必要があります。（まとめ方は後述 ↓ ）

SCSSの書き方（例）

書き方をまとめてみました。

よく使う書き方

HTML（例）

<section class="section section--top">
      <div class="content">
        コンテンツ
      </div>
    </section>

SCSS（例）

// モバイルファーストで記述して、
section {
  margin: 50px;

  // ＆で記述省略・トップページのみに適用させたいCSS
  &--top {
    margin: 20px;
  }

  // セクションの中にある div.content
  .content {
    padding: 20px;
  }

  // 768px 以上の記述がここで書ける！
  @media (min-width: 768px) {
    margin: 100px;

    &--top {
      margin: 40px;
    }

    .content {
      padding: 40px;
    }
  }

  @media (hover: hover) {

    // ＆で記述省略
    &:hover {
      background-color: red;
    }
  }
}

お分かりいただけただろうか…

  • モバイルファーストで記述しておき、その場で 768px以上の記述ができる。
  • .section .content { 〜〜〜 } とわざわざ書かなくても、.section内に .contentを書けば良い。
  • ［ & ］で記述を省略

［ & ］とは

読み方は「アンパサンド」文字列をくっつけることが出来る。
上記の例では、
・section--top {}　が　&--top　に。
・section:hover　が　&:hover　に。

このように SCSSは CSSを入れ子（ネスト）にすることができ、
HTMLの階層と似たような記述が可能となります。

※ CSSを入れ子しすぎると視認性が悪くなるので、ほどほどに。

他にもこんな書き方

複数のファイルに記述を分けて、CSSを効率よく使い回す方法の紹介です。

変数入れるファイル（ _variable.scss ）

$bg-color: #fff;

サイトで使う色や、数値などをあらかじめ入れておくファイルです。
ここに変数を入れて使うことで、もし色の変更や、共通の数値に変更があっても、このファイル内を変更するだけで済みます。

書き方

$ 呼び出す名前 : 使いたい値 ;
例、$color : blue ;

ただ、今では CSSで同じことが出来る【CSS カスタムプロパティ】があるので、好みで使うような感じです。

繰り返し使うセット（ _mixins.scss ）

@mixin anime_fade_in {
  opacity: 0;
  transform: translateY(10px);
  // アニメ名
  animation-name: fade_in;
  // 開始から終了までの時間
  animation-duration: 3s;
  // 速度・進行度
  animation-timing-function: ease;
  // いつ始まるか
  animation-delay: 1s;
  // 繰り返し回数
  animation-iteration-count: 1;
  // 再生方向
  animation-direction: normal;
  // 実行前後の状態
  animation-fill-mode: forwards;
  // 再生・停止
  animation-play-state: running;

  @keyframes fade_in {
    0% {
      transform: translateY(10px);
      opacity: 0;
    }

    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
}

こちらには CSSのセットを用意しておくファイルです。
サイトの各ページに共通して使える CSSを記述して使います。

書き方

@mixin CSSセットの名前 { 〜呼び出したいCSS〜 }
例、@mixin set-name { magin: 10px; }

上記の例では、animationプロパティを使っています。
プロパティの一括指定が呼び出し元（ _mixins.scss ）では効かないようなのでご注意を。
（ animation: fade_in 3s 1s forwards; などは効かないです。）

呼び出し先のファイル（ 例 _main.scss ）

@use '../config/mixins'as m;
@use '../config/variable'as v;

section {
  background-color: v.$bg-color;
  @include m.anime_fade_in;
}

1 ~ 2行目の【 @use ' 参照ファイルまでの相対パス ' as 参照名 】で、２つのファイルを参照先としています。
@useで「このファイル使いますよ〜」と宣言するようなイメージ。

5行目　background-color: v . $bg-color ;

［ v ］という名前の参照先から［ $bg-color ］の値を持ってきて〜といった意味合いです。
ですので、_variable.scssファイル内の $bg-colorの値である #fff（白色）を使うということ。
CSSに変換されると【 background-color: #fff ; 】となります。

６行目　@include m . anime_fade_in ;

_mixins.scssファイル内に書かれている @mixinは、@includeで呼ぶことができ、
［ m ］という名前の参照先から［ anime_fade_in ］の値を持ってきて〜といった意味合いです。

呼び出し元で @mixin が使われていれば、
呼び出し先で @include が必要です。

もっと詳しく知りたい方へのリンク

SCSSの使い方はまだまだあるですが【 出来るだけ簡単に使いこなす 】ためには、ここまでにしておきます。
さらに詳しく使い方を知りたい方は以下を参考にしてみてください。

画像はありません
Dart Sass (scss) の使い方｜Web Design Leaves
Dart SASS (scss) の基本的な使い方に関する参考資料・解説等。@use や …

style.scssにまとめて、変換

_（パーシャル）ファイルに書き終えたら、
style.scssに _ファイルをまとめます。

@use './config/reset';
@use './config/base';
@use './config/mixins';
@use './config/variable';

@use './contents/header';
@use './contents/main';
@use './contents/footer';

@use './page/top';
@use './page/under';

@useの出番です。「このファイル使いますよ〜」という宣言。

相対パスで参照するファイルを記述し保存。
（上から順番に読み込まれるので、読み込み順に注意）
　　　↓
コンパイラが CSSファイルを生成。
　　　↓
CSSファイルを HTMLファイルで読み込ませれば、完了です。

@use の記述を減らすことも出来る

@use './config';

@use './contents';

@use './page';

これは参照先を 各フォルダまでにした記述です。
各フォルダに _index.scssファイルを作り、あらかじめまとめておくと、このような書き方も出来ます。

@use './reset';
@use './base';
@use './mixins';
@use './variable';
@use './header';
@use './main';
@use './footer';
@use './top';
@use './under';

参考までに。

最後まで読んでいただき、ありがとうございました。

シェアしてもいいかも…と、思ったら

記事 一覧へ

コメントを書いてみる

CAPTCHA