【Sass初心者入門】Sassの便利機能についてそれぞれ解説します。

なやむくん

Sassを使いこなしたい

なやむさん

便利な機能を知りたい

などの疑問や悩みを解決してまいります。

前回の【Sass初心者入門】Sassとは？Sassの使い方解説します。ではSassについてとSassの使い方を解説しました。

ただ前回の記述だけではCSSを直接書くのと変わりありません。

今回の記事を読んでいただくことで、Sassを使うメリットを充分に感じることができるでしょう。

それでは解説していきます。

本記事の目次

1 ネスト構造（入れ子）
2 ＆（アンパサンド）
3 変数を使うことができる
4 @mixin と @incluid
5 @extend
- 5.1 %（プレースホルダーセレクタ）
6 まとめ

ネスト構造（入れ子）

以下のHTMLを用意しました。

    <body>
        <main id="main">
            <section class="sec">
                <h1 class="ttl">【Sass初心者入門】Sassの便利機能について解説します。</h1>
                <p class="txt">ネスト（入れ子）について<span>解説</span>します。</p>
            </section>
        </main>
    </body>

CSSでは詳細度を高めるために親要素のセレクタも記述します。

＆（アンパサンド）

＆（アンパサンド）は親要素に置き換わる性質を持っています。

実際にコードを見てもらった方が早いと思いますので以下のコードをご覧ください。

    <body>
        <main class="main">
            <section class="main__sec">
                <h1 class="main__sec_ttl">【Sass初心者入門】Sassの便利機能について解説します。</h1>
                <p class="main__sec_txt">＆（アンパサンド）について解説します。</p>
            </section>
        </main>
    </body>

.main {
    &__sec {
        &_ttl {
            font-size: 24px;
        }
        &_txt {
            color: pink;
        }
    }
}

上記Sassファイルの記述をコンパイルすると以下のようになります。

.main__sec_ttl {
  font-size: 24px;
}
.main__sec_txt {
  color: pink;
}

冒頭でも説明しましたが、＆は親要素に置き換わる性質を持っています。

つまり &__sec の＆（アンパサンド）は親要素が .main であるため、 .main に置き換わり .main__sec となります。

また &_ttl と &_txt の＆は親要素の .main_sec に置き換わるため、 .main__sec_ttl と .main__sec_txt という記述になります。

親要素を＆の1文字で置き換えることができるので記述が時短できます。

みつた

BEMとの相性がいいのでクラスの命名も考えてみてもいいかもですね！

変数を使うことができる

Sassでは変数を使用することができます。

変数とは、値を入れることができる箱のようなものです。

変数を使うことで以下のようなことができます。

    <body>
        <main class="main">
            <div class="box1">
                <h1 class="ttl">変数を使うことで一箇所変更するだけで一括変更が可能です。</h1>
                <p class="txt">変数を使うことで一箇所変更するだけで一括変更が可能です。</p>
            </div>
            <div class="box2">
                <h1 class="ttl">変数を使うことで一箇所変更するだけで一括変更が可能です。</h1>
                <p class="txt">変数を使うことで一箇所変更するだけで一括変更が可能です。</p>
            </div>
        </main>
    </body>

$primaryColor: #444444; //変数を定義します
.main {
    .box1 {
        .ttl {
            color: $primaryColor;
        }
        .txt {
            color: $primaryColor;
        }
    }
    .box2 {
        .ttl {
            color: $primaryColor;
        }
        .txt {
            color: $primaryColor;
        }
    }
}

上記では $primaryColor という変数に値#444444を代入しています。

ポイント

変数の定義は、$変数名 :値;

みつた

変数に値を入れることを「代入」と言います。

CSSにコンパイルすると以下のようになります。

.main .box1 .ttl {
  color: #444444;
}
.main .box1 .txt {
  color: #444444;
}
.main .box2 .ttl {
  color: #444444;
}
.main .box2 .txt {
  color: #444444;
}

本来ならすべてのテキストの色を変更するとなると4箇所書き換えなくてはいけません。

しかし、変数の値を書き替えるだけですべての色を一括で変更することが可能です。

