作変数です。CSSファイル内での利用につきましては、別途。CSSファイルの[複製]

StackOverflow https://stackoverflow.com/questions/47487

  •  09-06-2019
  •  | 
  •  

質問

可能な重複:
を避ける繰り返し数をCSS

また"テーマカラー"の再利用にCSSます。

があるので、設定変数として再利用です。

E.g.

.css
OurColor: Blue

H1 { 
 color:OurColor;
}
役に立ちましたか？

解決

が要求するすべてのスタイルセレクタに居住する単一ルール、シングルルール申請が可能です複数のセレクタ...なので フリップしするようにしてください:

/* Theme color: text */
H1, P, TABLE, UL
{ color: blue; }

/* Theme color: emphasis */
B, I, STRONG, EM
{ color: #00006F; }

/* ... */

/* Theme font: header */
H1, H2, H3, H4, H5, H6
{ font-family: Comic Sans MS; }

/* ... */

/* H1-specific styles */
H1
{ 
   font-size: 2em; 
   margin-bottom: 1em;
}

このように、繰り返しを避けるスタイルとは 概念的には 同じもするのだろうかというようなの書いた。

注目を"概念的には"この最後の文...これだけのたのもしんでいるところが少している方が、どれも大したことのないこと間違いのも長年predatingものの存在をCSS: 二つの属性が同じ値とは限らないのでは同 概念.天空の場合が、夕方になトマトが空にトマトな赤と同様の理由により、その色 ま 変。それと同様に、だからと言っていう二つの要素にスタイルシートと同じ色、サイズや位置決めない 常に シェアこれらの値です。るナイーブデザイナーのために利用分類についてはこちら）または変数プロセッサなどのSASS以下の回避 値 繰り返しリスクは、将来の変更にスタイリングに非常にエラーが発生しやすい;常に注視している 文脈の意味 スタイルが削減を繰り返しを無視してその 現在の値.

他のヒント

実行しまいますよ 以下CSS.

しかしながら Sass います。このCSSプリプロセッサをお使いのショートカットの量を削減し、CSSの記述する必要があります.

例えば:

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color:
    darken($blue, 9%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

超えた変数を、提供する機能を巣セレクタ、ものを論理的にグ:

table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}

li {
  font: {
    family: serif;
    weight: bold;
    size: 1.2em;
  }
}

があります:mixinsる行為のように機能する機能を継承しつセレクタからです。で非常に巧みなと非常に便利です。

だ符号化にRuby on Railsでも自動的にコンパイルでCSSがな汎用コンパイラでいます。

ないのか、答えはノーです。Elliotte良＞かれています。 http://cafe.elharo.com/web/css-repeats-itself/.を使用できるJSP、またはその相当額はCSSを行います。

CSSがない意を得ている場合はこの限りではないことです。の唯一のソリューションでは、シンプルにわかりやすく書く前処理のスクリプトは実行を行うか、手動で静CSSの出力を基に動的擬似CSS、またはそのおそれのある接続のウェブサーバー preprocesses CSSに送信する前に、するサービスです。

それをサポートされていませんの瞬間を使用しない限りいくつかのスクリプトにCSSに基づく変数で定義されます。

でも、少なくとも一部の人はブラウザから世界中の 関係強化に取り組んで.そのため、かなりの基準、将来、いずれかの時点で、そのままで待たなければならないので実施したすべてのブラウザで使用できなくなるまでします。

以来、CSSがないことだと思い、次のバージョン)は、コンラート-Rudolphsのアドバイスpreprocesing.おそらく使いたいとallreadyである。m4

http://www.gnu.org/software/m4/m4.html

までに感謝したいと思います。そのために、カスケードが存在します。単なるご要素セレクタとクラスのカラー:

h1 {
   color: #000;
}
.a-theme-color {
   color: #333;
}

その後するとともに、必要に応じて要素のHTMLをオーバーを使用する際にプレゼンテーションメーカー。

<h1>This is my heading.</h1>
<h1 class="a-theme-color">This is my theme heading.</h1>

からマクロ（Visual Studio）を行なっていないコードCSSのた色が簡単に計算色合い、ブレンドの色をします。でも対応しております。で火災保存と出力別々のCSSファイルです。日本には大きなチャンスがあり、 Bert Bosの引数 その他の記号処理のCSSでの快感を与えないように心がけておりませんにしたものです。

