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

Thematizing Global Less Variables

In the context of developing an app, you may encounter a need to quickly present different visual themes to customers. While defining separate appearance classes for body to change page visuals is an approach, you're looking to thematize global less variables.

Less Variable Definition

Less allows you to define global variables as follows:

@variable-name: value;

Thematizing Variables

To thematize variables depending on an appearance CSS class, you can use Less's @mixin to define a mixin that takes a variable and redefines it based on the appearance class. Here's a basic example:

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

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

Usage

You can use this mixin as follows:

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

Advanced Example

For a more customizable approach, you can use Pattern Matching and Ruleset Arguments:

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

Usage

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

By using these techniques, you can dynamically thematize global less variables based on CSS classes, allowing you to easily switch between different visual themes at runtime.

The above is the detailed content of How Can I Dynamically Thematize Global Less Variables Using CSS Classes?. For more information, please follow other related articles on the PHP Chinese website!