SCSSの使い方

WEB制作
2021.12.03

SCSSとはなにか？

SCSSとは、CSSをより効率的に書くことができる言語のことです。

SCSSを使うことでCSSが複雑化したり、肥大化することを抑えてくれ、メンテナンスしやすくなります。

SCSSを使うメリット

  1. CSSのコード量をへらすことができる。
  2. コードの保守や管理がしやすくなる。
  3. 変数で値を使い回すことができる

SCSSを使うデメリット

  1. 作成したコードをCSSにコンパイル(変換)する必要がある。
  2. SCSSの書き方を学習する必要がある。

SCSSをVisual Studio CodeでCSSにコンパイルする方法

SCSSを自動でコンパイルしてくれるVSCodeのプラグインがあります。

Live Sass Compiler

Live Sass Compilerの使い方

Live Sass CompilerをVSCodeに追加する

「拡張機能」から Live Sass Compiler と入力して、検索の一番上に表示されたプラグインを選択してインストールする。

CSSフォルダにstyle.scssファイルを作成

CSSフォルダにSCSSファイルを作成する。SCSSでコードを書いて保存する。

SCSSコードのサンプル

div {
    background: rgb(38, 0, 255);
    width: 400px;
    height: 400px;

    p {
        color: white;
        font-weight: bold;
        text-align: center;
    }
}

画面下部の「Watch Sass」をクリックしてアクティブにする

「Watch Sass」をクリックして、「Watching…」と表示さるとOKです。

以降はSCSSファイルを修正して保存をすることで自動でCSSにコンパイルしてくれます。

CSSファイルが作成されていることを確認

CSSフォルダにstyle.cssとstyle.css.mapが作成されました。

初期設定ではSCSSファイルと同じディレクトリにCSSファイルが作成されます。

CSSファイルの作成される場所を変更する

もし、SCSSファイルとCSSファイルを分けて管理したい場合はプラグインの設定で変更することができます。

setting.jsonファイルに以下の記載を追記します。

"liveSassCompile.settings.formats": [
    {
        "format": "expanded",
        "extensionName": ".css",
        // 保存するパスを指定する
        "savePath": "/css"
    }
]

SCSSフォルダを作成して、style.scssファイルを移動して保存をする。

CSSファイルがSCSSファイルと別のディレクトリに作成されるようになり、 SCSSファイルとCSSファイルを分けて管理できるようになります。

CSSを圧縮して作成したい場合の設定

コンパイルされて作成されたCSSファイルを圧縮されているようすることもできます。

setting.jsonファイルに以下の記載を以下のように変更します。

"liveSassCompile.settings.formats": [
    {
        // 圧縮して出力するように設定する
        "format": "compressed",
        "extensionName": ".min.css",
        "savePath": "/css"
    }
]

Mapファイルが不要な場合の設定

もし、Mapファイルが不要な場合は作成されないようにすることができます。

setting.jsonファイルに以下の記載を追記します。 

"liveSassCompile.settings.generateMap": false

SCSSの書き方を紹介

SCSSの変数

SCSSでは、変数を使用することができます。繰り返し使うような値を変数として使用することで、メンテナンス時に変更が少ない作業量で済みます。

変数の宣言は、名前は「$」から始め、「:」で区切って値を指定します。

$main_width: 900px; //変数の宣言

#main {
    width: $main_width; //変数の使用
}

作成されるCSSは以下のようになります。

#main {
  width: 900px;
}

SCSSのネスティング (nesting) 

SCSSの特徴としてネスティングを使用することができます。

ネスティングにより、CSSの全体のソースコード量を減らすことができたり、htmlファイルの構造をイメージしやすくなったりするため、メンテナンスのしやすいコードになります。

ネスティングは以下のように記載します。

#menue {
    width: 100%;
    height: 150px;

    ul {
        margin: 0;
        list-style: none;
    }

    li {
        margin: 0;
    }

    a {
        padding: 10px;
    }
}

作成されるCSSは以下のようになります。

#menue {
  width: 100%;
  height: 150px;
}

#menue ul {
  margin: 0;
  list-style: none;
}

#menue li {
  margin: 0;
}

#menue a {
  padding: 10px;
}

SCSSのミックスイン (mixins)

SCSSでは同じようなソースコードをミックスインを利用して再利用できるようにすることができます。同じような記載をまとめてソースコードの量を減らすことができます。

SCSSのミックスインは以下のように記載します。

@mixin box { // ミックスインの定義
    width: 300px;
    height: 200px;
    margin: 20px 0;
    padding: 10px;
}

.content {
    @include box; // ミックスインの呼び出し
}

作成されるCSSは以下のようになります。

.content {
  width: 300px;
  height: 200px;
  margin: 20px 0;
  padding: 10px;
}

引数を使ったミックスインは以下のように記載します。 

@mixin box($width, $height) {
    width: $width;
    height: $height;
    margin: 20px 0;
    padding: 10px;
}

.content1 {
    @include box(300px, 200px); // ミックスインを呼び出すときに値を渡す
}

.content2 {
    @include box(150px, 100px); // ミックスインを呼び出すときに値を渡す
}

作成されるCSSは以下のようになります。

.content1 {
  width: 300px;
  height: 200px;
  margin: 20px 0;
  padding: 10px;
}

.content2 {
  width: 150px;
  height: 100px;
  margin: 20px 0;
  padding: 10px;
}

引数を使ったミックスインのときに初期値を指定したい場合は以下のように記載します。 

@mixin box($width: 300px, $height: 200px) { // 初期値を指定
    width: $width;
    height: $height;
    margin: 20px 0;
    padding: 10px;
}

.content1 {
    @include box(); // ミックスインを初期値で呼び出すとき
}

.content2 {
    @include box(150px, 100px);
}

作成されるCSSは以下のようになります。 

.content1 {
  width: 300px;
  height: 200px;
  margin: 20px 0;
  padding: 10px;
}

.content2 {
  width: 150px;
  height: 100px;
  margin: 20px 0;
  padding: 10px;
}