Visual Studio では、たとえば CSS 値に「青」と入力すると、適切な RGB に変換されます。カスタムカラーを定義することは可能ですか? 「companyBlue」または「companyOrange」を定義できるようになりたいです。
2 に答える
ファイルを使用しているので、、、...などの色CSS
名を使用しないでください。ブラウザがこれらの色に与える色の値を自分で決定するためです。Google Chromeと比較すると、IEでは色が完全に異なる場合があります。Blue
Green
Green
次のように、代わりに16進値を使用することをお勧めします。
#000 /* Black */
#fff /* White */
#f00 /* Red */
このフォトショップのようなカラーセレクターを使用すると、16進値を簡単に取得できます:http ://www.2createawebsite.com/build/hex-colors.html
さて、元の質問に戻りましょcompanyOrange
う。CSSのように変数をどのように使用できますか?簡単に言えば...CSSだけでは変数を使用できません。ただし、CSSファイルの先頭にある値を次のようなコメントに「保存」することができます。
/*
COLORS
Black: #000
Company Orange: #f64;
Company grey: #444;
*/
代わりに本当に変数を使用したい場合は、SASS、LESS、StylusなどのCSS前処理プログラムを使用できます。これらはすべて変数を使用します。
続きを読む:
私はこれを見つけましたが、ソリューションがあまり好きではありません: http://24ways.org/2006/faster-development-with-css-constants/
本当に定数を実現するには、CSS 以外のものを使用してファイルを処理してから、ブラウザーに送信する必要があります。任意のスクリプト言語 (PHP、ASP、ColdFusion など) を使用して、定数を入力した CSS ファイルを解析できます。したがって、CSS ファイルの定数セクションには次のようになります。
$darkgrey = '#333333'; $darkblue = '#000066';
CSS ファイルの残りの部分は通常どおりですが、定数値を使用する場合は、色を追加する代わりに定数名を使用します。
p { color: $darkgrey; }
サーバー側のスクリプトは、CSS ファイルを解析し、定数名を定数値に置き換えて、有効な CSS ファイルをブラウザーに提供できます。Christian Heilmann は PHP に対してこれを行っていますが、これはサーバーで利用可能な任意の言語に適応させることができます。
Shaun Inman は、PHP スクリプトにリンクする必要をなくし、 at-rules の構文を使用して定数を追加できる別の方法を考え出しました。この方法でも PHP を使用しているため、.htaccess ファイルを編集する必要があります。
もう 1 つの方法は、ローカルでスクリプトを使用して静的 CSS ファイルを生成することです (定数が単に開発速度を向上させるためのものである場合)。または Web アプリケーション自体の一部として生成します。更新する値の代わりに定数名を使用してテンプレート スタイルシートを保存すると、スクリプトでテンプレートを開き、変数を置き換えて、結果を新しいスタイルシート ファイルとして保存するだけで済みます。
CSS 定数は開発者にとって非常に役立ちますが、アプリケーションに新しい機能を追加するためにも使用できます。この記事の冒頭で使用した電子メール アドレスの例と同様に、CSS とサーバー サイド スクリプトを組み合わせて使用すると、サイト管理者は、管理されているコンテンツのページで使用する新しいテーマの色を選択できるようになります。サイト。定数を使用すると、CSS の特定の部分を変更するオプションを与えるだけで済み、別の CSS ファイル全体をアップロードする必要がなくなります。これにより、興味深い結果が得られる可能性があります。
今年のクリスマスツリーの下に実際の CSS 定数が見つかる可能性は低いため、上記の方法はスタイルシートをより適切に管理するためのいくつかの可能性です。ただし、より良い方法、CSS 定数のホラー ストーリー、またはその他の提案がある場合は、以下にコメントを追加してください。