CSS変数の解析

不言オリジナル: 2018-06-12 15:25:261898ブラウズ

この記事では主に CSS 変数の分析を紹介しますが、これを必要な友達に共有します。 CSS 変数では、SASS や LESS などのプリコンパイラーのみを使用できます。新しいドラフトのリリースにより、CSS で変数を直接定義して使用することはもはや夢物語ではなくなりました。この記事では、CSS変数について詳しく紹介します

基本的な使い方

CSS変数は、CSS作成者によって定義され、ドキュメント全体で再利用される特定の値を含むエンティティです。カスタム属性を使用して変数名を設定し、特定の var() を使用してアクセスします

互換性: モバイルおよび IE ブラウザーには互換性がありません

【変数の宣言】

変数は

で始まる必要があります。たとえば、 --example-variable: 20px は、 --example-varibale 変数に 20px を割り当てることを意味します

変数を宣言するステートメントを任意の要素内に配置できます。グローバル変数を設定したい場合は、次のように設定できます。 : root、body、またはhtml

:root{
  --bgColor:#000;
}

-- 変数宣言は通常のスタイル宣言文と同様に、インラインスタイルも使用できます

<body style="--bgColor:#000">

変数宣言文は要素内に含める必要があり、ランダムに配置することはできません

//错误
<style>
--bgColor:#000;
</style>

【変数を使う】

var( ) 関数を使用すると、変数を使用するため、どこでも使用できます。例: var(--example-variable) は、--example-variable

<body style="--bgColor:#000;">
    <p style="width: 100px;height: 100px;background-color: var(--bgColor)"></p>    </body>

に対応する値を返します。 var() 関数には、変数が値を取得できない場合にデフォルト値を設定するオプションのパラメーターもあります。デフォルト値

<body>
    <p style="width: 100px;height: 100px;background-color: var(--bgColor,pink)"></p>    </body>

継承とカスケード

通常のスタイル属性と同様に、変数属性も継承とカスケードをサポートします。以下の例では、body 要素の変数値は緑、p 要素の変数値は赤です。カスケードの原理に基づいて、p 要素の最終的な背景色は赤です

<body style="--bgColor:green;">
    <p style="width: 100px;height: 100px;--bgColor: red;background-color: var(--bgColor,pink)"></p>    </body>

組み合わせと計算

【組み合わせ】

CSS変数を組み合わせて使うことができます

<style>.box{
    --top:20%;
    --left:30%;
    width: 100px;
    height: 100px;
    background-image: url(img/24/xiaoshu.jpg);
    background-position: var(--left)  var(--top);}</style><p class="box"></p>

ただし、CSS変数はvar(--color1)var(--color2)という形式で組み合わせるとブラウザで認識されません。 var(--color1) var(--color2) などは #333 として解析されますが、これもブラウザでは認識されません

<style>.box{
    --color1:#;
    --color2:333;
    width: 100px;
    height: 100px;
    background-color: var(--color1)var(--color2);}</style><p class="box"></p>

【計算】

変数は通常のスタイルの値と組み合わせたものと同じです。 , 計算には calc を使うこともできます

<style>.box{
    --borderWidth:2px;
    width: 100px;
    height: 100px;
    background-color:lightblue;
    border-left: calc(var(--borderWidth) * 2) solid black;}</style><p class="box"></p>

CSS 変数は JS Interaction と対話できます。 getPropertyValue() メソッドと setProperty() メソッドのみを使用でき、スタイル属性

[style 属性]

<p id="box" style="--color:lightgreen;background-color: var(--color)"></p>    <script>　　var oBox = document.getElementById(&#39;box&#39;);
　　console.log(oBox.style[&#39;--color&#39;]);    //undefined</script>

[getPropertyValue()]

<p id="box" style="--color:lightgreen;background-color: var(--color)"></p>    <script>　　var oBox = document.getElementById(&#39;box&#39;);
　　console.log(oBox.style.getPropertyValue(&#39;--color&#39;));//&#39;lightgreen&#39;</script>

[setProperty()]

<style>#box{    
    --color:lightgreen;
    background-color: var(--color);
    width: 100px;
    height: 100px;
    display:inline-block;}</style><button id="btn" type="button">变浅蓝</button><p id="box"></p>    <script>var oBox = document.getElementById(&#39;box&#39;);var oBtn = document.getElementById(&#39;btn&#39;);
oBtn.onclick = function(){
    oBox.style.setProperty(&#39;--color&#39;,&#39;lightblue&#39;);
}</script>

not は使用できないことに注意してください。サポートされています

特に注意すべき点は、変数がサポートされていないことです!重要

.box{
    --color:red;
    width: 100px;
    height: 100px;
    background-color:--color !important;
}</style><p class="box"></p>

Chrome ブラウザのスクリーンショットは次のとおりです

目的

1. 保守性

カラースキームまたはサイズスキームを維持するWeb ページの意味一部のスタイルは CSS ファイル内で複数回出現し、繰り返し使用されます。プランを変更する場合、特定のスタイルを調整する場合でも、プラン全体を完全に変更する場合でも、複雑な問題になります。このとき、CSS 変数が役に立ちます

:root{
  --mainColor:#fc0;
}
.p1{
  color:var(--mainColor);
}
.p2{
  color:var(--mainColor);
}

2. 意味化。

変数の2番目の利点は、名前自体に意味情報が含まれていることです。 CSS ファイルが読みやすく、理解できるようになります。 main-text-color は、ドキュメント内の #fc0 よりも理解しやすいです。特に、同じ色が異なるファイルに表示される場合に便利です

3. @media メディアクエリを実装すると便利です

一般的に、メディアクエリは次のとおりです

c9ccee2e6ea535a969eb3f532ad9fe89.box{    
    width: 100px;
    height: 100px;
    padding: 20px;
    margin: 10px;
    background-color: red}@media screen and (max-width:600px) {
    .box{
        width: 50px;
        height: 50px;
        padding: 10px;
        margin: 5px;        
    }}531ac245ce3e4fe3d50054a55f2659279890cd3db8af2c13be66110fccb4c14994b3e26ee717c64999d7867364b1b4a3

ただし、変数を使えばコードを効率化できます

<style>.box{    
    --base-size:10px;
    width: calc(var(--base-size) * 10);
    height: calc(var(--base-size) * 10);
    padding: calc(var(--base-size) * 2);
    margin: calc(var(--base-size) * 1);
    background-color: red;}@media screen and (max-width:600px) {
    .box{
        --base-size:5px;    
    }}</style><p class="box"></p>

以上がこの記事の全内容であり、皆様の学習に役立つことを願っております。