次のようなCSSでグローバル変数を設定する方法はありますか?
@Color1 = #fff;
@Color2 = #b00;
h1 {
color:@Color1;
background:@Color2;
}
最新アップデート:03/04/2018
プリプロセッサ "NOT"が必要です!
CSSには多くの繰り返しがあります。単一の色を複数の場所で使用できます。
一部のCSS宣言では、カスケードでこれを上位に宣言し、CSSの継承によりこの問題を自然に解決することができます。
自明でないプロジェクトの場合、これは常に可能とは限りません。 :root
疑似要素で変数を宣言することにより、CSS作成者は変数を使用して繰り返しのいくつかのインスタンスを停止できます。
スタイルシートの上部で変数を設定します。
CSS
ルートクラスを作成します。
:root {
}
変数の作成(-[String]:[value])
:root {
--red: #b00;
--blue: #00b;
--fullwidth: 100%;
}
CSSドキュメントの任意の場所に変数を設定します。
h1 {
color: var(--red);
}
#MyText {
color: var(--blue);
width: var(--fullwidth);
}
現在の互換性については caniuse.com をご覧ください。
FIREFOX:バージョン31+(有効デフォルトで)
(いつものように先導します。) More info from Mozilla
CHROME:バージョン49+(有効デフォルトで)。
」experimental Web Platform機能を有効にすることで、この機能をChromeバージョン48でテスト用に有効にできます。Chromeアドレスバーにchrome://flags/
と入力して、この設定にアクセスします。 "
Safari/IOS Safari:バージョン9.1/9.3(デフォルトで有効)。
Opera:Version39+(有効デフォルトで)。
Android:バージョン52+(有効デフォルトで)。
IE:それは決して起こりません。
エッジ:バージョン15+(有効デフォルトで)。
CSSカスタムプロパティがWindows Insider Previewビルド14986に追加されました
W3C SPEC
今後のCSS変数の完全な仕様
テスト用のフィドルとスニペットが以下に添付されています。
(サポートされているブラウザでのみ動作します。)
:root {
--red: #b00;
--blue: #4679bd;
--grey: #ddd;
--W200: 200px;
--Lft: left;
}
.Bx1,
.Bx2,
.Bx3,
.Bx4 {
float: var(--Lft);
width: var(--W200);
height: var(--W200);
margin: 10px;
padding: 10px;
border: 1px solid var(--red);
}
.Bx1 {
color: var(--red);
background: var(--grey);
}
.Bx2 {
color: var(--grey);
background: black;
}
.Bx3 {
color: var(--grey);
background: var(--blue);
}
.Bx4 {
color: var(--grey);
background: var(--red);
}
<p>If you see four square boxes then variables are working as expected.</p>
<div class="Bx1">I should be red text on grey background.</div>
<div class="Bx2">I should be grey text on black background.</div>
<div class="Bx3">I should be grey text on blue background.</div>
<div class="Bx4">I should be grey text on red background.</div>
現在、CSSで変数を作成することはできません。この種の機能が必要な場合は、 SASS または LESS のようなCSSプリプロセッサを使用する必要があります。 SASSに表示されるスタイルは次のとおりです。
$Color1:#fff;
$Color2:#b00;
$Color3:#050;
h1 {
color:$Color1;
background:$Color2;
}
また、ネストセレクターなどの他の(素晴らしい)こともできます。
#some-id {
color:red;
&:hover {
cursor:pointer;
}
}
これは次のようにコンパイルされます。
#some-id { color:red; }
#some-id:hover { cursor:pointer; }
公式のSASSチュートリアル をチェックして、構文/機能のセットアップ手順などを確認してください。個人的には MindscapeのWeb Workbench というVisual Studio拡張機能を使用しています。開発を簡単にするために、他のIDE用のプラグインも多数あります。
2014年7月/ 8月の時点で、FirefoxはCSS変数に draft spec を実装しています。構文は次のとおりです。
:root {
--main-color: #06c;
--accent-color: #006;
}
/* The rest of the CSS file */
#foo h1 {
color: var(--main-color);
}
SASSをお試しください http://sass-lang.com/ またはLESS http://lesscss.org/
SASSが大好きで、すべてのプロジェクトに使用しています。
私はこのようにします:
html:
<head>
<style type="text/css"> <? require_once('xCss.php'); ?> </style>
</head>
xCss.php:
<? // place here your vars
$fntBtn = 'bold 14px Arial'
$colBorder = '#556677' ;
$colBG0 = '#dddddd' ;
$colBG1 = '#44dddd' ;
$colBtn = '#aadddd' ;
// here goes your css after the php-close tag:
?>
button { border: solid 1px <?= $colBorder; ?>; border-radius:4px; font: <?= $fntBtn; ?>; background-color:<?= $colBtn; ?>; }
同じためには、LESSまたはSASSが必要です。
しかし、CSS3でうまくいくと思われる別の選択肢があります。
http://css3.bradshawenterprises.com/blog/css-variables/
例:
:root {
-webkit-var-beautifulColor: rgba(255,40,100, 0.8);
-moz-var-beautifulColor: rgba(255,40,100, 0.8);
-ms-var-beautifulColor: rgba(255,40,100, 0.8);
-o-var-beautifulColor: rgba(255,40,100, 0.8);
var-beautifulColor: rgba(255,40,100, 0.8);
}
.example1 h1 {
color: -webkit-var(beautifulColor);
color: -moz-var(beautifulColor);
color: -ms-var(beautifulColor);
color: -o-var(beautifulColor);
color: var(beautifulColor);
}