css - CSSで色を変数として定義するにはどうすればよいですか?

Question

私は非常に長いCSSファイルに取り組んでいます。クライアントが配色の変更を要求できることは知っていますが、変数に色を割り当てて、変数を変更して、それを使用するすべての要素に新しい色を適用することは可能でしょうか?

PHP を使用して CSS ファイルを動的に変更することはできないことに注意してください。

score 279 · Accepted Answer

CSS はこれをCSS 変数でネイティブにサポートします。

サンプル CSS ファイル

:root {
    --main-color:#06c;
}

#foo {
    color: var(--main-color);
}

実際の例については、この JSFiddleを参照してください(この例では、フィドルの CSS セレクターの 1 つが青色にハードコードされていることを示しています。もう 1 つの CSS セレクターは、元の構文と現在の構文の両方の CSS 変数を使用して、色を青色に設定しています) .

JavaScript/クライアント側で CSS 変数を操作する

document.body.style.setProperty('--main-color',"#6c0")

最新のすべてのブラウザでサポートされています

Firefox 31 以降、Chrome 49 以降、Safari 9.1 以降、Microsoft Edge 15以降、およびOpera 36 以降には、CSS 変数のネイティブサポートが付属しています。

score 64 · Accepted Answer

人々は私の答えに賛成し続けますが、特に最近の両方の使いやすいGUIの数を考えると、それはsass以下の喜びと比較してひどい解決策です。何か意味がある場合は、以下で提案するすべてを無視してください。

一種の変数として機能するために、各色の前のcssにコメントを入れることができます。これは、検索/置換を使用して値を変更できるため、...

cssファイルの先頭

/********************* Colour reference chart****************
*************************** comment ********* colour ******** 

box background colour       bbg              #567890
box border colour           bb               #abcdef
box text colour             bt               #123456

*/

CSSファイルの後半

