LESS CSS - 根据主体类更改主题颜色的变量值 [英] LESS CSS - Change variable value for theme colors depending on body class

问题描述

在这里开始掌握 LESS，但有一件事仍然有点不清楚.

Getting to grips with LESS here but one thing is still a little unclear.

假设我的网站有多个颜色主题，由 body 标签上的一个类控制.由此我可以为每个主题中的每个元素重新定义各种颜色.如果我有很多元素要更改……以及很多主题，这很容易但相当耗时.每次添加新主题时，我都需要重新写出所有选择器，并使用不同的颜色值.

Lets say I have multiple color themes for my website, controlled by a class on the body tag. From this I can redefine the various colors for each element within each theme. Easy enough but fairly time consuming if I have a lot of elements to change... and a lot of themes. Every time I add a new theme I need to write out all the selectors again, with different color values.

我目前的工作基于我发现的另一篇文章:LESS.css 变量取决于类

I am basing my working so far on another post I found: LESS.css variable depending on class

... 然而，对于我想要做的事情来说，这似乎仍然过于复杂，因为我仍然必须写出所有选择器并在放入具有颜色变量的相同 CSS 之前包含 mixin.

... However it still seems overly complicated for what I want to do in that I still have to write out all the selectors and include the mixin before dropping in the same CSS with the color variable.

我创建了一个CODEPEN HERE

如果有人有时间看一看并建议我如何以不同的方式处理此问题或如何简化此过程，我将不胜感激.

I'd appreciate it if anyone had time to take a little look and advise me how I could approach this differently or how I could streamline this process.

非常感谢任何提供帮助的人:)

Many thanks to anyone who helps out :)

推荐答案

假设您仍然希望在一个样式表(而不是评论中提到的 cimmanon 中指出的多个表)中将其主题化，并假设您使用的是 LESS 1.3.2+，然后下面的代码通过在需要主题更改的类中设置循环来减少重复量.

Assuming you remain with wanting to theme it within one style sheet (and not multiple sheets as cimmanon noted in the comments), and assuming you are using LESS 1.3.2+, then the following code works to reduce the amount of duplication by setting up a loop through the classes that need theme changes.

请注意，这在 Codepen 上不起作用(它抛出错误 uncaught throw #，可能是因为它们运行的​​是 LESS 的早期版本)，但是您可以通过将将代码写入LESS 的编译器.

Note that this does not work on Codepen (it is throwing an error uncaught throw #, perhaps because they are running an earlier version of LESS), but you can see it compiling correctly by putting the code into LESS's compiler.

LESS(基于您的 Codepen 代码并添加了演示主题)

//////////////////////////////////////////////////////
// CONSTANTS

@lightColour: #fff;
@darkColour: #000;
@lightBg: #fff;
@darkBg: #000;
@numberOfThemes: 3; //controls theme loop

//////////////////////////////////////////////////////
// MIXINS

//Theme Definitions by parametric mixin numbers (1), (2), etc.
.themeDefs(1) {
  @lightColour: #f00;
  @darkColour: #fff;
  @lightBg: #f00;
  @darkBg: #fff;
}

.themeDefs(2) {
  //inverse of 1
  @lightColour: #fff;
  @darkColour: #f00;
  @lightBg: #fff;
  @darkBg: #f00;
}

.themeDefs(3) {
  @lightColour: #cfc;
  @darkColour: #363;
  @lightBg: #cfc;
  @darkBg: #363;
}


.curvy {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

//////////////////////////////////////////////////////
// GENERAL STYLING

* {padding: 0;margin: 0;}
html {text-align: center;}
h2 {padding: 20px 0;}

.box {
  .curvy;
  color: @lightColour;
  background: @darkBg;
  display:inline-block; width:10%; padding:20px 5%; margin:0 1% 20px 1%;
}

//////////////////////////////////////////////////////
// THEME BUILDING

.buildThemes(@index) when (@index < @numberOfThemes + 1) {

  .theme-@{index} {
      .themeDefs(@index); 
      color: @lightColour;
      background: @darkBg; 

      .box {
        color: @darkColour;
        background: @lightBg;
      }
    }
    .buildThemes(@index + 1);
}
//stop loop
.buildThemes(@index) {}
//start theme building loop
.buildThemes(1);

CSS 输出(为了简洁只显示循环主题 css)

.theme-1 {
  color: #ff0000;
  background: #ffffff;
}
.theme-1 .box {
  color: #ffffff;
  background: #ff0000;
}
.theme-2 {
  color: #ffffff;
  background: #ff0000;
}
.theme-2 .box {
  color: #ff0000;
  background: #ffffff;
}
.theme-3 {
  color: #ccffcc;
  background: #336633;
}
.theme-3 .box {
  color: #336633;
  background: #ccffcc;
}

这篇关于LESS CSS - 根据主体类更改主题颜色的变量值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！