用更少的钱来管理多个部分 [英] Managing multiple sections with less

问题描述

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

I am working on a project with multiple sections. Depending on the section, elements in that section have varying colors. Through my LESS files I am defining all these possibilities like so:

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%);          
    }
}   

这似乎不是最简化的处理方式.使用这种方法，我必须重复很多部分的列表.因此，每个由其部分更改的元素都需要此部分定义的列表.有时它的颜色，背景色，边框色等...

It seems like this is not the most streamlined way of doing things. Using this method I have to repeat this list of sections quite a bit. So every element that is altered by its section requires this list of sections defined. Sometimes its color, background-color, border-color etc...

有更好的方法吗?

推荐答案

在LESS中，您可以使用以下更通用的代码来获取它:

In LESS you can get it with more generic code like this:

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

或者，如果您不需要这些变量，甚至更好:

Or, if you don't need those variables for anything else, even better:

@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中可用，对于早期版本，您可以像第一个示例中一样使用预定义的计数变量.

It looks quite verbose but I suppose a level of customization worths this. Note that length function is available only in LESS 1.5.x, for earlier versions you can use a predefined count variable as in the first example.

还有另一种方法(如果您喜欢复制粘贴"样式):

And yet another approach (if you prefer "copy-paste" style):

@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);
}

P.S.

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

So every element that is altered by its section requires this list of sections defined. Sometimes its color, background-color, border-color etc...

也可以为属性添加更多的自定义点"-但这取决于这些部分和CSS属性之间如何精确地相互关联...(因此，我并没有在上面的示例中添加它，以便使事情变得更加复杂). 基本上，键是列表/循环"，混合/抽象"等.

It is also possible to add more "customization points" for properties as well - but it depends on how exactly those sections and CSS properties tie to each other... (So I did not put that into examples above to not make things even more complicated to understand). Basically the key is "list/loops", "mixins/abstraction" etc.

这篇关于用更少的钱来管理多个部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！