web-dev-qa-db-ja.com

CSSグローバル変数の作成：スタイルシートテーマ管理

次のようなCSSでグローバル変数を設定する方法はありますか？

@Color1 = #fff;
@Color2 = #b00;

h1 {
  color:@Color1;
  background:@Color2;
}
cssvariables
57
DreamTeK

最新アップデート：03/04/2018

CSS変数（カスタムプロパティ）が到着しました！

もう1年、別のブラウザ。 Edgeは、この本当に素晴らしい機能をサポートすることで、MozillaとGoogleに加わりました。

プリプロセッサ "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 をご覧ください。

![supported browsers

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変数の完全な仕様

Read more

やってみて

テスト用のフィドルとスニペットが以下に添付されています。

（サポートされているブラウザでのみ動作します。）

DEMO FIDDLE

: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>
100
DreamTeK

現在、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);
}
26
Daniel Imms

CSSを使用することはできませんが、 less または SASS のようなCSSプリプロセッサを使用します。

6
deceze

SASSをお試しください http://sass-lang.com/ またはLESS http://lesscss.org/

SASSが大好きで、すべてのプロジェクトに使用しています。

3
joshuahornby10

私はこのようにします：

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; ?>; }
3
Helmo56

同じためには、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);
 }
1
Rahul Patil