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);
}
Can I use... Support tables for HTML5, CSS3, etc
"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
caniuse.com
コメント