web-dev-qa-db-ja.com

CSSで色を変数として定義するにはどうすればよいですか？

私は非常に長いCSSファイルに取り組んでいます。クライアントがカラースキームの変更を要求できることを知っていて、変数に色を割り当てることはできますか？変数を変更して、それを使用するすべての要素に新しい色を適用することができますか？

PHPを使用してCSSファイルを動的に変更できないことに注意してください。

cssvariablescolorscss-variables
187
patrick

CSSは、これを CSS変数 でネイティブにサポートします。

CSSファイルの例

:root {
    --main-color:#06c;
}

#foo {
    color: var(--main-color);
}

実際の例については、 this JSFiddle を参照してください（例では、フィドルのCSSセレクターの1つが青色にハードコードされており、他のCSSセレクターは元の構文と現在の構文の両方のCSS変数を使用していますが、色を青に設定します）。

JavaScript /クライアント側でのCSS変数の操作

document.body.style.setProperty('--main-color',"#6c0")

サポートは最新のすべてのブラウザでサポートされています

Firefox 31 + 、 Chrome 49 + 、 Safari 9.1 + 、 Microsoft Edge 15 + および Opera 36 + CSS変数のネイティブサポートが付属しています。

186
Arthur Weborg

人々は私の答えを支持し続けますが、それは sass または less の喜びに比べてひどい解決策です。 gui's for both 最近。何らかの意味がある場合は、以下に提案するすべてを無視してください。

変数の一種として機能するために、各色の前にcssにコメントを入れることができます。これは、find/replaceを使用して値を変更できます。

Cssファイルの上部

/********************* Colour reference chart****************
*************************** comment ********* colour ******** 

box background colour       bbg              #567890
box border colour           bb               #abcdef
box text colour             bt               #123456

*/

CSSファイルの後半

