【Scssの書き方:後編】@mixinと変数を理解して超効率化！！

今回は、Scssを利用する最大のメリットである@mixinと変数を解説します。

これらを理解すれとCSSのみを使ってた時と比べて超効率的にコーディングを進める事が出来るため非常に楽になります。ただ制作会社案件でが割と必須な条件になってる場合もあるので何にしても早めにマスターしておきましょう。

今回は前回の記事の初めの方で紹介した以下のScssのサンプルコードを参考に解説するようにして進めていきます。

サンプルコード

// 変数
$Red:red;
$Blue: blue;
$Black: #333;
$Gray: #ddd;
$White: #fff;
$Margin: 10px;
$Padding: 10px;
// mixin
@mixin btnstyle($color:$Red) {
    cursor: pointer;
    color: $White;
    background-color: $color;
    border-radius: 100vh;
    border: none;
    padding: 5px;
    margin: 0 auto;
    &:hover {
        color: $White;
        opacity: .5;
    }
}
@mixin flexcenter {
    display: flex;
    justify-content: center;
    align-content: center;
}
// ここからスタイル
.inner {
    @include flexcenter;
}
div {
    background: $Gray;
    padding: $Padding;
    p {
        color: $Black;
        font-size: 20px;
        span {
            color: $Blue;
            font-weight: bold;
        }
    }
}
.btn1 {
    @include btnstyle;
    margin: $Margin;
}
.btn2 {
    @include btnstyle($Blue);
    margin: $Margin;
}

Scssの変数について

変数は、サンプルコード1行目から記述されているの○○＝XXのように予め定義するような事です。JavaScriptで使用されるletやconstと同じです。

Scssにおいて変数を定義するには「$変数名」と入力します。その変数名に対してcssのように「:」で区切って値を付けます。

変数	意味
$変数名: 値	変数名　＝　値

変数を呼び出す際は「$変数名」を記述すれば呼び出されます。

例えば、$Red:red;の変数を作成した場合。意味は$Redはredですという事です。この変数を使ってpタグを赤にしたい場合は次のように記述すれば良い訳です。

//変数
$Red:red;
//変数を使って記述（例）
p {
 color: $Red
}

また冒頭ので紹介したコードのように変数は;区切ればいくらでも書く事ができます。カラー以外にもmarginやpaddingでも何でも可能です。

Scssの@mixinについて

@mixinは、サンプルコード10行目から記述されている、予め作成したstyleの一式を変数として保存出来るイメージです。

@mixinを使用するときは、格納する時は「@mixin」を指定し、呼び出し時には「@include」を使用します。

@mixin XXX	格納
@include XXX	呼び出し

例えば、以下のコードの場合は「flexcenter」という名前でdisplay: flex;などを格納しています。divタグに対して一式を指定する時に@include flexcenter;と呼び出しています。

@mixin flexcenter {
    display: flex;
    justify-content: center;
    align-content: center;
}
div {
 @include flexcenter;
 }

また「@mixin XXX(変数)」といった感じに変数を入れる事が出来ます。

例えば、以下の場合はbtnstyleという名の変数に$colorという変数を入れてます。$colorはredという意味です。結果、btnstyleは赤という意味です。

@mixin btnstyle($color:red){
    background-color: $color;
}

また@mixin btnstyle($color:$Red)のように。mixinの変数の中に変数を使う事も出来ます。

そして()内に入れた変数は引数で変更することも出来ます。例えば、以下の場合は$color変数を引数でBlueに変更しています。

$Red:red;
@mixin btnstyle($color:$Red){
    background-color: $color;
}
.btn {
@include btnstyle(Blue);
}

以上が「【Scssの書き方:後編】@mixinと変数を理解して超効率化！！」でした。

まだまだScssは奥の深い求術があるので、いつかその辺の解説していきます。一先ずここまで理解出来るだけで相当な効率化を測れるので是非習得して下さい。

次は@importを説明します。