Sassで最低限覚えておきたい6つの機能

こんにちは、Yukiです。

今回はSassで最低限覚えておきたい6つの機能を解説していきたいと思います。

まだ使ったことないけど、これからSassを使ってみたいというコーダーやマークアップエンジニア、サーバーサイドエンジニアの方向けの内容となっています。

【本記事の内容】

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

スポンサードサーチ

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

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

では早速、そもそもSassを使うと何がどう便利なのかという話をしていきたいと思います。

Sassでは、コードの再利用や変数、演算、条件分岐といったプログラム的な書き方をCSSで可能にしてくれます。CSSをプログラム的にかけると何が便利かというと例えば…

色を変数で管理することで、サイトのメインカラーを変えたいとなった時に、CSSだけであれば全てのプロパティの色の値を変えなければなりませんが、Sassだと変数を指定している色を１つ変えれば済みます。

さらに、ネストを利用することでソースコードの可読性が上がったり、＆（アンパサンド）を利用することで記述量を減らすことができたりします。

Sassの使い始めはなかなか慣れないかもしれませんが、使い慣れると「もうSassを使わないとかあり得ない！」という感覚になります。

では次は、Sassで最低限覚えるべき機能6つを紹介したいと思います。

Sassで最低限覚えるべき機能6つ

Sassで最低限覚えるべき機能は以下の6つです。

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

では詳しくみていきましょう。

＆（アンパサンド）

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をミックスインに渡す機能です。

ミックスインを使ったこの2つの書き方は、非常に便利なのでぜひ覚えておきましょう。

変数

変数もまた、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を書いていくのが良いかと思います。

スポンサードサーチ