私はかなり長いCSSファイルに取り組んでいます。クライアントが配色の変更を要求できることを知っていて、疑問に思っていました。変数に色を割り当てて、それを使用するすべての要素に新しい色を適用するように変数を変更することはできますか?
PHPを使用してCSSファイルを動的に変更できないことに注意してください。
私はかなり長いCSSファイルに取り組んでいます。クライアントが配色の変更を要求できることを知っていて、疑問に思っていました。変数に色を割り当てて、それを使用するすべての要素に新しい色を適用するように変数を変更することはできますか?
PHPを使用してCSSファイルを動的に変更できないことに注意してください。
回答:
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変数がネイティブでサポートされています。
人々は私の答えを支持し続けていますが、特に最近の両方で使いやすい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
CSS自体は変数を使用しません。ただし、SASSなどの別の言語を使用して、変数を使用してスタイルを定義し、CSSファイルを自動的に生成して、Webに配置できます。CSSを変更するたびにジェネレータを再実行する必要がありますが、それほど難しくはありません。
CSSのみの簡単なソリューションはありません。あなたはこれを行うことができます:
すべてのインスタンスの検索background-color
やcolor
、あなたのCSSファイル内に、それぞれのユニークな色のクラス名を作成します。
.top-header { color: #fff; }
.content-text { color: #f00; }
.bg-leftnav { background-color: #fff; }
.bg-column { background-color: #f00; }
次に、色が関係しているサイトのすべてのページを調べ、色と背景色の両方に適切なクラスを追加します。
最後に、新しく作成したカラークラス以外の、CSS内のカラーの参照を削除します。
Yeeeaaahhh .... CSSでvar()関数を使用できるようになりました .... ...
良いニュースは、JavaScriptアクセスを使用してそれを変更できることです。これはグローバルに変更されます...
しかし、それらを宣言する方法...
それは非常に簡単です:
たとえば、あなたが割り当てたいの#ff0000
にvar()
単にそれを割り当て、:root
またに注意を払います、--
:
:root {
--red: #ff0000;
}
html, body {
background-color: var(--red);
}
良いものは、ブラウザのサポートされている悪いわけではない、またなどのブラウザで使用されるようにコンパイルする必要はありませんLESS
かSASS
...
また、赤の値を青に変更する簡単なJavaScriptスクリプトを次に示します。
const rootEl = document.querySelector(':root');
root.style.setProperty('--red', 'blue');
CSS用の「少ない」Ruby Gemは見栄えが良いです。
はい、近い将来(私は2012年6月にこれを書き込みます)、less / sassなどを使用せずにネイティブのcss変数を定義できます!Webkitエンジンは最初のcss変数ルールを実装したばかりなので、ChromeとSafariの最新バージョンはすでに動作しています。オフィシャルWebkit(Chrome / Safari)開発ログとオンサイトのcssブラウザーのデモをご覧ください。
うまくいけば、今後数か月以内に、ネイティブのcss変数の広範なブラウザーサポートが期待できます。
サポートのため、css3変数を使用しないでください。
純粋なcssソリューションが必要な場合は、次のようにします。
意味論的な名前を持つカラークラスを使用します。
.bg-primary { background: #880000; }
.bg-secondary { background: #008800; }
.bg-accent { background: #F5F5F5; }
構造を皮膚から分離する(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 */
これらを別のcssファイルに入れて、必要に応じて変更します。
PHPを使用できない理由はわかりません。その後、必要に応じて変数を追加して使用し、ファイルをPHPファイルとして保存し、.cssファイルではなくスタイルシートとしてその.phpファイルにリンクします。
PHPである必要はありませんが、私の言う通りです。
プログラミングをしたいときは、CSS(たぶん)が変数のようなものをサポートするまで、プログラミング言語を使ってみませんか?
また、Nicole Sullivanのオブジェクト指向CSSも確認してください。
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
システムに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
もちろん、複数のクラスの素晴らしい世界のおかげで、これを行うことができます。
.red {color:red}
.blackBack {background-color: black}
しかし、私はしばしば次のようにそれらを組み合わせることにします:
.highlight {color:red, background-color: black}
私は意味警察があなたのいたるところにいることを知っていますが、それはうまくいきます。
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;
}
CSSだけでは不可能です。
less.jsを使用してJavaScriptとLESSでそれを行うことができます。これはLESS変数をCSSにライブでレンダリングしますが、これは開発専用であり、実際の使用にはオーバーヘッドが多すぎます。
CSSに最も近いものは、次のような属性部分文字列セレクターを使用することです。
[id*="colvar-"] {
color: #f0c69b;
}
そして、id
調整したいすべての要素のをcolvar-
、などで始まる名前に設定しcolvar-header
ます。その後、色を変更すると、すべてのIDスタイルが更新されます。これは、CSSだけで実現できる限りのことです。