.contentBox {background: /*bbg*/#567890; border: 2px solid /*bb*/#abcdef; color:/*bt*/#123456}

次に、たとえば、検索/置換を行うボックステキストの配色を変更するには

/*bt*/#123456
66
wheresrhys

CSS自体は変数を使用しません。ただし、 SASS などの別の言語を使用して、変数を使用してスタイリングを定義し、自動的にCSSファイルを生成して、Webに配置できます。 CSSに変更を加えるたびにジェネレーターを再実行する必要があることに注意してくださいが、それほど難しくありません。

40
singingwolfboy

CSS3変数 を試すことができます：

body {
  --fontColor: red;
  color: var(--fontColor);
}
21
Vitalii Fedorenko

CSSのみの簡単な解決策はありません。これを行うことができます：

  • CSSファイルでbackground-colorおよびcolorのすべてのインスタンスを検索し、一意の色ごとにクラス名を作成します。

    .top-header { color: #fff; }
.content-text { color: #f00; }
.bg-leftnav { background-color: #fff; }
.bg-column { background-color: #f00; }

  • 次に、色が関係するサイトのすべてのページを調べて、色と背景色の両方に適切なクラスを追加します。

  • 最後に、新しく作成した色クラス以外のCSSの色の参照を削除します。

19
Corey Ballou

CSSの 'Less' Ruby Gemはすてきです。

http://lesscss.org/

8
Erin

はい、近い将来（2012年6月にこれを書いています）、less/sassなどを使用せずにネイティブのcss変数を定義できます！ Webkitエンジンは最初のcss変数ルールを実装したばかりであるため、ChromeおよびSafariのEdgeバージョンのカットはすでにそれらで機能します。オンサイトcssブラウザーデモで Official Webkit（Chrome/Safari）開発ログ を参照してください。

願わくば、今後数か月のうちにネイティブのcss変数がブラウザで広くサポートされることを期待できます。

8
Sliq

Yeeeaaahhh....ここでvar（）関数を使用できますCSS .....

良いニュースは、JavaScriptアクセスを使用して変更できることです。これもグローバルに変更されます...

しかし、それらを宣言する方法...

とても簡単です：

たとえば、#ff0000をvar()に割り当てたい場合は、単に:rootで割り当てるだけでなく、--にも注意してください。

:root {
    --red: #ff0000; 
}

html, body {
    background-color: var(--red); 
}

良い点は、ブラウザーのサポートが悪くないことです。また、LESSやSASSのようにブラウザーで使用するためにコンパイルする必要はありません。

browser support

また、次の簡単なJavaScriptスクリプトは、赤の値を青に変更します。

const rootEl = document.querySelector(':root');
root.style.setProperty('--red', 'blue');
5
Alireza

PHPを使用できない理由については明確ではありません。その後、必要に応じて変数を追加して使用し、PHPファイルとしてファイルを保存し、.cssファイルではなくスタイルシートとしてその.phpファイルにリンクします。

PHPである必要はありませんが、私の言うとおりです。

プログラミングのものが必要な場合、CSS（おそらく）が変数などをサポートするまでプログラミング言語を使用しないのはなぜですか？

また、Nicole Sullivanの Object-oriented CSS も確認してください。

3
stephenhay

dicejs.com（正式にはcssobjs） は、SASSのクライアント側バージョンです。 CSS（json形式のCSSに保存）で変数を設定し、色の変数を再利用できます。

//create the CSS JSON object with variables and styles
var myCSSObjs = {
  cssVariables : {
    primaryColor:'#FF0000',
    padSmall:'5px',
    padLarge:'$expr($padSmall * 2)'
  }
  'body' : {padding:'$padLarge'},
  'h1' : {margin:'0', padding:'0 0 $padSmall 0'},
  '.pretty' : {padding:'$padSmall', margin:'$padSmall', color:'$primaryColor'}
};

//give your css objects a name and inject them
$.cssObjs('myStyles',myCSSObjs).injectStyles();

そしてここに、完全なダウンロード可能なデモへのリンクがあります。これは、ドキュメントよりも少し役立ちます： dicejs demo

2
John David Five

JavaScriptを介してCSSを渡し、COLOUR1のすべてのインスタンスを特定の色（基本的には正規表現）に置き換え、エンドユーザーがJSをオフにしている場合のバックアップスタイルシートを提供できます。

2
Arcath

SCSSの使用を検討してください。 CSS構文と完全に互換性があるため、有効なCSSファイルは有効なSCSSファイルでもあります。これにより、移行が簡単になり、接尾辞を変更するだけです。多数の機能強化があり、最も有用なのは変数とネストされたセレクターです。

クライアントに出荷する前に、プリプロセッサで実行してCSSに変換する必要があります。

私は長年にわたり筋金入りのCSS開発者でしたが、SCSSでプロジェクトを行うことを余儀なくされて以来、私は他のものを使用しません。

2
superluminary

サポートのため、css3変数を使用しないでください。

純粋なCSSソリューションが必要な場合は、次のことを行います。

  1. semenaticの名前のカラークラスを使用します。

    .bg-primary   { background: #880000; }

.bg-secondary { background: #008800; }

.bg-accent    { background: #F5F5F5; }

  2. 構造をスキンから分離する（OOCSS）

    /* Instead of */

h1 { 
    font-size: 2rem;
    line-height: 1.5rem;
    color: #8000;
}

/* use this */

h1 { 
    font-size: 2rem;
    line-height: 1.5rem;
}

.bg-primary {
    background: #880000;
}

/* This will allow you to reuse colors in your design */

  3. これらを別のcssファイルに入れて、必要に応じて変更します。

2
Eric Harms

セレクターをグループ化できます：

#selector1, #selector2, #selector3 { color: black; }
1
Botond Vajna

もちろん、複数のクラスの素晴らしい世界のおかげで、これを行うことができます：

.red {color:red}
.blackBack {background-color: black}

とにかく、とにかく次のように組み合わせてしまうことがよくあります。

.highlight {color:red, background-color: black}

セマンティックポリスがあなたの周りにあることは知っていますが、うまくいきます。

1
Chalky

PHPではありませんが、ZopeとPloneは DTML と呼ばれるSASSに似たものを使用してこれを実現します。 CMSで非常に便利です。

Upfront Systemsには、Ploneでの使用の 良い例 があります。

1
Jon Hadley

システムにRubyがある場合、これを実行できます。

http://unixgods.org/~tilo/Ruby/Using_Variables_in_CSS_Files_with_Ruby_on_Rails.html

これはRails向けに作成されましたが、スタンドアロンで実行するように変更する方法については以下を参照してください。

このメソッドはRailsとは独立して使用できます。小さなRubyラッパースクリプトを作成します。このスクリプトは、site_settings.rbと連携して動作し、CSSパスを考慮に入れます。 -CSSを生成します（たとえば、サイトの起動中）

ほぼすべてのオペレーティングシステムでRubyを実行できるため、これはプラットフォームに依存しないはずです。

例えばラッパー：generate_CSS.rb（CSSを生成する必要があるときはいつでもこのスクリプトを実行します）

#/usr/bin/Ruby  # preferably Ruby 1.9.2 or higher
require './site_settings.rb' # assuming your site_settings file is on the same level 

CSS_IN_PATH  = File.join( PATH-TO-YOUR-PROJECT, 'css-input-files')
CSS_OUT_PATH = File.join( PATH-TO-YOUR-PROJECT, 'static' , 'stylesheets' ) 

Site.generate_CSS_files( CSS_IN_PATH , CSS_OUT_PATH )

site_settings.rbのgenerate_CSS_filesメソッドは、次のように変更する必要があります。

module Site
#   ... see above link for complete contents

  # Module Method which generates an OUTPUT CSS file *.css for each INPUT CSS file *.css.in we find in our CSS directory
  # replacing any mention of Color Constants , e.g. #SomeColor# , with the corresponding color code defined in Site::Color
  #
  # We will only generate CSS files if they are deleted or the input file is newer / modified
  #
  def self.generate_CSS_files(input_path = File.join( Rails.root.to_s , 'public' ,'stylesheets') , 
                              output_path = File.join( Rails.root.to_s , 'public' ,'stylesheets'))
    # assuming all your CSS files live under "./public/stylesheets"
    Dir.glob( File.join( input_path, '*.css.in') ).each do |filename_in|
      filename_out = File.join( output_path , File.basename( filename_in.sub(/.in$/, '') ))

      # if the output CSS file doesn't exist, or the the input CSS file is newer than the output CSS file:
      if (! File.exists?(filename_out)) || (File.stat( filename_in ).mtime > File.stat( filename_out ).mtime)
        # in this case, we'll need to create the output CSS file fresh:
        puts " processing #{filename_in}\n --> generating #{filename_out}"

        out_file = File.open( filename_out, 'w' )
        File.open( filename_in , 'r' ).each do |line|
          if line =~ /^\s*\/\*/ || line =~ /^\s+$/             # ignore empty lines, and lines starting with a comment
            out_file.print(line)
            next
          end
          while  line =~ /#(\w+)#/  do                         # substitute all the constants in each line
            line.sub!( /#\w+#/ , Site::Color.const_get( $1 ) ) # with the color the constant defines
          end
          out_file.print(line)
        end
        out_file.close
      end # if ..
    end
  end # def self.generate_CSS_files

end # module Site
1
Tilo

Cssファイルをxslテンプレートとして記述する場合、単純なxmlファイルから色の値を読み取ることができます。次に、xsltプロセッサでcssを作成します。

colors.xml：

<?xml version="1.0"?>
<colors>
    <background>#ccc</background>
</colors>

styles.xsl：

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="text" version="1.0" encoding="iso-8859-1"/>
    <xsl:template match="/">body {
    background-color: <xsl:value-of select="/colors/background" />;
}
</xsl:template>
</xsl:stylesheet>

CSSをレンダリングするコマンド：xsltproc -o styles.css styles.xsl colors.xml

styles.css：

body {
    background-color: #ccc;
}
0
Cole Tierney