私は非常に長いCSSファイルに取り組んでいます。クライアントがカラースキームの変更を要求できることを知っていて、変数に色を割り当てることはできますか?変数を変更して、それを使用するすべての要素に新しい色を適用することができますか?
PHPを使用してCSSファイルを動的に変更できないことに注意してください。
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変数のネイティブサポートが付属しています。
人々は私の答えを支持し続けますが、それは 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
CSS自体は変数を使用しません。ただし、 SASS などの別の言語を使用して、変数を使用してスタイリングを定義し、自動的にCSSファイルを生成して、Webに配置できます。 CSSに変更を加えるたびにジェネレーターを再実行する必要があることに注意してくださいが、それほど難しくありません。
CSS3変数 を試すことができます:
body {
--fontColor: red;
color: var(--fontColor);
}
CSSのみの簡単な解決策はありません。これを行うことができます:
CSSファイルでbackground-color
およびcolor
のすべてのインスタンスを検索し、一意の色ごとにクラス名を作成します。
.top-header { color: #fff; }
.content-text { color: #f00; }
.bg-leftnav { background-color: #fff; }
.bg-column { background-color: #f00; }
次に、色が関係するサイトのすべてのページを調べて、色と背景色の両方に適切なクラスを追加します。
最後に、新しく作成した色クラス以外のCSSの色の参照を削除します。
CSSの 'Less' Ruby Gemはすてきです。
はい、近い将来(2012年6月にこれを書いています)、less/sassなどを使用せずにネイティブのcss変数を定義できます! Webkitエンジンは最初のcss変数ルールを実装したばかりであるため、ChromeおよびSafariのEdgeバージョンのカットはすでにそれらで機能します。オンサイトcssブラウザーデモで Official Webkit(Chrome/Safari)開発ログ を参照してください。
願わくば、今後数か月のうちにネイティブのcss変数がブラウザで広くサポートされることを期待できます。
Yeeeaaahhh....ここでvar()関数を使用できますCSS .....
良いニュースは、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');
PHPを使用できない理由については明確ではありません。その後、必要に応じて変数を追加して使用し、PHPファイルとしてファイルを保存し、.cssファイルではなくスタイルシートとしてその.phpファイルにリンクします。
PHPである必要はありませんが、私の言うとおりです。
プログラミングのものが必要な場合、CSS(おそらく)が変数などをサポートするまでプログラミング言語を使用しないのはなぜですか?
また、Nicole Sullivanの Object-oriented 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
JavaScriptを介してCSSを渡し、COLOUR1のすべてのインスタンスを特定の色(基本的には正規表現)に置き換え、エンドユーザーがJSをオフにしている場合のバックアップスタイルシートを提供できます。
SCSSの使用を検討してください。 CSS構文と完全に互換性があるため、有効なCSSファイルは有効なSCSSファイルでもあります。これにより、移行が簡単になり、接尾辞を変更するだけです。多数の機能強化があり、最も有用なのは変数とネストされたセレクターです。
クライアントに出荷する前に、プリプロセッサで実行してCSSに変換する必要があります。
私は長年にわたり筋金入りのCSS開発者でしたが、SCSSでプロジェクトを行うことを余儀なくされて以来、私は他のものを使用しません。
サポートのため、css3変数を使用しないでください。
純粋なCSSソリューションが必要な場合は、次のことを行います。
semenaticの名前のカラークラスを使用します。
.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ファイルに入れて、必要に応じて変更します。
セレクターをグループ化できます:
#selector1, #selector2, #selector3 { color: black; }
もちろん、複数のクラスの素晴らしい世界のおかげで、これを行うことができます:
.red {color:red}
.blackBack {background-color: black}
とにかく、とにかく次のように組み合わせてしまうことがよくあります。
.highlight {color:red, background-color: black}
セマンティックポリスがあなたの周りにあることは知っていますが、うまくいきます。
システムに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
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;
}