CSS クラスを使用してグローバルな変数を動的にテーマ化するにはどうすればよいですか?-CSSチュートリアル-php.cn

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

Susan Sarandon

リリース： 2024-11-06 05:47:02

オリジナル

751 人が閲覧しました

How Can I Dynamically Thematize Global Less Variables Using CSS Classes?

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

アプリ開発のコンテキストでは、さまざまなビジュアルテーマを顧客に迅速に提示する必要が生じる場合があります。ページのビジュアルを変更するために本体に個別の外観クラスを定義することもアプローチですが、グローバルな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 サイトの他の関連記事を参照してください。