CSSで変数を（翻訳）を使用したとして以下のような、SASS - CSSのカスタム変数属性 - コードワールド

入門

通常、大規模な文書やアプリケーション（たとえ小規模なドキュメントまたはアプリケーション）CSSの多数が含まれます。CSSファイル内の同じデータの多くは、通常はありますが、例えば、サイトには、カラーテーマを使用することができますし、全体の3〜4色を繰り返しました。それはCSSファイル（あるいは複数のファイル）で配布飛散するので、データへのこれらの変更は、非常に困難とエラーが発生しやすくなり、代替実装を見つけるために使用することはできません。

したがってCSS自定义变量属性、ユーザは、関連する変数を定義し、繰り返し一定の範囲で使用される特定の構文を使用することを可能にする、出現var()これらの変数の変更、参照、これらの変数は変更が発生する、対応するCSSの場所を参照しています。

プロのテスト：ios9環境下で効果なし、ios9はおそらく、この2017年11月5日のノートに関連ES56を、サポートしていません。

文法

カスタム属性を定義します。`--*`

するには--で始まる、プラス変数名、継承は、すべての要素に適用されており、計算がアニメーションには適用されません属性

Name:             --*
Value:            <declaration-value>
Initial:          (nothing, see prose)
Applies to:       all elements
Inherited:        yes
Percentages:      n/a
Media:            all
Computed value:    specified value with variables substituted (but see prose for "invalid variables")
Canonical order:   per grammar
Animatable:            no

使用例

予備的使用

   :root {
     --main-color: #06c;
     --accent-color: #006;
   }
   /* The rest of the CSS file */
   #foo h1 {
     //引用变量
     color: var(--main-color);
   }

以下のエラーを使用してください！！！

 他错误地尝试使用变量名代替属性名：
   .foo {
     --side: margin-top;
     var(--side): 20px;
   }
 这并不能实现`margin-top: 20px`，会抛出语法错误。

大文字と小文字を区別し
ているが--FOO持つ--fooすべての法的変数がありますが、元を参照するときに参照するには、後者は違いはありません、元の値です。
```
 h1 {
    --font-color: lightblue;
    --Font-color: lightgreen;
    color: var(--Font-color);
    //lightgreen
}
```
設定値注意

カスタム属性をすることができ!important、エンドが、CSSパーサは自動的に優先プロパティを決定するために、プレス滝の流れの形で、このプロパティの値を削除します。言い換えれば、あなたが使用できますが!important、しかし、最優先「！」他の同様のCSSの役割の発効は、CSSを実装していません禁止します。
```
h1 {
    --font-color: lightblue!important;
    --Font-color: lightgreen;
    color: var(--font-color);
    color: var(--Font-color);
    //lightgreen
    }
```

継承と優先順位（通常理解することができます）

:root { --color: blue; }
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }

<p>I inherited blue from the root element!</p> //blue
<div>I got green set directly on me!</div>        //green
<div id='alert'>
  While I got red set directly on me!     //red
  <p>I’m red too, because of inheritance!</p>  //red
</div>
```

通常のプロパティと混合することができます

:root {
  --main-color: #c06;
  --accent-background: linear-gradient(to top, var(--main-color), white);
}

各呼び出しは無効です。
```
        body {
            font-size: 16px;
        }
        //h1最终大小为16px
        h1 {
            --font-color: lightblue!important;
            --Font-color: lightgreen;
            --one: calc(var(--two) + 30px);
            --two: calc(var(--one) - 50px);
            color: var(--font-color);
            color: var(--Font-color);
            font-size: var(--one);
        }
```
様々内で法的、実際には、二つの異なる範囲が異なる変数を参照してください。
```
   <one><two><three /></two></one>
   one   { --foo: 10px; }   //10
   two   { --bar: calc(var(--foo) + 10px); } //20
   three { --foo: calc(var(--bar) + 10px); } //30
```
一般的な数学的表記法を使用してCALC（）だけでなく、よりインテリジェントな機能を提供します。
- 使用 "+"、 " - "、 "*" と "/" 4つの事業。
- パーセンテージは、PX、EM、REM、およびその他の手段を使用することができます。
- これは、種々の演算部と混合することができます。
- 「+」で表現し、「 - 」、それは前後にスペースを持っている必要があり、そのような「widht：CALC（12％+など 5em）」この文言は一切スペースエラーではありません。
- 「*」と「/」の表現は、それが前と後にはスペースになることはできませんが、スペースを残すことをお勧めします。

変数の初期デフォルト値

   .component .header {
     color: var(--header-color, blue);
   }
   .component .text {
     color: var(--text-color, black);
   }
   
   /* In the larger application’s style: */
   .component {
     --text-color: #080;
     /* header-color 为默认值blue
     注： var(--header-color, blue， red)无效
     */
   }

使用変数を置き換え
var()CSSなどのオリジナルキャラクターを交換しないで
```
       .foo {
         --gap: 20;
         margin-top: var(--gap)px;
       }
```
これは設定できません margin-top: 20px;(a length)が、同等に margin-top: 20 px; (a number followed by an ident空格)、これはしかし、合法的なプロパティ値ではありません。 calc() 達成することができます：
```
       .foo {
         --gap: 20;
         margin-top: calc(var(--gap) * 1px);
       }
       
```
川からの次のコードの構文は、エラーのない、ない実用的な効果です。のでは20pxない背景色何の場合、有効な値の他の設定は、（ここでの設定よりも優先されていない）、またはグローバルなデフォルトを使用するようになります。继承背景色透明背景色
```
       :root { --not-a-color: 20px; }
       p { background-color: red; }
       p { background-color: var(--not-a-color); }
```

        //这里虽然有背景色的设置但是优先级并没有自定义属性的高，故而`p`的背景色是透明色

翻訳参照：

HTTPS：//drafts.csswg.org/css -...

CSSで変数を（翻訳）を使用したとして以下のような、SASS - CSSのカスタム変数属性

入門

文法

カスタム属性を定義します。--*

使用例

翻訳参照：

おすすめ

カスタム属性を定義します。`--*`