CSS クラスを使用してグローバルな変数を動的にテーマ化するにはどうすればよいですか?

グローバルな少ない変数のテーマ化

アプリ開発のコンテキストでは、さまざまなビジュアルテーマを顧客に迅速に提示する必要が生じる場合があります。ページのビジュアルを変更するために本体に個別の外観クラスを定義することもアプローチですが、グローバルなless変数をテーマ化することを検討しています。

Less変数定義

Lessを使用すると、次のことが可能になります。次のようにグローバル変数を定義します。

@variable-name: value;

変数のテーマ化

外観 CSS クラスに応じて変数をテーマ化するには、Less の @mixin を使用してミックスインを定義できます。変数を受け取り、外観クラスに基づいて再定義します。基本的な例を次に示します:

<code class="less">@navBarHeight: 50px;

@mixin theme($name) {
  if ($name == "white") {
    @navBarHeight: 130px;
  } else if ($name == "black") {
    @navBarHeight: 70px;
  }
}</code>

使用法

このミックスインは次のように使用できます:

<code class="less">.appearanceWhite {
  @include theme("white");
}
.appearanceBlack {
  @include theme("black");
}</code>

高度な例

よりカスタマイズ可能なアプローチとして、パターン マッチングとルールセット引数を使用できます。

<code class="less">@themes: (
  (
    blue,
    rgb(41, 128, 185)
  ),
  (
    marine,
    rgb(22, 160, 133)
  ),
  ...
);

@mixin themed(@style) {
  @each $theme in @themes {
    .theme-@{nth($theme, 1)} & {
      @style();
    }
  }
}</code>

使用法

<code class="less">#navBar {
  @include themed({
    color: green;
    background-color: orange;
  });
}</code>

を使用することにより、これらのテクニックを使用すると、CSS クラスに基づいてグローバルな Less 変数を動的にテーマ化でき、実行時にさまざまなビジュアル テーマを簡単に切り替えることができます。

以上がCSS クラスを使用してグローバルな変数を動的にテーマ化するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。