CSSクラスを変更しますか？

Question

可能性の重複：
Avoiding repeated constants in CSS

私は、クラス内のクラスを含める - ソートのクラスをvariablizingのように - 私は一度何かを定義し、シート全体でそれを使用できるように、 。私が色を変えると、すべてが変わります。

.myFontColor{color:blue;} 
.myTitle{font-size:large; myFontColor} 
.myHeader{font-weight:bold; myFontColor} 

これを行うには唯一の方法があります。定義にすべてのクラス名を含めるには、その色を参照するシートに20または30の項目がある場合、それは本当に醜いです。

.myFontColor, .myTitle, .myHeader{color:blue;} 
.myTitle{font-size:large;} 
.myHeader{font-weight:bold;} 

また、要素を作成するときに各クラスをリストすることも少し難解です。

<div class="myFontColor myTitle myHeader"> 

ありがとうございました。

Answer 1

私が考えることができる唯一の方法は、javascriptを使用して属性を動的に割り当てることです。たとえば、あなたが（例えばcolor, font-size, font-weightなど）を構成するすべての属性のリストと、あなたは（そのようなど.myHeader、myTitle、など）設定できるようにしたいすべてのクラスのリストを作ります。そして、このような何かを：

for (x=0; x< cssClasses.length; x++) 
{ 
    addAttribs(cssClasses[x]); 
} 

function addAttribs(class) 
{ 
    $("." + class).css("color","#444"); 
    $("." + class).css("font-weight","bold"); 
    //And so on.. 
} 

これはあなたが得ることができる最も近いとすることができ、あなたがそれを変更した場合、それは他のどこでも更新されますので、それは、1つの関数に格納されているすべての属性の利点を持っています。

編集：ところで、私はaddAttribs()の機能の中でJqueryを使用して、CSSの属性に簡単にアクセスして設定します。

Answer 2

現時点では、CSSでは変数は（必要に応じて）使用できません。これまでのようにカスケードを使用し、すべてのクラスを定義に含める必要があります。

Answer 3

あなたは要素を定義する際に、いくつかのクラスを記述することができます、あなたがSassを見てみたいことがあり

<div class="blue w210pt"> 
</div> 
<p class="green w210pt"> 
</p> 

<style> 
.green{color:green;} 
.blue{color:blue;} 
.w210pt{width:210px;} 
</style> 

Answer 4

をあなたは少し異なる構文を使用しますが、のようないくつかの知性が可能になりますRailsのコミュニティから何かこの。 Ruby/Railsのことをやっていないなら、コマンドラインのプリプロセッサとしてSassを使ってSassファイルをCSSに変換することができます。

Answer 5

あなたが疑われるとして、あなたは直接的な方法で記述するものを行うことはできません - あなたが望む結果を得るためにCSSのカスケード側面を使用する必要があります。しかし、あなたはCSSをある程度悪用しているかもしれないと思います。あなたはセマンティクスを定義し、それらのセマンティクスにごプレゼンテーションを接続する必要があります。たとえば、.myFontColorのようなクラスを見ると、セマンティクスを表現するために実際にクラスを使用していないことが大きなヒントになります（これは例ではおそらく単純です）。

Answer 6

宣言を繰り返さないための最も簡単な解決策は、あなたが知っているように、いくつかのクラスを組み合わせることです。

はたぶん、あなたはcss variablesを探していますか？

Answer 7

また、PHPなどのサーバー側のソリューションを使用することもできます。

phpを使用すると、スタイルシートをphpファイルとして保存し、要求されるたびに「実行」されます。すべての変数を一番上に置き、いつでも必要な場所にエコーすることができます。

ブラウザには通常のスタイルシートが表示されますが、サーバーには余分な作業が必要です。そして、実際にスタイルシートの可読性を向上させるものではありません。

非常に洗練されたソリューションではありませんが、機能します。

Answer 8

一つの解決策は、PHPのスタイルシートを使用することです：

<? 
header('Content-type: text/css'); 

$color1 = '#123456'; 

echo <<<EOS 

.myTitle {color: $color1} 

EOS; 
?>