【Sass入門】SCSSの基本的な書き方8選！コード付きで解説

HTMLのコーディングにおいて、多くの開発者が使用しているSCSS（読み方：エス・シー・エスエス）。CSS（読み方：シー・エス・エス）における課題を解消するために開発された言語で、便利な機能がさまざまあります。

しかし、SCSSとはどのようなものなのか分からない方もいらっしゃるのではないでしょうか。

今回は、SCSSの基本的な機能と、書き方についてわかりやすく解説します。

SCSSの基本機能とは

SCSSとは、Sass（読み方：サス）と呼ばれるスタイルシート言語※の記法のひとつです。
Sassの記法には2種類が存在し、もう一つの記法はSASSといいます。
混同しやすいですが、Sassと呼ばれる言語の中に、「SCSS」と「SASS」の2つの記述方法があると理解しましょう。

※スタイルシート言語とは、文書の見た目などの表示形式を定義する言語です。

広く活用されているスタイルシート言語に、CSSがあります。
しかし、CSSにはさまざまな課題がありそれを解決するため、わかりやすく管理しやすい形にした記述方法ががSCSSです。

この章では、SCSSの基本機能について解説します。

変数を利用できる

変数とは、くり返し出てくるスタイル内のカラーコードや数値に名前をつけることで、再び使用する時に名前を書くだけで使える便利な機能です。

例えば、Webサイトのベースカラーを水色で構築ていたところ、完成直前になって薄い緑色へ変更したくなった際に、変数を定義しておくことで一括で色を変更できるようになります。
CSSでは、カラーを変更したいところは、1ヶ所ごとに記述しなければなりませんでした。

ネスト構造を利用できる

Sassは、ネスト（入れ子）によって記述できるため、コード数を短縮できる特長があります。
適度にネストを使って記述すれば、1つの処理を1か所にまとめられるため、シンプルでわかりやすくなるというメリットがあります。

コードをそのまま読解するよりも、見落としなどのミスを防ぎやすいと言えるでしょう。

スタイルシートを分けられる

SCSSは、スタイルシートを分けられるため、管理がしやすい特長があります。

例えば、ファイルの修正や確認を行う際に、スタイルシートをわかりやすく分けて管理しておくことで、目的のファイルが見つけやすくなります。

条件分岐を利用できる

条件分岐を活用すれば、さまざまな処理の実装が可能です。

Sassは、条件処理による条件分岐ができるため、CSSで複数行の記述が必要なケースでも、コード数を短縮して記述できます。

mixin機能を利用できる

mixin（読み方：ミックスイン）機能とは、コードのまとまりを他の場所から呼び出せる機能です。

利用することの多いスタイルを定義しておけば、他の場所でも同じく使えるようになります。同じスタイルを何度も書かなくて良いため、作業を簡略化できるメリットがあります。

その他、SCSSの基本情報は他の記事で紹介しておりますので、ご興味ございまいましたらご確認下さい。

SCSSの書き方8選

ここでは、SCSSの書き方について解説します。

1.変数

変数とは、くり返し使用したい値を変数として管理できる機能です。
CSSにも変数はありますが、IE（Internet Explorer）がCSSに対応していないため、SCSSの変数を使用することが一般的です。

【記述方法】

$変数名: 値;

【具体例】

$black: #000000;
$position: left;

.item1 {
    color: $black;
}

.item2 {
    background: $black;
    margin-#{$position}: 30px;
    // #{$変数名}と記述することで、その変数の値を文字列として使用できる。
}

【出力結果】

.item1 {
    color: #000000;
}

.item2 {
    background: #000000;
    margin-left: 30px;
}

2.ネスト（入れ子）

ネスト（入れ子）とは、少ないコードで記述でき、1つの処理を１か所にまとめて分かりやすくできる機能です。

ネストして使用すれば、親セレクタを頭につけ、CSSを出力できます。

【記述方法】

.hoge1 {
    プロパティ: 値;

    .hoge2 {
        プロパティ: 値;

        .hoge3 {
            プロパティ: 値;
        }
    }
}

【具体例】

.item1 {
    width: 200px;

    .item2 {
        width: 100px;

        .item3 {
            width: 50px;
        }
    }
}

▼出力結果

.item1 {
    width: 200px;
}

.item1 .item2 {
    width: 100px;
}

.item1 .item2 .item3 {
    width: 50px;
}

3.条件分岐

条件分岐とは、ある条件が満たされているかどうかにより、次に実行するプログラム上の位置を変化させることが可能な機能です。
また、そのような分岐を行うコードを指します。

Sassは、他のプログラミング言語で頻繁に出てくる条件分岐や、くり返しなどを制御できます。

