如何淡化

由于我正处于开发应用程序的预生产周期，因此我经常改变视觉方式，以便与客户validation的内容衔接起来。

一些相同页面的视觉效果（称之为主题）将会很有趣，以便我可以快速地向客户展示它们。

我发现的方式是创build一个我穿上身体的外观类，通过改变它，我可以相应地改变页面本身。

这就是说，我感兴趣的是全球变less如下：

// default appearance @navBarHeight: 50px; .appearanceWhite { @navBarHeight: 130px; } .appearanceBlack { @navBarHeight: 70px; } 

这样一来，在后来的那个时候，我拿出如下的课程：

 #navBar { height: @navBarHeight; // appearance handling .appearanceBlack & { background-color: black; } .appearanceWhite & { background-color: white; } } 

当然，实际情况如果更复杂。

是否有可能定义（或重新定义）较less的variables取决于外观的CSS类？

Answer 1

这一切都取决于主题之间有多less种风格和variables的不同，例如（非常）基本的起始点可能是这样的：

  @themes：
    蓝色rgb（41,128,185），
    海洋rgb（22,160,133），
    绿色rgb（39，174，96），
    橙色rgb（211，84，0），
    红色rgb（192，57，43），
    紫色rgb（142，68，173）;

 //用法：

 #navBar {
     .themed（背景色）;
 }

 //执行：

 @import “for” ;

 .themed（@property）{
     。对于（@themes）;  。-each（@theme）{
         @name：extract（@theme，1）;
         @color：extract（@theme，2）;

         .theme  -  @ {name}＆{
             @ {property}：@color;
         }
     }
 }

然后通过模式匹配 ， 规则集参数等等，你可以自动生成任何复杂的外观/主题层次结构。

例如几乎相同的简单例子，但有更多的可定制的方法：

 // usage: #navBar { .themed({ color: @fore-color; background-color: @back-color; }); } // themes: .theme(@name: green) { @fore-color: green; @back-color: spin(@fore-color, 180); .apply(); } .theme(@name: blue) { @fore-color: blue; @back-color: (#fff - @fore-color); .apply(); } .theme(@name: black-and-white) { @fore-color: black; @back-color: white; .apply(); } // etc. // implementation: .themed(@style) { .theme(); .apply() { .theme-@{name} & { @style(); } } }