Sassでよく使う6つの機能

今回は、筆者がSassでよく使う6つの機能について紹介したいと思います。Sassはまだ使ったことないけど、これから使ってみたいという方へ参考になれば幸いです。

【本記事の内容】

Sass使うと何が便利なのか？
Sassで最低限覚えるべき機能は6つ

スポンサードサーチ

Sassを使うと何が便利なのか

SassというのはCSSを効率的に書くために開発された言語です。そして、Sassには２種類の記法があってSCSS記法とSASS記法と呼ばれるものがあります。現在主流なのがSCSS記法で、今回紹介するのもSCSS記法です。

では、Sassを使うと何が便利なのかを述べたいと思います。Sassでは、コードの再利用や変数、演算、条件分岐といったプログラム的な書き方を可能にしてくれます。CSSをプログラム的にかけると何が便利かというと、色を変数で管理することで、サイトのメインカラーを変えたいとなった時に、CSSだけであれば全てのプロパティの色の値を変えなければなりませんが、Sassだと変数を指定している色を１つ変えれば済みます。また、ネストを利用することでソースコードの可読性が上がったり、＆（アンパサンド）を利用することで記述量を減らすことができたりします。Sassの使い始めは、慣れないかもしれませんが、使い慣れると非常に便利で作業効率を上げることができます。

Sassでよく使う６つの機能

Sassで筆者がよく使う機能は以下の６つです。

＆（アンパサンド）
ミックスイン
変数
２種類のコメント
パーシャルによるファイル分割
ネスト

＆（アンパサンド）

Sassでは、「&」をセレクタ名の前に使うことで、親のセレクタ名と繋げたセレクタを作成することが可能です。言葉で説明するとわかりづらいので、実際のコードを見てみましょう。

＆（アンパサンド）を使った書き方の例１

//cssで書いた場合
.link{
    color: red;
}

.link:hover{
    color:blue;
}

//Sassで書いた場合
.link{
    color: red;

    &:hover{
        color: blue;
    }
}

＆（アンパサンド）を使った書き方の例２

//cssで書いた場合
.header{
    background-color: #fff;
}

.header__logo{
    font-size: 24px;
}

//Sassで書いた場合
.header{
    background-color: #fff;

    &__logo{
        font-size: 24px;
    }
}

このように、＆（アンパサンド）を使うとコードの記述量を減らすことができます。

ミックスイン

ミックスインはSassの機能の中でもよく使われる機能の１つです。ミックスインについて簡単に解説すると、あるまとまったCSSを定義し、それを別の場所で呼び出して使えるという機能です。これも言葉で解説するとわかりづらいので、実際のコードを見てみましょう。

ミックスインを使った記述例

// ミックスインの定義
@mixin card {
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    color: #333;
}


// ミックスインの呼び出し
.contents-card{
    @include card;
}

このように、ミックスインではよく使うコードをまとめて、呼び出すことでコード全体の記述量を減らすことができます。ちなみに定義したミックスインは@include ミックスイン名;で呼び出すことが可能です。

ミックスインを利用したメディアクエリの記述例（ミックスインの応用）

// ミックスインの定義
@mixin sp {
    @media (max-width: 768px) {
        @content;
    }
}

// ミックスインの呼び出し
.inner{
    padding: 0 50px;
    margin: 0 auto;
    max-width: 1100px;
    width: 100%;

    // スマホ時のCSSを指定
    @include sp{
        padding: 0 30px;
    }
}

このようにメディアクエリを利用すると、レスポンシブの対応の記述も簡潔に書くことができます。ちなみにここで出てきた@content;はスタイルなどのCSSをミックスインに渡す機能です。

変数

変数もSassを利用する大きな利点の１つです。先ほども紹介した通り、色の指定やfont-familyの指定の際に非常に便利です。LPのコーディング程度では、あまりそのメリットを感じられませんが、大規模なサイトやアプリのコーディングではいちいち「ここの色のコードなんだっけ？」とならず、変数名を指定するだけなので管理が非常に楽になり、大きなメリットを実感できます。

変数を利用した記述例

// 色の定義
$MainColor:#333;
$SubColor:#f7f7f7;
$AccentColor:#0033ff;

.header{
    background-color: $MainColor;
    color: $SubColor;
}

コメント（２種類）

