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


216

私はかなり長いCSSファイルに取り組んでいます。クライアントが配色の変更を要求できることを知っていて、疑問に思っていました。変数に色を割り当てて、それを使用するすべての要素に新しい色を適用するように変数を変更することはできますか?

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


可能性のあるDUP ... stackoverflow.com/questions/47487/...
エディ


このかもしれないのヘルプ:stackoverflow.com/questions/15831657/...
DreamTeK

回答:


225

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

CSSファイルの例

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

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

実際の例については、この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変数がネイティブでサポートされています。


3
他の誰かがこれを読んでSafariで動作させようとしている場合に備えて-CSSの サポートは、 2013年春/夏にWebkitから削除されたようです。/pipermail/webkit-dev/2013-April/024476.html上記のフラグを有効にした後もChromeで引き続き機能します。
マリーフィッシャー

フラグを有効にしても機能しないChrome 36でテストされています。まだFirefoxで動作します
yuvi 2014

Chromeバージョン49.0.2623.110 mで確認したところ、まだ機能しません。
radu

あなたのOSは何ですか?それは私のために働いた:Mac OS X上のバージョン49.0.2623.110(64ビット)
Arthur Weborg

私のAndroidのChromeバージョンAndroid 5.1.0 Chrome 49.0.2623.105にも対応
Arthur Weborg

66

人々は私の答えを支持し続けていますが、特に最近の両方で使いやすいGUIの数を考えると、それはsass 以下の喜びに比べてひどい解決策です。あなたが何らかの意味を持っているなら、私が以下に提案するすべてを無視してください。

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

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

3
IEフィルターを使用する場合など、コメントを追加しても機能しない場合があります。ここにコメントを入れることはできません->フィルター:progid:DXImageTransform.Microsoft.gradient(startColorstr = '#3f5619'、endColorstr = '#77842f'、GradientType = 0); / * IE6-9 * /
カーターメドリン

1
あなたが正しいので反対票を投じることは、ひどい解決策です。
AndroidDev 2017年

私は個人的にはサーバー側のソリューションよりもクライアント側の回答スタイルを好んだので、それを行うために何かを作りました。驚くべきことではありませんが、動作しますstackoverflow.com/a/44936706/4808079
Seph Reed

1
あなたの答えは受け入れられません。ひどいと思ったらいつでも削除できます。
TylerH 2018

38

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


12
答えは今(2016)は間違っていると思いますよね?SASSなどを使用した方がいいかもしれませんが。
codenoob 2016

SASSでは色を静的にしか変更できないため、CSS変数の使用はSASSよりも望ましい場合があります。CSS変数を使用すると、実行時に色を変更できます。つまり、JavaScriptを使用してボタンで「ダークモード」に切り替えることができます。
Nick Crews


20