$primaryColor: #e30000; //変数の値を変更するだけで一括で変更できる。
.main {
    .box1 {
        .ttl {
            color: $primaryColor;
        }
        .txt {
            color: $primaryColor;
        }
    }
    .box2 {
        .ttl {
            color: $primaryColor;
        }
        .txt {
            color: $primaryColor;
        }
    }
}

変数 $primaryColor の値を変更するだけで、 $primaryColor の値が書き換えられ一括で変更することができます。

CSSにコンパイルすると以下のようになります。

.main .box1 .ttl {
  color: #e30000;
}
.main .box1 .txt {
  color: #e30000;
}
.main .box2 .ttl {
  color: #e30000;
}
.main .box2 .txt {
  color: #e30000;
}

このように一括で変更できました。

みつた

よく使われる値を変数でまとめておくことで、修正や変更があったときに管理しやすいです！

@mixin と @incluid

「同じデザインだけど一部色が違っている」であったり、レスポンシブ作成時に何度も「media screen and ~ 」と記述するのが面倒などのとき便利な機能がこの @mixin です。

例として以下の信号機を作るとします。

信号機の赤、黄、緑の部分は色が違うだけで形は同じです。

なので形を作るCSSは3つとも同じですが、3カ所に同じ記述、そして変更や修正があった場合は3カ所を修正しなければならなくなったりと管理が面倒です。

これらを解消するために @mixin の出番となります。

    <body>
        <main>
            <div class="box1"></div>
            <div class="box2"></div>
            <div class="box3"></div>
        </main>
    </body>

// @mixinを定義
@mixin boxContent {
    width: 100px;
    height: 100px;
    border: 1px solid #444444;
    border-radius: 50px;
}
// ここまで
main {
    width: 350px;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    border: 1px solid #444444;
    border-radius: 100px;
    padding: 10px;
    .box1 {
        @include boxContent(); // @incluid で @mixin を呼びだす
        background-color: red;
    }
    .box2 {
        @include boxContent(); // @incluid で @mixin を呼びだす
        background-color: yellow;
    }
    .box3 {
        @include boxContent(); // @incluid で @mixin を呼びだす
        background-color: green;
    }
}

style.scss を見てください。

まず最初に @mixin を定義しました。定義方法は以下です。

@mixin の定義

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

定義した@mixin を使うには @incluid を使って呼びだす必要があります。

@mixin の呼びだし方

@incluid @mixin の名前();

なので@mixin と @incluid はセットで覚えておくといいでしょう。

コンパイルするとstyle.cssは以下のようになります。

main {
  width: 350px;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  border: 1px solid #444444;
  border-radius: 100px;
  padding: 10px;
}
main .box1 {
  width: 100px;
  height: 100px;
  border: 1px solid #444444;
  border-radius: 50px;
  background-color: red;
}
main .box2 {
  width: 100px;
  height: 100px;
  border: 1px solid #444444;
  border-radius: 50px;
  background-color: yellow;
}
main .box3 {
  width: 100px;
  height: 100px;
  border: 1px solid #444444;
  border-radius: 50px;
  background-color: green;
}/*# sourceMappingURL=style.css.map */

結果が先ほどの表示になります。

色以外は同じ形なので@mixinでまとめておくと記述量も少なくなり、メンテナンス性も上がります。

引数を使った @mixin

引数とは、簡単に説明すると「外部から値を渡す」というもので、@mixin では引数を使うことができるようになります。

実際に見た方が理解が早いと思うので、やっていきたいと思います。

@mixin txtColor($color) {
    color: $color;
}
main {
    .content {
        @include txtColor(pink);
    }
}

上記は @mixin の txtColorに引数である$colorを用意しました。

引数は @mixin の名前の後の（）の中に変数と同じように$引数名で使うことができます。

ポイント

引数は @mixin の名前の後の（）の中に$から始まる引数名を記述することで使えるようになる

引数の値と同じ内容をCSSで使いたい場合は、プロパティの値にも同じ引数名を記述します。