Sassを実際に用いる際には、SassをCSSに変換（コンパイル）して利用します。そして、Sassではそのコンパイル後にも残るコメントと、コンパイル後は消えてしまうコメントがあります。それぞれの書き方は以下の通りになっています。

// コンパイル後に消えるコメント

/* コンパイル後も消えないコメント */

必要な箇所に適切なコメントを残すには、上記の違いを理解しておくとよいかと思います。

パーシャルによるファイル分割

Sassにはパーシャルというファイルを分割する機能があります。CSSでファイルを「style.css」「reset.css」「module.css」と分けてしまうと、ファイルの数だけHTTPリクエストが発生してしまい、パフォーマンスが若干低下する問題があります。（ファイル3つくらいでは、ユーザーが体感できるほどのパフォーマンスの低下はしないが、もっと数が増えるとパフォーマンスが落ちる可能性がある。）そこで、パフォーマンスと管理のしやすさを両方ともクリアできるのが、パーシャルによるファイル分割です。パーシャルのファイルを作成するにはファイルの先頭をアンダースコア（_）で書き始めます。

例）_reset.scssなど

パーシャルによるファイル分割を利用した例

// style.scss
@import "_variables.scss";
@import "_mixin.scss";
@import "_base.scss";
@import "_module.scss";
@import "block/**";

この例では、「_variables.scss」「_mixin.scss」「_base.scss」「_module.scss」が「style.scss」と同じフォルダ内にあることを前提とした例です。ちなみに「block/**」というのはblockフォルダの直下にあるファイル全てを読み込むという意味になります。この例だと少しわかりづらいという方は、こちらのソースコードを参考にしてみてください。このようにパーシャルを利用してファイルを分割することで、パフォーマンスを落とすことなく、それぞれのファイルを管理しやすくできるようにできます。

ネスト

　ネストとは、HTMLの構造に合わせて入れ子で書いていくことができる機能です。これも具体例を見てみましょう。

<section>
    <h2>heading</h2>
    <ul>
        <li>list1</li>
        <li>list2</li>
    </ul>
</section>

// scss
section{
    background-color: #333;

    h2{
        font-size: 30px;
    }

    ul{
        margin-bottom: 20px;

        li{
            font-size: 18px;
        }
    }
}

このように、HTMLの構造に合わせて記述できるのでCSSよりも記述量が減り、SCSSを見るだけでも構造を把握することができメンテナンス性も向上します。

＊しかし、ネストの階層は深すぎると返って可読性が落ちてしまうので注意が必要です。コンポーネント設計を意識するのであれば、ネストは2〜3階層くらいにすべきですし、HTMLの構造に合わせてCSSを書いていきたいなら5〜6層になることも仕方ないでしょう。慣れないうちは、コンパイル後のCSSを常に確認しながらSassを書いていくのが良いかと思います。

スポンサードサーチ

Sassのコンパイル

先ほども少し触れましたが、Sassを実際に用いる際には、SassをCSSに変換（コンパイル）して利用することになります。ターミナルなどを使ってSassをコンパイルできることが理想ですが、環境構築に悩みSassの利用を諦めてしまうことの方が勿体無いので、最初のうちはkoalaやPreprosなどのGUIツールを使ってSassを利用するのもよいかと思います。GUIツールを使えば、黒い画面を利用することなく簡単にSassをコンパイルすることができます。どちらも無料で使えます。

まとめ

最後に、本記事の内容を改めてまとめると、Sassで筆者がよく使う機能は以下の６つです。

アンパサンド
ミックスイン
変数
コメント
パーシャルによるファイル分割
ネスト

Sassには他にもまだまだ便利な機能がありますが、最低限この６つの機能が使えるだけでも、今後CSSを書く際の効率が大きく変わってくると思います。記事の途中でも紹介しましたが、こちらのソースコードの方で実践に即した形でSassを利用したコードがあるので、もし簡単な例ばかりで実際はどんな感じに使われるのかがイメージ湧かないという方がいたら参考にしてみてください。また、もっとSassを勉強したいという方は下記の書籍がオススメです。

Web制作者のためのSassの教科書改訂2版 Webデザインの現場で必須のCSSプリプロセッサ

created by Rinker

では本記事の内容は以上となります。最後まで読んでいただきありがとうございました。