例えば、if文は指定した条件に合う場合のみ処理を実行できます。
以下のように記述することで、条件によってスタイルを変更できます。

【記述方法】

・条件を1つのみ指定するケース

@if 条件 {
// 条件が合致したら、この中の処理を実行する。
} @else {
// 条件が合致しない場合は、この中の処理を実行する。
}

// @elseより後ろは省略も可能

・条件を複数指定するケース

@if 条件1 {
    // 条件1が合致したら、この中の処理を実行する。
} @else if 条件2 {
    // 条件2が合致したら、この中の処理を実行する。
} @else {
    // どの条件も合致しない場合は、この中の処理を実行する。
}

【具体例】

$position: left;
$width: 250px;

.item1 {
    @if $position == left {
        padding-left: 10px;
    }
}

.item2 {
    @if $width > 300px {
        margin-right: 10px;
    } @else if $width < 200px {
        margin-left: 10px;
    } @else {
        margin-top: 10px;
    }
}

【出力結果】

.item1 {
    padding-left: 10px;
}

.item2 {
    margin-top: 10px;
}

また、条件式として使用可能な比較演算子は、以下のようなものがあります。

比較演算子	解説
A==B	AとBは等しい
A>B	AはBより大きい
A<B	AはBより小さい
A>=B	AはB以上
A<=B	AはB以下
A!=B	AとBは等しくない

論理演算子については、Sassでは「&&」「||」を使用できませんが、代わりに以下のものが使えます。

論理演算子	解説
and	かつ
or	または
not	否定

条件式の中で論理演算子は、条件を複数組み合わせる時は、次のように活用します。

$value: 20;
@if $value > 10 and $value < 100 {
  $valueが10よりも大きくてかつ100よりも小さい場合スタイルを反映
}

このように、比較演算子と論理演算子を組み合わせると、複雑な条件設定ができるようになるのです。

4.反復処理

反復処理とは、指定した手順をくり返し処理できる機能です。無限のくり返しや、ある条件になるまでくり返すなどの設定が可能です。

@for

for文は、設定した開始値から終了値まで、処理をくり返し行います。
throughは、終了値を含め処理を実行するのに対し、toは終了値を含みません。

【記述方法】

・開始値～終了値の間、処理を実行するケース

@for $変数 from 開始値 through 終了値 {
//変数が開始値～終了値の間、この中の処理を実行する。
}

・開始値～終了値未満の間、処理を実行するケース

@for $変数 from 開始値 to 終了値 {
//変数が開始値～終了値未満の間、この中の処理を実行する。
}

【具体例】

@for $i from 1 through 3 {
    .item#{$i} {
        margin-right: 10px * $i;
    }
}

@for $i from 1 to 3 {
    .box#{$i + 5} {
        width: (100px * $i) + 10px;
    }
}

【出力結果】

.item1 {
    margin-right: 10px;
}

.item2 {
    margin-right: 20px;
}

.item3 {
    margin-right: 30px;
}

.box6 {
    width: 110px;
}

.box7 {
    width: 210px;
}

＠while

指定した条件に合う場合、くり返し処理を実行します。

【記述方法】

@while 条件 {
// 条件が合致している間、この中の処理を繰り返し実行する。
}

【具体例】

$i: 1;

@while $i < 4 {
.item#{$i} {
height: 30px * $i;
}
$i: $i + 1;
}

【出力結果】

.item1 {
height: 30px;
}

.item2 {
height: 60px;
}

.item3 {
height: 90px;
}

5.mixin

mixinとは、コードのまとまりを他の場所から呼び出せる機能です。
@includeと組み合わせれば、くり返し使いたいスタイルや、ルールセットを管理できるようになります。

【記述方法】

・引数を指定しないケース

@mixin mixin名 {
プロパティ: 値;
}

.hoge {
@include mixin名;
}

・引数を指定する場合（初期値なし）

@mixin mixin名($引数名1, $引数名2) {
プロパティ: $引数名1;
プロパティ: $引数名2;
}

.hoge {
@include mixin名(引数1, 引数2);
}

・引数を指定するケース（初期値あり）

@mixin mixin名($引数名1: 初期値, $引数名2: 初期値) {
プロパティ: $引数名1;
プロパティ: $引数名2;
}

.hoge {
@include mixin名();
// ここで引数を設定しない場合は初期値に設定した値が適用される。
}

・@contentを使用するケース

@mixin mixin名 {
@content;
}

.hoge {
@include mixin名 {
// ここに記述した内容は@contentの部分に記載されていることになる。
}
}

【具体例】

@mixin text1 {
color: #ff0000;
font-size: 18px;
}

@mixin text2($size, $weight) {
font-size: $size;
font-weight: $weight;
}