そして @incluid で@mixin を呼びだす際に（）の中に値を入れることで、その中の値が引数に渡される仕組みです。

コンパイルするとCSSは以下のようになります。

main .content {
  color: pink;
}/*# sourceMappingURL=style.css.map */

colorプロパティの値がpink;になっていることが分かります。

複数の引数を使った @mixin

引数は複数指定することもできます。

以下のコードをご覧ください。

@mixin txtBorder($borderWidth, $borderLine, $borderColor) {
   border-bottom: $borderWidth $borderLine $borderColor;
}
main {
    .content {
        @include txtBorder(1px, solid, pink);
    }
}

このように引数をカンマ（,）で区切ることで引数を複数指定することもできます。

コンパイルするとCSSは以下のようになります。

main .content {
  border-bottom: 1px solid pink;
}/*# sourceMappingURL=style.css.map */

border-bottomの値がそれぞれ渡されていることが分かりますね。

引数に初期値を設定

これまでは引数に@incluid で呼びだしたときに値を渡していたのですが、初めから値を引数に指定することも可能です。

初期値の設定方は以下コードをご覧ください。

@mixin txtColor($color: pink) {
   color: $color;
}
main {
    .content {
        @include txtColor;
    }
}

引数の後に続けて : 値;とすることで初期値を設定することができます。

ポイント

引数の初期値は@mixin 名前($引数名: 値;){} とすることで設定ができる

コンパイルするとCSSは以下のようになります。

main .content {
  color: pink;
}/*# sourceMappingURL=style.css.map */

colorプロパティの値がpink;になっていることが分かります。

@extend

@extend はスタイルを継承してくれる機能です。

簡単に説明すると、.box1 のCSSを .box2 にも同じ内容を継承するということです。

以下コードをご覧ください。

    <body>
        <main>
            <div class="box1"></div>
            <div class="box2"></div>
        </main>
    </body>

main {
    .box1 {
        width: 300px;
        height: 300px;
        background-color: pink;
    }
    .box2 {
        @extend .box1;
        margin-top: 30px;
    }
}

このように@extendは、継承したいセレクタの中で@extendのあとに継承元のセレクタを記述することで使えるようになります。

@extendの使い方

継承先セレクタの中で、@extend 継承元のセレクタ;

コンパイルするとCSSは以下のようになります。

main .box1, main .box2 {
  width: 300px;
  height: 300px;
  background-color: pink;
}
main .box2 {
  margin-top: 30px;
}/*# sourceMappingURL=style.css.map */

.box2にも.box1のCSSの内容が継承されていることが分かります。

%（プレースホルダーセレクタ）

先程は.box1のセレクタも使用していましたが、CSSだけを継承させたいという場合はこの%（プレースホルダーセレクタ）を使用します。

main {
    %box1 {
        width: 300px;
        height: 300px;
        background-color: pink;
    }
    .box2 {
        @extend %box1;
        margin-top: 30px;
    }
}

CSSだけを継承させたいセレクタの前に％を記述します。

コンパイルするとCSSは以下のようになります。

main .box2 {
  width: 300px;
  height: 300px;
  background-color: pink;
}
main .box2 {
  margin-top: 30px;
}/*# sourceMappingURL=style.css.map */

このように.box1はなくなり、.box1のCSSだけが.box2に継承されたような形になります。

継承用のCSSを用意したいときに%（プレースホルダーセレクタ）は有効です。

まとめ

今回は初心者でもわかりやすく、簡単にSassを使用できるようにSassの基本的な便利機能について解説しました。

CSSを効率的にかつ管理しやすくなるのでSassを使用するメリットは大きいと思います。

この記事がSassを使ったことがない人や苦手意識がある人などの助けになれたら幸いです。

【Sass初心者入門】Sassの便利機能についてそれぞれ解説します。

ネスト構造（入れ子）

【初心者向け】CSSの優先度について解説します

＆（アンパサンド）

変数を使うことができる

@mixin と @incluid

引数を使った @mixin

複数の引数を使った @mixin

引数に初期値を設定

@extend

%（プレースホルダーセレクタ）

まとめ