.contentBox {background: /*bbg*/#567890; border: 2px solid /*bb*/#abcdef; color:/*bt*/#123456}

次に、たとえば、検索/置換を行うボックステキストの配色を変更します

/*bt*/#123456

score 38 · Accepted Answer

CSS 自体は変数を使用しません。ただし、SASSなどの別の言語を使用して、変数を使用してスタイルを定義し、CSS ファイルを自動的に生成して、Web 上に配置することができます。CSS を変更するたびにジェネレーターを再実行する必要がありますが、それほど難しくありません。

score 34 · Accepted Answer

34

CSS3変数を試すことができます：

body {
  --fontColor: red;
  color: var(--fontColor);
}

于 2013-05-27T00:50:19.680 に答える

score 34 · Accepted Answer

ええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええ_ _ _ _ _

良いニュースは、グローバルに変更されるJavaScriptアクセスを使用して変更できることです...

しかし、それらをどのように宣言するか...

それは非常に簡単です：

たとえば、 a#ff0000を avar()に割り当てたい場合は、に割り当てるだけで:root、次の点にも注意して--ください。

:root {
    --red: #ff0000; 
}

html, body {
    background-color: var(--red); 
}

良い点は、ブラウザーのサポートが悪くないことです。また、ブラウザーで使用するためにコンパイルする必要がないLESSかSASS...

また、赤の値を青に変更する簡単な JavaScript スクリプトを次に示します。

const rootEl = document.querySelector(':root');
root.style.setProperty('--red', 'blue');

score 21 · Accepted Answer

簡単な CSS のみのソリューションはありません。あなたはこれを行うことができます：

background-colorCSS ファイル内のとのすべてのインスタンスを検索しcolor、一意の色ごとにクラス名を作成します。
```
.top-header { color: #fff; }
.content-text { color: #f00; }
.bg-leftnav { background-color: #fff; }
.bg-column { background-color: #f00; }
```
次に、色が関係するサイトのすべてのページを調べて、色と背景色の両方に適切なクラスを追加します。
最後に、新しく作成したカラークラス以外の CSS 内の色の参照をすべて削除します。

score 9 · Accepted Answer

9

CSS用の「少ない」RubyGemは素晴らしく見えます。

http://lesscss.org/

于 2009-12-09T20:00:16.283 に答える

score 9 · Accepted Answer

はい、近い将来 (2012 年 6 月にこれを書きます)、less/sass などを使用せずに、ネイティブの css 変数を定義できます。Webkit エンジンは最初の css 変数ルールを実装したばかりなので、最新バージョンの Chrome と Safari は既にそれらで動作します。公式 Webkit (Chrome/Safari) の開発ログとオンサイトの css ブラウザーデモを参照してください。

願わくば、今後数か月で、ネイティブの css 変数がブラウザーで広くサポートされることを期待できます。

score 4 · Accepted Answer

確かに、複数のクラスの素晴らしい世界のおかげで、これを行うことができます。

.red {color:red}
.blackBack {background-color: black}

しかし、私はしばしば次のようにそれらを組み合わせてしまいます:

.highlight {color:red, background-color: black}

セマンティック警察があなたのいたるところにいることは知っていますが、うまくいきます。

score 3 · Accepted Answer

セレクターをグループ化できます。

#selector1, #selector2, #selector3 { color: black; }

score 3 · Accepted Answer

PHPが使えない理由がよくわかりません。次に、必要に応じて変数を追加して使用し、ファイルを PHP ファイルとして保存し、.css ファイルの代わりにスタイルシートとしてその .php ファイルにリンクすることができます。

PHP である必要はありませんが、私の言いたいことは理解できます。

プログラミングが必要な場合は、CSS (おそらく) が変数などをサポートするまで、プログラミング言語を使用しないでください。

また、Nicole Sullivan のオブジェクト指向 CSSも参照してください。

score 2 · Accepted Answer

dicejs.com (正式には cssobjs)は SASS のクライアント側バージョンです。CSS (json 形式の CSS に保存) に変数を設定し、色変数を再利用できます。

//create the CSS JSON object with variables and styles
var myCSSObjs = {
  cssVariables : {
    primaryColor:'#FF0000',
    padSmall:'5px',
    padLarge:'$expr($padSmall * 2)'
  }
  'body' : {padding:'$padLarge'},
  'h1' : {margin:'0', padding:'0 0 $padSmall 0'},
  '.pretty' : {padding:'$padSmall', margin:'$padSmall', color:'$primaryColor'}
};

//give your css objects a name and inject them
$.cssObjs('myStyles',myCSSObjs).injectStyles();

そして、ここに完全なダウンロード可能なデモへのリンクがあります。これは、ドキュメントよりも少し役に立ちます: dicejs demo

score 2 · Accepted Answer

編集:この回答は現在ではありません。今すぐ CSS 変数を使用する必要があります。

SCSS の使用を検討してください。CSS 構文と完全に互換性があるため、有効な CSS ファイルは有効な SCSS ファイルでもあります。これにより、サフィックスを変更するだけで移行が簡単になります。多数の拡張機能があり、最も便利なのは変数とネストされたセレクターです。

クライアントに出荷する前に、プリプロセッサを介して実行して CSS に変換する必要があります。

私は何年もの間、筋金入りの CSS 開発者でしたが、SCSS でプロジェクトを行うことを余儀なくされて以来、他のものは使用しなくなりました。

score 2 · Accepted Answer

JavaScript を介して CSS を渡し、COLOUR1 のすべてのインスタンスを特定の色 (基本的には正規表現) に置き換えて、エンドユーザーが JS をオフにしている場合に備えてバックアップスタイルシートを提供することができます。

score 1 · Accepted Answer

PHPではありませんが、ZopeとPloneは、これを実現するためにDTMLと呼ばれるSASSに似たものを使用しています。これは、CMSで非常に役立ちます。

Upfront Systemsには、Ploneでの使用の良い例があります。

score 0 · Accepted Answer

css ファイルを xsl テンプレートとして記述すると、単純な xml ファイルから色の値を読み取ることができます。次に、xslt プロセッサを使用して css を作成します。

色.xml:

<?xml version="1.0"?>
<colors>
    <background>#ccc</background>
</colors>

スタイル.xsl:

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="text" version="1.0" encoding="iso-8859-1"/>
    <xsl:template match="/">body {
    background-color: <xsl:value-of select="/colors/background" />;
}
</xsl:template>
</xsl:stylesheet>

CSS をレンダリングするコマンド:xsltproc -o styles.css styles.xsl colors.xml

スタイル.css:

body {
    background-color: #ccc;
}

css - CSSで色を変数として定義するにはどうすればよいですか?

19 に答える 19

Related

Reference