CSSカスタム変数プロパティ:less,sassのようにcssで変数を使用

4773 ワード

less ss html css

紹介する
通常、大規模なドキュメントまたはアプリケーション(小規模なドキュメントまたはアプリケーション)には、大量のCSSが含まれます.これらのCSSファイルには通常、同じデータが大量に存在します.たとえば、1つのWebサイトで1つの色のトピックを使用し、常に3～4色で貫くことを繰り返します.これらのデータを変更することは非常に困難であり、エラーが発生しやすい.CSSファイル(さらには複数のファイル)にばらばらに分布しているため、検索置換実装を使用できない可能性がある.
したがって、CSS は、ユーザが特定の構文を使用して関連変数を定義し、var()参照を一定の範囲で繰り返し使用し、これらの変数を変更することを可能にし、これらの変数を参照する場所のCSSも対応して変化する.
親測:ios 9環境では効果がなく、ios 9はES 56をサポートしていないが、これに関連して2017-11-5注と推測される.
構文
カスタム属性の定義:--*--で始まり、変数名が付けられ、継承性があり、すべての要素に適用され、属性が計算され、アニメーションには適用されません.

Name:             --*
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); }

I inherited blue from the root element! //blue
I got green set directly on me!        //green

  While I got red set directly on me!     //red
  I’m red too, because of inheritance!  //red

```

は、通常の属性と混合することができる

: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   { --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%+5 em)」というスペースのない書き方は間違っています.

式に「*」と「/」がある場合は、前後にスペースはありませんが、スペースを残すことをお勧めします.

変数初期デフォルト値

   .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-...

PHPは迅速に微信の小さいプログラムの授権を実現します

2.1概要