用更少的管理多个部分

Question

我正在处理一个包含多个部分的项目。根据部分，该部分中的元素具有不同的颜色。通过我的LESS文件，我定义了所有这些可能性，如下所示：

a{ 
    .section_what &{ 
     color: darken(@what,10%); 
    } 
    .section_where &{ 
     color: darken(@where,10%);   
    } 
    .section_who &{ 
     color: darken(@who,10%); 
    } 
    .section_post &{ 
     color: darken(@post,10%);   
    } 
    .section_events &{ 
     color: darken(@events,10%);   
    } 
    .section_deals &{ 
     color: darken(@deals,10%);   
    } 
} 

看起来这不是最简单的做事方式。使用这种方法，我不得不重复这一部分的列表。因此，每个由其部分更改的元素都需要定义这个部分的列表。有时它的颜色，背景颜色，边框颜色等...

有没有更好的方法？

Answer 1

在更短的你可以用更通用的代码得到这样的：

@what: #111; 
@where: #222; 
@who: #333; 
@post: #444; 
@events: #555; 
@deals: #666; 

@items: what, 
     where, 
     who, 
     post, 
     events, 
     deals; 

@items-count: 6; 

.sections() { 
    .-(@items-count); 
    .-(@i) when (@i > 0) { 
     .-((@i - 1)); 

     @name: extract(@items, @i); 
     .section_@{name} & { 
      color: darken(@@name, 10%); 
     } 
    } 
} 

a { 
    .sections(); 
} 

b { 
    .sections(); 
} 

或者，如果你不需要为别的那些变量，甚至更好：

@items: what #111, 
     where #222, 
     who #333, 
     post #444, 
     events #555, 
     deals #666; 

.sections() { 
    .-(length(@items)); 
    .-(@i) when (@i > 0) { 
     .-((@i - 1)); 

     @item: extract(@items, @i); 
     @name: extract(@item, 1); 
     .section_@{name} & { 
      color: darken(extract(@item, 2), 10%); 
     } 
    } 
} 

a { 
    .sections(); 
} 

b { 
    .sections(); 
} 

它看起来很冗长，但我认为一个定制水平值得这一点。 请注意，length函数仅在LESS 1.5.x中可用，对于早期版本，可以像第一个示例中那样使用预定义的计数变量。

---

而另一种方法（如果你喜欢 “复制粘贴” 的风格）：

@what: #111; 
@where: #222; 
@who: #333; 
@post: #444; 
@events: #555; 
@deals: #666; 

.item(@name) { 
    .section_@{name} & { 
     color: darken(@@name, 10%); 
    } 
} 

a { 
    .item(what); 
    .item(where); 
    .item(who); 
    .item(post); 
    .item(events); 
    .item(deals); 
} 

附：

因此，每个被它的部分改变的元素都需要定义这个部分的列表。有时它的颜色，背景颜色，边框颜色等......

也可以添加更多的“定制点”的性质，以及 - 但它依赖于这些部分和CSS属性究竟怎么绑彼此......（所以我没有把它放在上面的例子中，以免让事情变得更难以理解）。 基本上关键是“list/loops”，“mixins/abstraction”等。