CSSの変数

はじめに

CSSでも変数を使うことができるのでどのように実装するのかメモ

やり方

全体で値を再利用するために、css変数を利用することができる
rootで宣言することが一般的

.css

:root {
	--color-warning: red;
	--color-danger: yellow;
}

.danger {
    /* 背景 */
    background-color: var(--color-danger);
    /* 文字色 */
    color: white;
    /* 文字の太さ */
    font-weight: 700;
    /* 文字の位置 */
    text-align: center;
    /* 文字の大きさ */
    font-size: xx-large;
}