webサイト制作の勉強|2018月2月クラスブログ

webサイト制作の勉強に関する解説ブログです。

CSSで変数が使えるカスタムプロパティ

cssで変数というとSASSやLESSといったcssを拡張したメタ言語が一般的ですが、最近ではcssのみでも変数を使う事が出来ます。
SASSやLESSと比べると、出来る事は少ないですが、cssファイルに直接記述する事が出来、非常に簡単なので、まずはcssカスタムプロパティを使って、css内で変数を使う事に馴れて見ましょう。



カスタムプロパティ

カスタムプロパティで変数化出来るのはcss数値で指定出来る値です。css animationと同じような感じです。

CSS変数の定義

まずはjsと同じように最初に変数宣言します。その際に「:root」を用います。

:root {
--box_w:100%;
--box_h:100vh;
--bg_color: #333;
--m10:10px;
}


次に変数を呼び出したい場所で「var(--変数名);」と呼び出します。

.box {
width: var(--box_w);
height: var(--box_h);
background: var(--bg_color);
}
calc()関数と一緒に使うことで、より便利になります。
.box {
margin-bottom:calc(var(--m10)*50);
}


f:id:yachin29:20180721021425p:plain

https://caniuse.com/#feat=css-variables