cssで定数を定義することはできますか？

Question

私は、CSSスタイルシート全体でいくつかの色を使用します。例えば

#testdiv{ 
    background: #123456; 
} 

は、それは私が無地CSSでないこの

#testdiv{ 
    background: COLORNAME; 
} 

Answer 1

あなたが、むしろそれをコーディング以外に色を割り当てるおそらく各要素に対して、それをCSSクラスを定義し、再利用するより良い練習です特定の要素。

ので、同じように：

.darkBackground { 
    background: #123456; 
} 

.smallText { 
    font-size:8pt; 
} 

また、要素はあなたが別々のクラスにあなたの「定数」要素の値を抜け出すと、必要に応じて複数を適用することができるように適用される複数のクラスを持つことができることを知っているのに役立ちます。

<div id="myDiv1" class="darkBackground smallText"></div> 
<div id="myDiv2" class="darkBackground bigText"></div> 

Answer 2

のようなCSSのシートでそれを参照できるように名前によってその色を定義することは可能ですが、一部のCSSの拡張があり、あなたができましたSASSまたはless-cssのように使用します。ここで

は、以下のCSSの例です：

@color: #4D926F; 

#header { 
    color: @color; 
} 
h2 { 
    color: @color; 
} 

Answer 3

SASSまたはlessを使用してください。

最近では、上記のようなプリプロセッサを使用することで、フロントエンドの開発ワークフローが改善されています。

これは、変数やミックスインなどの機能が組織化され、機能するのに役立ちます。これは、考慮する価値がある理由のいくつかです。

Answer 4

これにはcouple of proposalsがありますので、すぐに発生する可能性がありますが、私が知る限り、まだ標準化されているものはありません。

CSSクラスを使用する際の問題は、たとえば、ある要素の境界線に特定の色の値を使用する場合など、異なるプロパティに同じ値を使用する場合に役立たないことです。背景色を別の色にする。

Answer 5

標準的な方法はPHPです。その場所でPHPスクリプトを実行し、

#define COLORNAME: #123456;

代わりのHTMLファイルの先頭にあるCSSファイルへのリンクのように、あなたのCSSファイルの先頭での#define文を追加します。スクリプトはCSSファイルを読み込み、COLORNAMEのすべての文字列を#123456に置き換えて、echoまたはprintを使用してパッチを適用したテキストをクライアントにストリームします。

また、PHPを使用してソースファイルをアップロードし、PHPを使用して#definesのすべての箇所が置き換えられたCSSファイルを作成し、そのファイルをHTMLで使用することもできます。これは、HTMLファイルをロードするたびにではなく、アップロード時に1度だけ変換を実行するので、より効率的です。

Answer 6

あなたはこのようにそれらを宣言し、CSSファイルで定数を持つことができます：あなたがそれらを使用することができた後

.menu-item:focused { 
    -fx-background-color: -my-lightBlue; 
} 

：

*{ 
-my-lightBlue: #99ccff; 
-my-lightGray: #e6e6e6; 
} 

次に、あなたはこのようなCSSファイルでそれらを使用することができますプログラムでは次のようになります。

progressBar.setStyle("-fx-accent: -my-lightBlue;"); 

Answer 7

CSSでは、あなたの定数を宣言できます：root bloc： VAR（）メソッドで

:root { 
    --main-bg-color: #1596a7; 
} 

と使用：

.panel-header { 
    background: var(--main-bg-color); 
    color: .... 
} 

Answer 8

はい、クラスを使用することは良い方法ですが、CSSで変数を宣言することが可能になりました。同じ色を宣言するとき（特に色のもの）は非常に便利です（統合された色を使用する場合は16進値が必要です）。

これは普通のCSSを使用しています（そして、tbh、SASSまたはlessCSSを使用するほど優雅ではありません）が、これは普通のCSSの目的のために機能します。まず、:rootブロックの実際の変数を定義します。たとえば、以下のように定義することができます。 pブロック（またはそれ以外のもの）でも、そのブロックでのみ利用可能になります。

:root { 
    --custom-color: #f0f0f0; 
} 

そして、（それが実際の参照として解決されることはありませんVAR法なし）varメソッドを使用して、あなたがそれを後で参照することができます。だから、ルートブロックに入れて、世界的にアクセス可能なことを確認します

:root{ 
    color: #00ff00; 
} 

： :rootブロック要素を参照する、完全に機能ブロック（他のすべてのCSS宣言のような）であるので

p{ 
    color: var(--custom-color); 
} 

、あなたのような何かを宣言することはできません

これは、すべての単一要素のcolor属性を参照し、（この例では）#00ff00に設定します。

:root{ 
    --color: #00ff00; 
} 

そして再び、あなたは、SASSまたはlessCSSのようなものを使用することができた場合：あなたは宣言するすべての変数名は、あなたが行うことができることを意味し、--で開始することがあります。 @color = #fff *を記述し、@color *を参照して宣言する機能は、普通のCSSを扱うよりもはるかに簡単で、カスタムプロパティにアクセスするたびにvarキーワードを使用する必要があります。

そして、あなたが取得および/または特性を変更するためにJSでインラインCSSにアクセスすることができます。

//Inline CSS 
element.style.getPropertyValue("--custom-color"); 

// get variable from wherever 
getComputedStyle(element).getPropertyValue("--custom-color"); 

// set variable on inline style 
element.style.setProperty("--custom-color", "#f0f0f0"); 

NOTE！

これは最近追加された機能なので、browser compatibility is important to checkです。特に変数の宣言自体の導入とvar()メソッドの間にはギャップがあるため、特に注意が必要です。

_{* lessCSSとそれはそれはあなたがそのようなSASSなどのフレームワークを使用する場合は、あなたが他の華麗な機能と一緒に、この機能を取得します$color}