CSS での定数の繰り返しの回避

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

  •  09-06-2019
  •  | 
  •  

質問

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

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

役に立ちましたか？

解決

最近、 変数が追加されました 公式の 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 以降です。

enter image description here

代替案:

CSS 変数が広くサポートされるまでは、次のような 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; 
}

他のヒント

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

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

そして、コンテンツ部分のどこかに次のようにします。 

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

ここでの弱点は、本文がかなり冗長になることと、色のリストを 1 回しか挙げることができない可能性が高いことです。ただし、それを実行できるのは 2 ～ 3 回だけで、それらの色をそれぞれのシートにグループ化することもできます。カラースキームを変更したい場合はすべてまとめられており、変更は非常に簡単です。

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

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

h1,h2 {
  color: #fff;
}

グローバル変数を使用して重複を避けることができます。 

p{
  background-color: #ccc; 
}

h1{
  background-color: #ccc;
}

ここで、グローバル変数を初期化できます。 ：根 疑似クラスセレクター。 ：根 DOM のトップレベルです。

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

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

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

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

ただし、Syntactical Awesome スタイル シートはいつでも使用できます。

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

$base : #ccc;

p{
  background-color: $base;
}

h1{
   background-color: $base;
}

次のような動的CSSフレームワークを使用できます。 少ない.

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

重複したコーディングを避けるためにグローバル変数を試してください

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

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

.deflt-color {
  color: green;
}
.dflt-nrml-font {
  font-size: 12px;
}
.dflt-header-font {
  font-size: 18px;
}

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

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

このソースから移動します。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)

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

このリンク (質問をグーグルで検索したときに最初に見つかりました) には、この問題についてかなり詳しく説明されているようです。

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

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

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

    :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');
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top