SassのようなCSSプリプロセッサーが登場してもう5年以上が経過しました。
SassやLESSは関数や変数などを使うことができるので非常に便利です。
関数や変数を使えるようになるだけで、大量のコードをコピーアンドペーストするという作業を省くことができ、サクサクと開発を進めることができるようになります。

ところが、コンパイルを行わなければならないという一手間が億劫で業務ではまだ使っていないという現場も多いのではないでしょうか。

さらに、プリプロセッサーの変数にはいくつかの制限もあります。
変数はDOM構造と結びつくことはなく、JavaScriptから読み込んだり変更したりすることができないという点です。

そうした問題に対処するために新しくCSSに導入されたのが、*「CSSカスタムプロパティ」(CSS Variables)*です。
基本的に、CSSカスタムプロパティは、プリプロセッサーの変数と同じように働きます。

今回は、圧倒的にデザインが便利になる*「CSSカスタムプロパティ」についての基本的な使い方*を解説します。
プリプロセッサーを使う時のようにコンパイルを行う必要もなく、新しく文法を覚える必要もありません。

「CSSカスタムプロパティ」の基本

css.jpeg

大抵の場合、言語やフレームワークを新しく学ぶためには、新しい文法を学んでいく必要があります。

プリプロセッサーではそれぞれ変数を宣言する方法が異なります。
例えば、Sassであれば*「$」、LESSであれば「@」*を変数名の前につけます。

CSSカスタムプロパティでは、同じように*「--」(ダッシュ2つ)*を変数の前につけます。
ありがたいことに、新しく覚えるのはたったこれだけのルールで、ブラウザごとに文法を分けて書く必要は一切ありません。

例えば、boxのcolorやpaddingを指定したいとき、変数の前に「--」をつけて次のように指定します。

.box{
　　--box-color: #0060e6;
　　--box-padding: 0 10px;
}

変数を使いたい時には*「var()」*というCSSの関数を使い、括弧の中身にカスタムプロパティー名を入力します。

.box{
　　--box-color: #0060e6;
　　--box-padding: 0 10px;
　　padding: var(--box-padding);
}

.box div{
　　color: var(--box-color);
}

*「var()」*を使った方法は非常に簡単です。
しかも、カスタムプロパティーが前に宣言されているかどうかわからない時にも、次のように使うことで、フォールバックを設定することができます。

.box{
　　--box-color: #0060e6;
　　--box-padding: 0 10px;
　　margin: var(--box-margin, 10px);
}

この場合、「--box-margin」は以前に宣言されていないので、marginは10pxのほうを取ります。

このような使い方をすることもできます。

.box{
　　padding: var(--box-padding, var(—key-padding));
}

上の例では、「--box-padding」が指定されていない場合には、「--main-padding」を採用します。