LESS CSS - 根据主体类更改主题颜色的变量值 [英] LESS CSS - Change variable value for theme colors depending on body class
问题描述
假设我有多个颜色的主题，我的网站，由一个类控制在身体标签。从这里我可以重新定义每个主题中每个元素的各种颜色。足够容易，但相当耗时，如果我有很多要素改变...和很多主题。每次我添加一个新的主题，我需要再次写出所有的选择器，用不同的颜色值。
我基于我的工作到目前为止另一个职位我发现：
LESS.css变量，取决于类
...然而，对于我想要做的事来说，似乎仍然过于复杂，因为我仍然必须写出所有的选择器，并在使用颜色变量。
我已经创建了 CODEPEN这里
如果有人有时间去看一看，并建议我如何处理这个问题，或者如何简化这个过程，我将非常感激。
非常感谢任何有帮助的人：）
假设你仍然想要主题一个样式表（而不是多个表作为cimmanon注释中注释），并假设您使用LESS 1.3.2+，然后下面的代码工作，以减少重复的数量，通过设置一个循环，需要主题变化的类。
请注意，这不适用于Codepen（它抛出一个错误未捕获的抛出＃，也许是因为他们运行早期版本的LESS），但您可以将代码放入 LESS的编译器，以正确编译。
LESS（根据您的Codepen代码添加了演示的主题）
//////////////////////////////////////////////// //////
// CONSTANTS
@lightColour：#fff;
@darkColour：＃000;
@lightBg：#fff;
@darkBg：＃000;
@numberOfThemes：3; //控制主题循环
/////////////////////////////////////// /////////////////
// MIXINS
//主题由参数mixin数字（1），（2）等定义。
.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;
}
////////////////////////////////////// /////////////////
//一般情况
* {padding：0; margin：0;}
html { text-align：center;}
h2 {padding：20px 0;}
.box {
.curvy;
color：@lightColour;
background：@darkBg;
display：inline-block;宽度：10％; padding：20px 5％; margin：0 1％20px 1％;
}
////////////////////////////////////// /////////////////
//主题BUILDING
.buildThemes（@index）when（@index< @numberOfThemes + 1） {
.theme - @ {index} {
.themeDefs（@index）;
color：@lightColour;
background：@darkBg;
.box {
color：@darkColour;
background：@lightBg;
}
}
.buildThemes（@index + 1）;
}
//停止循环
.buildThemes（@index）{}
//开始主题构建循环
.buildThemes（1）;
CSS输出（为了简洁仅显示循环主题css） p>
.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;
}
Getting to grips with LESS here but one thing is still a little unclear.
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.
I am basing my working so far on another post I found: LESS.css variable depending on class
... 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.
I have created a 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 :)
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.
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 (based off your Codepen code with an added theme for demo)
//////////////////////////////////////////////////////
// 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 Output (only showing the looped theme css for brevity)
.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屋！