@mixin text3($size: 20px, $weight: normal) {
font-size: $size;
font-weight: $weight;
}

// mixinの中にはルールセットを入れることも可能
@mixin box {
.box {
background: #ff0000;
padding: 10px;
}
}

@mixin btn {
.btn {
height: 100px;
width: 300px;
@content;
}
}

.item1 {
@include text1;
}

.item2 {
@include text2(24px, bold);
}

.item3 {
@include text3(24px, bold);
}

.item4 {
@include text3();
}

.item5 {
width: 100px;
@include box;
}

.item6 {
@include btn {
background: #ff0000;
color: #ffffff;
}
}

【出力結果】

.item1 {
color: #ff0000;
font-size: 18px;
}

.item2 {
font-size: 24px;
font-weight: bold;
}

.item3 {
font-size: 24px;
font-weight: bold;
}

.item4 {
font-size: 20px;
font-weight: normal;
}

.item5 {
width: 100px;
}

.item5 .box {
background: #ff0000;
padding: 10px;
}

.item6 .btn {
height: 100px;
width: 300px;
background: #ff0000;
color: #ffffff;
}

6.配列

配列とは、複数の値を格納できるオブジェクトを定義できます。

【記述方法】

$配列名: 値1, 値2, 値3;

【具体例】

$colors: #ff0000, #00ff00, #0000ff;

.item1 {
background: nth($colors, 2);
// nth()関数を用いると、
// 配列内の指定したインデックス番号の要素を取得できる。
// 「0」始まりではなく、「1」始まりなので注意が必要。
}

.item#{length($colors)} {
// length()関数を用いると、
// 配列内の要素数を取得できる。
background: nth($colors, 1);
}

【出力結果】

.item1 {
background: #00ff00;
}

.item3 {
background: #ff0000;
}

7.関数

関数とは、CSSプロパティの値を自動計算する処理セットのようなものです。

【記述例】

/* 関数宣言の仕方 */
@mixin 関数名(引数１, 引数２, …) {
関数の中身
}

/* 関数の呼び出し方 */
@include 関数名(引数１, 引数２, …);

【具体例】

$breakpoint-tablet: 1024px; /* 変数宣言 / $breakpoint-mobile: 640px; / 変数宣言 */

/* $break-point以下の時に@contentを適用 / @mixin max-screen($break-point) { @media screen and (max-width: $break-point) { @content; } } / $break-point以上の時に@contentを適用 / @mixin min-screen($break-point) { @media screen and (min-width: $break-point) { @content; } } / $break-point-min以上、$break-point-max以下の時に@contentを適用 */
@mixin screen($break-point-min, $break-point-max) {
@media screen and (min-width: $break-point-min) and (max-width: $break-point-max) {
@content;
}
}

/* 使用例 / div { @include max-screen($breakpoint-mobile) { / 640px以下のとき / width: 100%; } @include min-screen($breakpoint-tablet) { / 1024px以上のとき / width: 50%; } @include screen($breakpoint-mobile, $breakpoint-tablet) { / 640px以上1024px以下のとき */
width: 80%;
}
}

【出力結果】

@media screen and (max-width: 640px) {
div {width: 100%;}
}
@media screen and (min-width: 1024px) {
div {width: 50%;}
}
@media screen and (min-width: 640px) and (max-width: 1024px) {
div {width: 80%;}
}

8.モジュール

Sassは、分割したファイルをモジュールとしてインポートし、1つのCSSファイルにまとめて出力することが可能です。

【記述方法】

@use 'base';
@use 'module';
@use 'home';

【具体例】

html {
color: #000;
background: #fff;
font-size: 16px;
line-height: 1.6;
word-break: break-all;
}

body {
background: #fff;
margin: 0;
}

.c-header {
height: 140px;
background-color: tomato;
font-weight: bold;
}

.home {
background-color: green;
.btn {
background-color: #333;
color: #fff;
transition: .3s ease-in-out;
cursor: pointer;
display: flex;
align-items: center;
height: 100px;
}
}

【出力結果】

@charset "UTF-8";
html {
color: #000;
background: #fff;
font-size: 16px;
line-height: 1.6;
word-break: break-all;
}

body {
background: #fff;
margin: 0;
}

.c-header {
height: 140px;
background-color: tomato;
font-weight: bold;
}

.home {
background-color: green;
}

.home .btn {
background-color: #333;
color: #fff;
transition: .3s ease-in-out;
cursor: pointer;
display: flex;
align-items: center;
height: 100px;
}

まとめ

SCSSには、便利な機能がさまざまあります。

CSSでは手間のかかっていた記述が、変数やネスト構造を利用することで、効率的に記述できるようになります。

SCSSを活用し、開発期間の短縮を実現しましょう。