用更少的资源管理多个部分

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

在 LESS 中，您可以使用更通用的代码来获得它，如下所示：

@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”等。