くまだどうも、くまだです。
CSSのカスタムプロパティについてのメモ。
CSSのカスタムプロパティ
Sassでいう$変数的な使い方を、CSSでも使うことができます。記述は以下になります。
:root {
--baseFontSize:18px;
--baseColor: red;
}
.text {
font-size: var(--baseFontSize); /* 18px*/
color: var(--baseColor); /* red*/
}
ブレイクポイントごとにスタイルを変えたい場合は、以下のように記述してスタイルを上書きできます。
:root {
--baseFontSize:18px;
--baseColor: red;
}
.text {
color: var(--baseColor);
font-size: var(--baseFontSize);
}
@media (min-width: 768px) {
.text {
--baseColor:blue;
--baseFontSize:20px;
}
}HTMLのstyle属性にカスタムプロパティを埋め込んで使うこともできます。
<div class="boxWrap" style='--grid-col:3;'>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>.boxWrap {
--gridGap:20px;
display: grid;
grid-template-columns: repeat(var(--grid-col),1fr);
gap: var(--gridGap);
}
ちなみにJavaScriptでカスタムプロパティの値を操作することもできます。
ちなみに、メディアクエリのブレイクポイントにはカスタムプロパティが適用されないようです。
@media (min-width: var(--beakpoint-md)) { /* これは効かない */
}とはいえ、Sassの変数よりもいろいろ応用できるのでカスタムプロパティのほうが便利な印象です。
Sassを使う理由の半分ぐらい消えたかもしれない…笑
ここまで読んでくださりありがとうございました。