WEB/システム/IT技術ブログ

CSS変数(カスタムプロパティ)を使ってみる

update : 2021/12/26

CSS変数を使ってみます。

例えば、CSSでテーマカラーなど同じ値を複数個所のプロパティに設定する場合、管理が煩雑になりますね。

body{
	color: #333333;
}
a{
	color: #333333;
}
table{
	border-color: #333333;
}

これまでは、sassで変数を管理していました。
ただ、最近はCSSのみで変数(カスタムプロパティ)が使えるようになったようです。

先ほどの例をCSS変数で記述すると、以下のようになります。

:root{
	--black: #333333;
}
body{
	color: var(--black);
}
a{
	color: var(--black);
}
table{
	border-color: var(--black);
}

「:root」はスタイル全体に適用、つまり、グローバル変数のようなイメージです。
変数には先頭にハイフン「-」を2つ付けます。
変数を呼び出すには、各プロパティの値にvar関数で変数名を指定します。

対応ブラウザは、IE以外は動作するようなので問題ないですね。
うまく活用すれば、sassを使わなくてもある程度テーマ管理できそうですね。

B!

Comment

Comment Form

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Monthly Archives