特定の色に名前をつけたい

Question

color: red;

と記述すると，赤になりますが，

color: hoge;

と記述したときに，指定したホゲ色にしたいと思います．

.hoge{
 color: #aabbcc;
} 

としたときに，

<div class="hoge">

と使うのではなく，

.hoge{
 color: #aabbcc;
} 
.piyo{
 color: hoge;
}

としたときに

<div class="piyo">

でホゲ色にしたいです．

Comments

[kei344]

質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

Answer 1

変数を宣言します:

element {
--main-bg-color: brown;
}

変数を使用します:

element {
background-color: var(--main-bg-color);
}
CSSの変数を使う - CSS | MDN

ブラウザの対応状況に注意してください。
Can I use... Support tables for HTML5, CSS3, etc

Comments

[退会済みユーザー]

ご回答ありがとうございます．chromeでできました．
(が，ご指摘の通り，IEではできませんでした)

Answer 2

標準機能では Lhankor_Mhyさんの書かれた方法くらいだと思います。

Sass/Scss/Less のようなものなら変数も使えます。

【Sass？ Scss？！ Less！？ CSSと何が違うの？ ・・まとめてみた。 - sparkle】
http://brriant.hatenablog.com/entry/2015/09/22/145413