カスタムプロパティを使用して複数の背景を管理します

CSSカスタムプロパティの大きな利点の1つは、値のコンポーネントとして使用できることです。設計効果を実現するために複数の背景を使用しているとします。各背景には、色、画像、繰り返し、場所などの独自のプロパティがあり、冗長コードにつながる可能性があります！

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つの方法は、基本的な背景セットの変数を作成し、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）;
  }
}

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

体 {
  -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カスタムプロパティの大きな利点です！

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

 -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）;
}

それでおしまい。

以上がカスタムプロパティを使用して複数の背景を管理しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。