10

CSS ファイル内の定数の繰り返しを減らすための便利なテクニックはありますか?

(たとえば、すべて同じ色または同じフォント サイズを適用する必要があるさまざまなセレクターの束)?

4

11 に答える 11

10

最近、公式の CSS 仕様に変数が追加されました。

変数を使用すると、次のようなことができます。

body, html {
    margin: 0;
    height: 100%;
}

.theme-default {
    --page-background-color: #cec;
    --page-color: #333;
    --button-border-width: 1px;
    --button-border-color: #333;
    --button-background-color: #f55;
    --button-color: #fff;
    --gutter-width: 1em;
    float: left;
    height: 100%;
    width: 100%;
    background-color: var(--page-background-color);
    color: var(--page-color);
}

button {
    background-color: var(--button-background-color);
    color: var(--button-color);
    border-color: var(--button-border-color);
    border-width: var(--button-border-width);
}

.pad-box {
    padding: var(--gutter-width);
}
<div class="theme-default">
    <div class="pad-box">
        <p>
            This is a test
        </p>
        <button>
           Themed button
        </button>
    </div>
</div>

残念ながら、ブラウザのサポートはまだ非常に貧弱です。CanIUse によると、現在 (2016 年 3 月 9 日) この機能をサポートしているブラウザーは、Firefox 43 以降、Chrome 49 以降、Safari 9.1 以降、iOS Safari 9.3 以降のみです。

ここに画像の説明を入力

代替案:

CSS 変数が広くサポートされるまでは、 LessやSassなどの CSS プリプロセッサ言語の使用を検討できます。

CSS プリプロセッサは、変数を使用できるようにするだけでなく、プログラミング言語でできることはほとんど何でもできるようにします。

たとえば、Sass では、次のような関数を作成できます。

@function exponent($base, $exponent) {
    $value: $base;
    @if $exponent > 1 {
        @for $i from 2 through $exponent {
            $value: $value * $base;
        }
    }
    @if $exponent < 1 {
        @for $i from 0 through -$exponent {
            $value: $value / $base;
        }
    }
    @return $value; 
}
于 2016-03-09T10:50:25.160 に答える
5

たとえば、各 ID またはクラスをコンマで区切る必要があります。

h1,h2 {
  color: #fff;
}
于 2008-08-27T13:56:59.443 に答える
5

要素は複数のクラスに属することができるため、次のようにすることができます。 

.DefaultBackColor
{
    background-color: #123456;
}
.SomeOtherStyle
{
    //other stuff here
}
.DefaultForeColor
{
    color:#654321;
}

そして、コンテンツ部分のどこかに： 

<div class="DefaultBackColor SomeOtherStyle DefaultForeColor">Your content</div>

ここでの弱点は、本文がかなり冗長になり、一度だけ色をリストすることができないことです. しかし、2 回か 3 回しか実行できず、それらの色をグループ化して、おそらく独自のシートにすることができます。配色を変更したい場合、それらはすべて一緒であり、変更は非常に簡単です。

しかし、CSS に関する私の最大の不満は、独自の定数を定義できないことです。

于 2008-08-27T14:00:23.803 に答える
4

重複を避けるために、グローバル変数を使用できます。

p{
  background-color: #ccc; 
}

h1{
  background-color: #ccc;
}

ここでは、 :root疑似クラス セレクターでグローバル変数を初期化できます。:rootは DOM の最上位です。

:root{
    --main--color: #ccc; 
}

p{
  background-color: var(--main-color);
}

h1{
  background-color: var(--main-color);
}

注: これは実験的なテクノロジです。このテクノロジの仕様はまだ安定していないため、さまざまなブラウザで使用する適切なプレフィックスについては、互換性テーブルを確認してください。また、実験的なテクノロジの構文と動作は、仕様の変更に伴い、ブラウザの将来のバージョンで変更される可能性があることに注意してください。詳細はこちら

ただし、Syntaxally Awesome Style Sheets をいつでも使用できます。

Sass の場合、先頭に $variable_name を使用してグローバル変数を初期化する必要があります。

$base : #ccc;

p{
  background-color: $base;
}

h1{
   background-color: $base;
}
于 2015-07-15T19:13:39.653 に答える
2

lessなどの動的 CSS フレームワークを使用できます。

于 2010-12-28T12:25:16.663 に答える
1

個人的には、コンマ区切りのセレクターを使用するだけですが、プログラムで css を記述するための解決策がいくつかあります。これは単純なニーズには少しやり過ぎかもしれませんが、CleverCSS (Python)を見てください。

于 2008-08-31T22:01:30.120 に答える
1

私の知る限り、CSS ファイルをプログラムで生成しない限り、たとえば、お気に入りの青の色合い (#E0EAF1) を 1 か所だけで定義する方法はありません。

ファイルを生成するコンピューター プログラムを簡単に作成できます。簡単な検索と置換操作を実行し、.css ファイルとして保存します。

このsource.cssから行く…

h1,h2 {
  color: %%YOURFAVORITECOLOR%%;
}

div.something {
  border-color: %%YOURFAVORITECOLOR%%;
}

このtarget.cssに…

h1,h2 {
  color: #E0EAF1;
}

div.something {
  border-color: #E0EAF1;
}

このようなコードで... (VB.NET)

Dim CssText As String = System.IO.File.ReadAllText("C:\source.css")
CssText = CssText.Replace("%%YOURFAVORITECOLOR%%", "#E0EAF1")
System.IO.File.WriteAllText("C:\target.css", CssText)
于 2008-08-27T13:57:04.747 に答える
1

重複コーディングを避けるためにグローバル変数を試す

h1 {
  color: red;
}
p {
  font-weight: bold;
}

または、別のクラスを作成することもできます

.deflt-color {
  color: green;
}
.dflt-nrml-font {
  font-size: 12px;
}
.dflt-header-font {
  font-size: 18px;
}
于 2015-09-01T10:34:22.093 に答える
0

CSS 変数がすべての主要なブラウザーに実装されるようになれば、いつかこの問題が解決されるかもしれません。

それまでは、コピーして貼り付けるか、他の人が提案しているように（通常はサーバー側のスクリプトを使用して）、あらゆる種類のプリプロセッサを使用する必要があります。

于 2008-08-31T22:05:26.977 に答える
0 
    :root {
      --primary-color: red;
    }

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

<p> some red text </p>

JSで色を変えられる

var styles = getComputedStyle(document.documentElement);
var value = String(styles.getPropertyValue('--primary-color')).trim(); 


document.documentElement.style.setProperty('--primary-color', 'blue');
于 2016-07-05T13:23:02.413 に答える
0

HTML 要素 (例: <div class="one two">) で複数の継承を使用できますが、CSS ファイル自体に定数を含める方法を知りません。

このリンク（質問をグーグルで検索したときに最初に見つかったリンク）は、問題をかなり詳しく調べているようです：

http://icant.co.uk/articles/cssconstants/

于 2008-08-27T13:56:35.717 に答える