如何淡化

由于我正处于开发应用程序的预生产周期,因此我经常改变视觉方式,以便与客户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类?

这一切都取决于主题之间有多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(); } } }