CSSのみの簡単なソリューションはありません。あなたはこれを行うことができます:

  • すべてのインスタンスの検索background-colorcolor、あなたのCSSファイル内に、それぞれのユニークな色のクラス名を作成します。

    .top-header { color: #fff; }
    .content-text { color: #f00; }
    .bg-leftnav { background-color: #fff; }
    .bg-column { background-color: #f00; }
  • 次に、色が関係しているサイトのすべてのページを調べ、色と背景色の両方に適切なクラスを追加します。

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


1
しかし、クライアントがすべての赤の要素を緑にしたいと決めた場合はどうなりますか?「赤」クラスを変更して、「色:緑」を提供する必要があります。これにより、混乱が生じ、保守が難しくなります。
singingwolfboy

@singingwolfboy、私はクラスのネーミングでもっと具体的だったはずです。それらが関係している要素を参照するのが最も簡単なので、将来簡単に変更できます。
Corey Ballou、

8
@downvoters、これはCSSのみのソリューションです。スクリプトまたはCLIを含む代替ソリューションはたくさんあります。これは、そうするつもりない人のためのものです。
Corey Ballou、

17

Yeeeaaahhh .... CSSでvar()関数を使用できるようになりました .... ...

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

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

それは非常に簡単です:

たとえば、あなたが割り当てたいの#ff0000var()単にそれを割り当て、:rootまたに注意を払います、--

:root {
    --red: #ff0000; 
}

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

良いものは、ブラウザのサポートされている悪いわけではない、またなどのブラウザで使用されるようにコンパイルする必要はありませんLESSSASS...

ブラウザのサポート

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

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

9

CSS用の「少ない」Ruby Gemは見栄えが良いです。

http://lesscss.org/


2
LESSのすばらしいところは、Rubyや特定のフレームワークではないということです。クライアント側で「コンパイル」することも、django-css github.com/dziegler/django-cssなどのその他のフレームワークで使用することもできます
xster

9

はい、近い将来(私は2012年6月にこれを書き込みます)、less / sassなどを使用せずにネイティブのcss変数を定義できます!Webkitエンジンは最初のcss変数ルールを実装したばかりなので、ChromeとSafariの最新バージョンはすでに動作しています。オフィシャルWebkit(Chrome / Safari)開発ログとオンサイトのcssブラウザーのデモをご覧ください。

うまくいけば、今後数か月以内に、ネイティブのcss変数の広範なブラウザーサポートが期待できます。


2
@Daniel Make that 2015
Still.Tony

4

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

純粋なcssソリューションが必要な場合は、次のようにします。

  1. 意味論的な名前を持つカラークラスを使用します。

    .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ファイルに入れて、必要に応じて変更します。


3

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


3

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

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

プログラミングをしたいときは、CSS(たぶん)が変数のようなものをサポートするまで、プログラミング言語を使ってみませんか?

また、Nicole Sullivanのオブジェクト指向CSSも確認してください。


私たち全員がPHPを使用できるわけではありません。
horiatu 2017

3

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


このツールは2014年にはもう利用できないようです
Daniel

3

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

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

私は何年もの間、筋金入りのCSS開発者でしたが、SCSSでプロジェクトを行うことを自分自身に強いたので、今は他のものを使用しません。


2

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

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

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

このメソッドをRailsとは独立して使用するには、site_settings.rbと連携して動作し、CSSパスを考慮に入れ、CSSを再生成するたびに呼び出すことができる小さなRubyラッパースクリプトを記述します(例:サイトの起動時)

Rubyはほとんどすべてのオペレーティングシステムで実行できるため、プラットフォームに依存しません。

例:wrapper: 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


2

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

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

しかし、私はしばしば次のようにそれらを組み合わせることにします:

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

私は意味警察があなたのいたるところにいることを知っていますが、それはうまくいきます。


1
私は追加します:異なる、よりセマンティックな名前を使用してください。ブランドの色が変わると、多くのHTMLコードがやり直されます。.primary、.secondary、.accentなどのクラス名を使用する
Eric Harms

2

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

Upfront Systemsは、Ploneでの使用の良い例を持っています。


1

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

CSSだけでは不可能です。

less.jsを使用してJavaScriptとLESSでそれを行うことができます。これはLESS変数をCSSにライブでレンダリングしますが、これは開発専用であり、実際の使用にはオーバーヘッドが多すぎます。

CSSに最も近いものは、次のような属性部分文字列セレクターを使用することです

[id*="colvar-"] {
    color: #f0c69b;
}

そして、id調整したいすべての要素のをcolvar-、などで始まる名前に設定しcolvar-headerます。その後、色を変更すると、すべてのIDスタイルが更新されます。これは、CSSだけで実現できる限りのことです。


私はCSSだけでそれを行います、それはcss変数Mozilla-exampleで行います
Arthur Weborg

すべてのユーザーがmozillaを使用している場合、それは素晴らしいことです-幸運を祈ります
user2317093

クローム、サファリ、オペラと同様に動作します。
Arthur Weborg 2013

pmsl OPによる私の投稿の気難しい高校の文法修正とは何ですか?そんなに悪くなかった。
user2317093 2013
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.