Как разместить информацию в lesscss

Question

Поскольку я занимаюсь подготовкой к разработке приложения, я часто меняю визуальность, чтобы сходиться к тому, что будет проверено клиентом.

Некоторые изображения одной и той же страницы (назовите ее темы) были бы интересными, чтобы я мог быстро представить их клиенту.

Способ, которым я нашел, - создать класс внешнего вида, который я надел на тело, и, изменив его, я мог бы соответствующим образом изменить страницу.

Это говорит, я заинтересован в thematizing глобальной менее изменчивы, например следующим образом:

// 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 внешнего вида?

Answer 1

Все зависит от того, сколько стилей и переменных различаются между темами, например (очень) базовая точка смотрящая может быть что-то вроде:

@themes: 
    blue rgb(41, 128, 185), 
    marine rgb(22, 160, 133), 
    green rgb(39, 174, 96), 
    orange rgb(211, 84, 0), 
    red rgb(192, 57, 43), 
    purple rgb(142, 68, 173); 

// usage: 

#navBar { 
    .themed(background-color); 
} 

// implementation: 

@import "for" ; 

.themed(@property) { 
    .for(@themes); .-each(@theme) { 
     @name: extract(@theme, 1); 
     @color: extract(@theme, 2); 

     .theme-@{name} & { 
      @{property}: @color; 
     } 
    } 
} 

Тогда с вещами, как Pattern Matching, Ruleset Arguments и т.д. и т.п. вы можете добраться до автоматического создания какой-либо сложной иерархии внешнего вида/тематизации ...

например почти такой же простой пример, но с более настраиваемым подходом:

// 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(); 
     } 
    } 
}