由于我正處于開發應用程序的預生產周期中，因此我經常更改視覺效果，以便收斂到將由客戶驗證的內容。保留同一頁面的某些視覺效果（稱為主題）會很有趣，這樣我就可以快速地向客戶展示它們。我發現的方法是創建一個放在外觀上的外觀類，并通過更改它可以相應地更改頁面本身。這就是說，我對主題化全局較小變量感興趣，例如：// default appearance@navBarHeight: 50px;.appearanceWhite { @navBarHeight: 130px;}.appearanceBlack { @navBarHeight: 70px;}這樣，稍后在.less中，我提出了以下類：#navBar { height: @navBarHeight; // appearance handling .appearanceBlack & { background-color: black; } .appearanceWhite & { background-color: white; }}當然，實際情況如果比較復雜。是否可以根據外觀CSS類定義（或重新定義）較少的變量？
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 關注
- 610 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消