新しいCSSカラー名を定義する

Question

HTML標準では色の集まりが定義されていますが、CSSで新しい色を定義して使用することはできますか？

は、私は色のDoctorWhiteを持つようにしたい、と私は

background-color:DoctorWhite;

ようにそれを使用したい私はあまりCSSは、変数を定義し、アットマーク（@）の表記でそれを使用することができます知っていると言います。しかし、ネイティブカラーのようには見えません。

CSSが少なくても使えますか？それとも他のCSSプリプロセッサがこれをサポートしていますか？

Answer 1

CSS custom propertiesとお考えですか？ここ

:root { 
 
    --stackoverflow: #f69c55; 
 
} 
 
.rectangle { 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 10px auto; 
 
} 
 
.rectangle.default-color { 
 
    background-color: black; 
 
} 
 
.rectangle.custom-color { 
 
    background-color: var(--stackoverflow); 
 
}

<div class="rectangle default-color"> 
 
    <!-- will become black --> 
 
</div> 
 
<div class="rectangle custom-color"> 
 
    <!-- will become orange --> 
 
</div>

、var()関数は--stackoverflow変数（すなわち#f69c55）の値に.rectangle.custom-colorのbackground-colorプロパティの値を設定するために使用されています。

これはW3C仕様になることを覚えておいてください。@Ricky_Ruizが示唆するように、CanIUseのようなサービスを使用しているブラウザでサポートされていることを確認してください。

サイドノート：2つのダッシュ（--）カスタム変数名の先頭には、任意ではありません。

カスタムプロパティは、名前が2つのダッシュ（U + 002D HYPHEN-MINUSで始まるすべてのプロパティです）、--fooのように。これは、2つのダッシュで始まる有効な識別子として定義されています。

詳しくはsection 2 of the Candidate Recommendation documentをご覧ください。 LESSで

Answer 2

号

、あなたは変数が@でマークされている、言ったように。 Sassには、$とマークされています。例として、あなたのDoctorWhiteが#fffffeた場合：

LESS：@DoctorWhite: #fffffe; div {background-color: @DoctorWhite}
サス：$DoctorWhite: #fffffe; div {background-color: $DoctorWhite}

として@blonfuはスタイラスで彼らは何もマークされていない、と言う - ので、あなたの目的は、にある場合プリプロセッサスタイルシートを見る人には、あなたのカスタムカラー名が標準化されたカラー名であると思うようにしてください。

スタイラス（しかし、それは...ユースケースを想像するのは難しい）：

DoctorWhite = #fffffe 

put a bunch of other styles here so the viewer doesn't notice you defined DoctorWhite 

div 
    background-color DoctorWhite 

しかし、すべてのケースでは、あなたが実際にHTMLが色を持っているという意味で新しいカラー名を定義していないWhiteSmoke 。コンパイルされたCSS（ロードされたスタイルシートに表示され、ブラウザのインス​​ペクタに表示される）は、上記のすべての例でDoctorWhiteに与えられた16進値を引き続き使用します。 CSSは
div {background-color: #fffffe}になります。