CSS変数の解析-CSSチュートリアル-php.cn

CSS変数の解析

不言

リリース： 2018-06-12 15:25:26

オリジナル

1898 人が閲覧しました

この記事では主に 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 メディアクエリを実装すると便利です

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

<style>.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;        
    }}</style><p class="box"></p>

ログイン後にコピー

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

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

ログイン後にコピー

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