の設定のコードするビットにはあまりに複雑すぎるポストがあなたのブログました。こちらのコメント欄には、マクロするのに十分取得します。

このアプローチとして

  1. をベースや色、フォントなど。に定義されることの中心に位置するこのように全体palleteまたは印刷上の処理が簡単に調整な検索/置換

  2. を回避する地図。CSSの拡張機能IIS

  3. 成園-様々なテキストのCSSファイルを使用することができるので、VisualStudioのデザインモード

  4. をこれらのファイルは一度オーサリング時に、より付加してのCSSファイルは必要

  5. をこれらのファイルを瞬時に、透明な追加お子様の年齢を入力してくださ調整-保存-試験ワークフロー

これにより、色の濃淡の色、フォントファミリーはすべてを表記法トークンを参照する値のリストをXMLファイルです。

のXMLファイル含有の色とフォントの定義を呼び出す必要があConstants.xml なければな居住と同じフォルダとして、CSSファイルです。

のProcessCSS法によって始動されるEnvironmentEventsきVisualStudioを保存するCSSファイルです。CSSファイルを拡張して、静的なバージョンのファイルに保存し/css/static/フォルダにまとめた。(すべてのHTMLページを参考に/css/static/バージョンのCSSファイル).

のConstants.xml ファイルのようになります: 

<?xml version="1.0" encoding="utf-8" ?>
<cssconstants>
  <colors>
    <color name="Red" value="BE1E2D" />
    <color name="Orange" value="E36F1E" />
    ...
  </colors>
  <fonts>
    <font name="Text" value="'Segoe UI',Verdana,Arial,Helvetica,Geneva,sans-serif" />
    <font name="Serif" value="Georgia,'Times New Roman',Times,serif" />
    ...
  </fonts>
</cssconstants>

をCSSファイル、そして定義のように:

   font-family:[[f:Text]];
   background:[[c:Background]]; 
   border-top:1px solid [[c:Red+.5]]; /* 50% white tint of red */

参照 を避ける繰り返し数をCSS.としてFarinhaとCSS変数提案されたものを使用したいプリプロセッサー.

利用できるmutlipleクラスを、HTMLの要素のclass属性には、各提供する部分のスタイリング.なっているCSSとして:

.ourColor { color: blue; }
.ourBorder { border: 1px solid blue; }
.bigText { font-size: 1.5em; }

その後の授業が必要です:

<h1 class="ourColor">Blue Header</h1>
<div class="ourColor bigText">Some big blue text.</div>
<div class="ourColor ourBorder">Some blue text with blue border.</div>

ることを可能にする再利用のourColorクラスなの定義の複数倍に。変更した場合のテーマを変えるだけで、ルールourColour.

このような狂気がご利用の場合NAntはAntまたはその他の自動構築とシステムを使うことができNAnt特性としてCSS変数hackyます。始CSSのテンプレートファイルもメーカーです。css.テンプレートもの)を含むかのようになります:

a {
    color: ${colors.blue};
}

    a:hover {
        color: ${colors.blue.light};
    }

p {
    padding: ${padding.normal};
}

それがすべてのステップを構築する格はすべてのプロパティの値を使用していを外部buildfilesと <include> し)を使用して <expandproperties> フィルタを実際のCSS:

<property name="colors.blue" value="#0066FF" />
<property name="colors.blue.light" value="#0099FF" />
<property name="padding.normal" value="0.5em" />

<copy file="styles.css.template" tofile="styles.css" overwrite="true">
    <filterchain>
        <expandproperties/>
    </filterchain>
</copy>

下の方には、もちろん、あるいはcssの世代に確認できますようにブラウザです。であろう限定で発生すべてのcssます。

しかし、できNAnt機能などをスムーズに行えるようになったプロパティの展開などの発生勾配画像ファイルを動的に、私にとってもあります。

CSSがない(だ)を変数やその時代として宣言語です。

ここでは二つの大きな実現へのアプローチダイナミズ取り扱い:

  • サーバサイド変数のインラインcss
    Mysqlサポートに対するコミットメント:

    <style> .myclass{color:<?php echo $color; ?>;} </style>

 

  • DOM操作をjavascriptの変更にcssクライアント側の
    例（jQueryライブラリ):

    $('.myclass').css('color', 'blue');

    または

    //The jsvarColor could be set with the original page response javascript
    // in the DOM or retrieved on demand (AJAX) based on user action. $('.myclass').css('color', jsvarColor);

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top