重複の可能性：
CSSで繰り返される定数を回避する
CSSシートで再利用される「テーマカラー」がいくつかあります。
変数を設定して再利用する方法はありますか？
例えば
.css
OurColor: Blue
H1 {
color:OurColor;
}
MrAnalogy
質問する
37808 次
13 に答える
90
セレクターのすべてのスタイルが 1 つのルールに存在する必要はなく、1 つのルールを複数のセレクターに適用できます。
/* 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;
}
このようにして、概念的に同じスタイルを繰り返さないようにすると同時に、ドキュメントのどの部分に影響するかを明確にします。
最後の文で「概念的に」が強調されていることに注意してください...これはコメントに出てきたばかりなので、人々が同じ間違いを何年も何度も繰り返しているのを見てきたので、少し詳しく説明します- CSS の存在よりも前のことです。同じ値を共有する 2 つの属性は、必ずしもそれらが同じ概念を表しているとは限りません。夕方には空が赤く見えることがありますが、トマトも同じように赤く見えますが、空とトマトは同じ理由で赤くはならず、時間の経過とともにそれぞれの色が個別に変化します。同様に、スタイルシートに同じ色、サイズ、または配置が与えられた 2 つの要素がたまたまあるからといって、それらが常に同じになるとは限りません。これらの価値を共有します。グループ化 (ここで説明) や SASS や LESS などの変数プロセッサを使用して値の繰り返しのリスクを回避するナイーブなデザイナーは、スタイリングに将来の変更を加えると信じられないほどエラーが発生しやすくなります。繰り返しを減らしたい場合は、スタイルの現在の値を無視して、常にスタイルの文脈上の意味に注目してください。
于 2008-09-06T14:43:01.247 に答える
16
Less CSSを使用することで、それ以上のことを実現できます。
于 2010-04-03T11:41:02.287 に答える
7
いいえ、しかし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;
}
}
他にも、関数のように機能する mixin と、あるセレクターを別のセレクターから継承する機能があります。とても賢く、とても便利です。
Ruby on Rails でコーディングしている場合は、自動的に CSS にコンパイルされますが、オンデマンドで実行できる汎用コンパイラもあります。
于 2008-09-06T14:39:50.333 に答える
5
疑問に思うのはあなたが初めてではなく、答えはノーです。Elliotte は、それについて素晴らしい暴言を吐いています: http://cafe.elharo.com/web/css-repeats-itself/。JSP または同等のものを使用して、実行時に CSS を生成できます。
于 2008-09-06T14:31:25.830 に答える
3
CSSはそのようなものを提供していません。唯一の解決策は、手動で実行して動的疑似CSSに基づいて静的CSS出力を生成するか、Webサーバーに接続してCSSをクライアントに送信する前に前処理する前処理スクリプトを作成することです。
于 2008-09-06T14:26:09.680 に答える
3
スクリプトを使用して、定義した変数に基づいて CSS を生成しない限り、現時点ではサポートされていません。
ただし、ブラウザの世界の少なくとも一部の人々がそれに取り組んでいるようです。したがって、将来的に本当に標準になる場合は、すべてのブラウザーに実装されるまで待つ必要があります (それまでは使用できません)。
于 2008-09-06T15:01:29.877 に答える
2
名前付きの色の CSS をコーディングするだけでなく、それらの色の色合いやブレンドを簡単に計算できるマクロを (Visual Studio で) 作成しました。フォントも取り扱っています。保存時に起動し、別のバージョンの CSS ファイルを出力します。これは、CSS でのシンボル処理は、解釈の時点ではなく、オーサリングの時点で行われるというBert Bos の主張と一致しています。
すべてのコードを含む完全なセットアップは、ここに投稿するには少し複雑すぎますが、今後のブログ投稿には適しているかもしれません。マクロのコメント セクションを次に示します。開始するにはこれで十分です。
このアプローチの目標は次のとおりです。
基本色、フォントなどを中央の場所で定義できるようにすることで、検索/置換を使用せずにパレット全体またはタイポグラフィ処理を簡単に調整できます
IIS で .CSS 拡張子をマップする必要がないようにする
VisualStudio のデザイン モードなどで使用できるさまざまなテキスト CSS ファイルを生成します。
これらのファイルは、CSS ファイルが要求されるたびに再計算するのではなく、オーサリング時に 1 回生成します。
tweak-save-test ワークフローに追加の手順を追加することなく、これらのファイルを即座に透過的に生成します
このアプローチでは、色、色の濃淡、およびフォント ファミリはすべて、XML ファイル内の値のリストを参照する簡略トークンで表されます。
色とフォントの定義を含む XML ファイルは、Constants.xml という名前で、CSS ファイルと同じフォルダーに存在する必要があります。
ProcessCSS メソッドは、VisualStudio が CSS ファイルを保存するたびに、EnvironmentEvents によって起動されます。CSS ファイルが展開され、ファイルの展開された静的バージョンが /css/static/ フォルダーに保存されます。(すべての HTML ページは、CSS ファイルの /css/static/ バージョンを参照する必要があります)。
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 */
于 2008-09-22T01:38:45.950 に答える
2
CSS にはそれがないので (まだ、次のバージョンにはあると思います)、Konrad Rudolphs のアドバイスに従って前処理を行ってください。おそらく、すでに存在するものを使用したいでしょう: m4
于 2008-09-06T14:28:31.547 に答える
2
あなたはそれをあまりにも複雑にしています。これがカスケードが存在する理由です。要素セレクターを指定して、色を分類するだけです。
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>
于 2008-09-06T14:45:13.877 に答える
1
CSS で定数の繰り返しを回避するも参照してください。Farinhaさんが言っていたように、CSS変数の提案がなされていますが、とりあえずプリプロセッサを使いたいです。
于 2008-09-06T15:30:39.073 に答える
1
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>
これにより、CSS で何度も色を定義しなくても、ourColor クラスを再利用できます。テーマを変更する場合は、ourColor のルールを変更するだけです。
于 2008-09-06T20:05:24.373 に答える
1
これはばかげているように聞こえるかもしれませんが、NAnt (または Ant やその他の自動ビルド システム) を使用している場合は、ハックな方法で NAnt プロパティを CSS 変数として使用できます。次のようなものを含む CSS テンプレート ファイル (おそらく styles.css.template など) から始めます。
a {
color: ${colors.blue};
}
a:hover {
color: ${colors.blue.light};
}
p {
padding: ${padding.normal};
}
次に、すべてのプロパティ値を割り当て (外部ビルドファイルとそれらを <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 関数を記述して、プロパティの拡張 (グラデーション イメージ ファイルの動的な生成など) を超えたあらゆる種類の優れた処理を実行できるため、私にとっては頭を悩ます価値がありました。
于 2008-09-06T20:35:31.353 に答える
0
CSS は (まだ) 変数を使用していません。これは、その時代と宣言型言語であることから理解できます。
より動的なスタイル処理を実現するための 2 つの主要なアプローチを次に示します。
- インライン css のサーバー側変数の
例 (PHP を使用):<style> .myclass{color:<?php echo $color; ?>;} </style>
css クライアント側の
例を変更する JavaScript を使用した DOM 操作 (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);
于 2008-09-16T05:15:20.793 に答える