1 回答
TA贡献1998条经验 获得超6个赞
这完全取决于主题之间有多少种样式和变量,例如(非常)基本的凝视点可能是这样的:
@主题:
蓝色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(background-color);
}
//实现:
@import “为” ;
.themed(@property){
.for(@themes); .-each(@theme){
@name:提取(@theme,1);
@color:提取(@theme,2);
.theme-@ {name}和{
@ {属性}:@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();
}
}
}
- 1 回答
- 0 关注
- 577 浏览
相关问题推荐
添加回答
举报