CSSカスタムプロパティの大きな利點(diǎn)の1つは、値のコンポーネントとして使用できることです。設(shè)計(jì)効果を?qū)g現(xiàn)するために複數(shù)の背景を使用しているとします。各背景には、色、畫像、繰り返し、場所などの獨(dú)自のプロパティがあり、冗長コードにつながる可能性があります！

4つの畫像があるとします。

體 {
  バックグラウンドポジション：殘り10pxの上位10px、右10px 10px、下部10px右10px、ボトム10px殘り10px;
  バックグラウンドリピート：ノーリピート。
  バックグラウンドイメージ：url（https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-top-left.svg）、url（https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-right.svg） url（https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-right.svg）、url（https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-left.svg）;
}

次に、メディアクエリに5番目の背景を追加します。

 @media（min-width：1500px）{
  體 {
    /*既存のすべての背景を繰り返し、5番目の背景を追加します。 */
  }
}

これは非常に冗長になります！ 4つの畫像すべてをもう一度繰り返して、5番目の畫像を追加する必要があります。コードの複製がたくさん！

1つの方法は、基本的な背景セットの変數(shù)を作成し、5番目のバックグラウンドをより簡潔に追加することです。

體 {
   -  basebackgrounds：url（https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-top-left.svg）、url（https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Angles-bottom-right.svg） url（https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-right.svg）、url（https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-left.svg）;
  バックグラウンドポジション：殘り10pxの上位10px、右10px 10px、下部10px右10px、ボトム10px殘り10px;
  バックグラウンドリピート：ノーリピート。
  バックグラウンドイメージ：var（ - ベースバックグラウンド）;
}
@media（min-width：1500px）{
  體 {
    バックグラウンドイメージ：var（ - ベースバックグラウンド）、url（addded-fifth-background.svg）;
  }
}

または、バックグラウンド畫像ごとに変數(shù)を作成して、必要に応じてそれらをグループ化することもできます。これは、より明確で管理しやすい場合があります。

體 {
  -bg1：url（https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-top-left.svg）;
  -bg2：url（https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-top-right.svg）;
  -bg3：url（https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-right.svg）;
  -bg4：url（https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-left.svg）;
  -bg5：url（https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-left.svg）;
  バックグラウンドイメージ：var（ -  bg1）、var（ -  bg2）、var（ -  bg3）、var（ -  bg4）;
}
@media（min-width：1500px）{
  體 {
    バックグラウンドイメージ：var（ -  bg1）、var（ -  bg2）、var（ -  bg3）、var（ -  bg4）、var（ -  bg5）;
  }
}

サポートクエリを含む基本バージョンは次のとおりです。

値の特定の部分を動的に変更することは、CSSカスタムプロパティの大きな利點(diǎn)です！

さらに、背景については、略語全體を変數(shù)として含めることが最善です。これにより、このようにすることなく、すぐにすべてをまとめることが簡単になります。

 -bg_1_url：url（）;
-bg_1_size：100px;
-BG_1_Repeat：ノーレピート;
/ *など */

すべてのプロパティを略語に配置し、必要に応じて使用する方が簡単です。

體 {  
  -bg_1：url（https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-top-left.svg）トップ10px殘り10px/86pxなし。
  -bg_2：url（https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-top-right.svg）トップ10px右10px/86px no-repeat;
  -bg_3：url（https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-right.svg）ボトム10px右10px/86px no-repeat;
  -bg_4：url（https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-left.svg）ボトム10px殘り10px/86px no-repeat;

  背景：var（ -  bg_1）、var（ -  bg_2）、var（ -  bg_3）、var（ -  bg_4）;
}

それでおしまい。

以上がカスタムプロパティを使用して複數(shù)の背景を管理しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。