Wie kann ich globale Variablen mithilfe von CSS-Klassen dynamisch thematisieren?

Thematisierung globaler weniger Variablen

Im Rahmen der Entwicklung einer App kann es sein, dass Sie den Kunden schnell verschiedene visuelle Themen präsentieren müssen. Während das Definieren separater Erscheinungsklassen für den Text zum Ändern der Seitenvisualisierungen ein Ansatz ist, möchten Sie globale weniger Variablen thematisieren.

Less-Variablendefinition

Less ermöglicht Ihnen dies Definieren Sie globale Variablen wie folgt:

@variable-name: value;

Variablen thematisieren

Um Variablen abhängig von einer CSS-Klasse für das Erscheinungsbild zu thematisieren, können Sie das @mixin von Less verwenden, um ein Mixin zu definieren Nimmt eine Variable und definiert sie basierend auf der Erscheinungsklasse neu. Hier ist ein einfaches Beispiel:

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

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

Verwendung

Sie können dieses Mixin wie folgt verwenden:

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

Erweitertes Beispiel

Für einen anpassbareren Ansatz können Sie Mustervergleich und Regelsatzargumente verwenden:

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

Verwendung

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

Durch Verwendung Mit diesen Techniken können Sie globale Variablen basierend auf CSS-Klassen dynamisch thematisieren, sodass Sie zur Laufzeit problemlos zwischen verschiedenen visuellen Themen wechseln können.

Das obige ist der detaillierte Inhalt vonWie kann ich globale Variablen mithilfe von CSS-Klassen dynamisch thematisieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!