Comment puis-je thématiser dynamiquement moins de variables globales à l'aide de classes CSS ?

Thématiser Global Moins de Variables

Dans le cadre du développement d'une application, vous pouvez rencontrer le besoin de présenter rapidement différents thèmes visuels aux clients. Bien que définir des classes d'apparence distinctes pour le corps afin de modifier les visuels de la page soit une approche, vous cherchez à thématiser moins de variables globales.

Définition de variable moins

Less vous permet de définissez les variables globales comme suit :

@variable-name: value;

Variables thématisées

Pour thématiser les variables en fonction d'une classe CSS d'apparence, vous pouvez utiliser @mixin de Less pour définir un mixin qui prend une variable et la redéfinit en fonction de la classe d'apparence. Voici un exemple de base :

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

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

Utilisation

Vous pouvez utiliser ce mixin comme suit :

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

Exemple avancé

Pour une approche plus personnalisable, vous pouvez utiliser la correspondance de modèles et les arguments d'ensemble de règles :

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

Utilisation

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

En utilisant Ces techniques, vous pouvez thématiser dynamiquement moins de variables globales basées sur des classes CSS, vous permettant de basculer facilement entre différents thèmes visuels au moment de l'exécution.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!