varで赤い箱にする

まずはvarで赤い箱にします｡

HTML

<div class="var">
varで赤色にする
</div>

var

:root{
--bg:red;
--w:100px;
--h:100px
}

.var{
background: var(--bg);
width: var(--w);
height: var(--h);
}

rootに登録します｡ここでは､色と正方形(100px)を指定しています｡あとは､それぞれ､読み込むだけ｡ちなみに､横線は2つです｡ここは注意しましょう｡

mixin

今度は､mixinで青い箱にしてみます｡

HTML

<div class="blue">
青い箱
</div>

mixin

@mixin blue{
background: blue;
width: 100px;
height: 100px;
}

.blue{
@include blue;
}

mixinにスタイルを書きます｡あとは､@includeで読み込み｡簡単です｡

varとmixinを同時に使用する

varとmixinを同時に使用します｡今回は水色の箱にしたい｡

HTML

<div class="mizu-box">
水色の箱
</div>

varとmixin

:root{
--bg-2:aqua;
}

@mixin mizu{
background: var(--bg-2);
width: 100px;
height: 100px;
}

.mizu-box{
@include mizu;
}

まずはrootで色を指定します(--bg-2:aqua)｡そのあと､mixiでそれを読み込み(background: var(--bg-2))｡基本的にはこれだけです｡

rootで登録したものを使います｡簡単ですね｡

さいごに

ホームページ制作の現場では使われているのだろうか｡業界にいたことはありますが､それはもう､何年も前のこと｡

いつかは復帰したい？

それはどうなるか分からないですが､地道に頑張りたい｡