如何使用 CSS 類動態主題化全域較少變數？

主題化全域較少變數

在開發應用程式的背景下，您可能會遇到需要快速向客戶呈現不同的視覺主題。雖然為正文定義單獨的外觀類別來更改頁面視覺效果是一種方法，但您希望將全域 less 變數主題化。

Less 變量定義

Less 允許您定義全局變量如下：

@variable-name: value;

主題化變量

要根據外觀CSS類別對變數進行主題化，您可以使用Less的@mixin來定義一個mixin，接受一個變數並根據外觀類別重新定義它。這是一個基本範例：

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

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

用法

您可以如下使用此mixin：

<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中文網其他相關文章！