用更少的管理多個部分

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」等。