LESS CSS – 根据body类更改主题颜色的变量值

在这里掌握LESS但有一点仍然有点不清楚.

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

到目前为止,我的工作基于我发现的另一篇文章：
LESS.css variable depending on class

…然而,对于我想做的事情,它似乎仍然过于复杂,我仍然要写出所有的选择器并包含mixin,然后使用颜色变量放入相同的CSS.

我创建了一个CODEPEN HERE

我很感激,如果有人有时间稍微看一下并告诉我如何以不同的方式处理这个问题,或者我如何简化这个过程.

非常感谢帮助过的人:)

解决方法

假设您仍希望在一个样式表中对其进行主题化(而不是在评论中注明cimmanon的多个表格),并假设您使用的是LESS 1.3.2,则以下代码通过设置a来减少重复量循环遍历需要更改主题的类.

请注意,这不适用于Codepen(它会抛出一个错误未被捕获的#,可能是因为它们运行的是LESS的早期版本),但您可以通过将代码放入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 – 根据body类更改主题颜色的变量值

解决方法

猜你在找的CSS相关文章