传递多个属性名称、值并使用一个 mixin 设置它们。可能吗？

Question

这是一个规则集，其中包含我的混入 .greyMixin() 和 .disabled()。问题是我无法找到一种方法来在一个 mixin 中编写多个属性。可以看到 color 和 background 分开的结果。我希望它们在一个声明中。

.formater(@className; @rules){
    .@{className}{
        @rules();
    }
}
.greyMixin(@property, @g, @a:1){
    @rgba: rgba(@g,@g,@g,@a);
    .mixin();
    .mixin() when((@a) < 1) and (@a > 0){
        @{property}:@rgba;
        }& when ((@a) = 1){
            @{property}:@rgba;
        }& when ((@a) = 0){
            @{property}:@rgba;
        }   
}
.disabled(@property, @g, @a:1){
    @rgba: rgba(@g,@g,@g,@a);
    @rgb:rgb(@g,@g,@g);
        .mixin();
        .mixin() when((@a) < 1) and (@a > 0){
        &:disabled,&.disabled {
            &:hover,&:focus,&:active{
                @{property}:@rgba;
            }
        }& when ((@a) = 1){
            &:disabled,&.disabled { 
                &:hover,&:focus,&:active{
                    @{property}:@rgb;
                }
            }
            }& when ((@a) = 0){
                &:disabled,&.disabled { 
                    &:hover,&:focus,&:active{
                        @{property}:@rgba;
                    }
                }
                }
        }
}
.formater(colourclass;{
    .greyMixin(color,25,1);
    .greyMixin(background,110,0.8);
    .disabled(color,240,0.8);
    .disabled(background, 10,0.4)});

结果是：

.colourclass {
    color: #191919;
    background: rgba(110, 110, 110, 0.8);
}
.colourclass:disabled:hover,
.colourclass.disabled:hover,
.colourclass:disabled:focus,
.colourclass.disabled:focus,
.colourclass:disabled:active,
.colourclass.disabled:active {
    color: rgba(240, 240, 240, 0.8);
}
.colourclass:disabled:hover,
.colourclass.disabled:hover,
.colourclass:disabled:focus,
.colourclass.disabled:focus,
.colourclass:disabled:active,
.colourclass.disabled:active {
    background: rgba(10, 10, 10, 0.4);
}

我正在使用 less.js 2.5.3； Windows7； Winless 编译器 1.9.1。

Answer 1

对于这种情况，您可以像下面的代码片段一样使用循环和数组列表。正如您所注意到的，输入参数都是数组，而不是只有一个值。在 mixin 中，我们可以使用 extract 函数提取属性，它的颜色值和基于索引的 alpha，然后使用循环创建属性。

注意：我不明白为什么你需要那些带有 .mixin() 的守卫，因为所有情况似乎都设置相同的属性和输出.所以，我在下面的代码片段中删除了它。

我只对一个 mixin (.greyMixin) 进行了更改，但您也可以对另一个 mixin 进行相同的更改。

.formater(@className; @rules){
    .@{className}{
        @rules();
    }
}
.greyMixin(@properties; @g; @a:1){
  @propCount: length(@properties);
  .loop-properties(@index) when (@index > 0){
    @property: extract(@properties, @index);
    @col: extract(@g, @index);
    @alpha: extract(@a, @index);
    @rgba: rgba(@col,@col,@col,@alpha);
    @{property}:@rgba;
    .loop-properties(@index - 1);
  }
  .loop-properties(@propCount);
}
.formater(colourclass;{
    .greyMixin(color, background;25, 110;1, 0.8);
});

Answer 2

早些时候我在输出中遇到了一个问题背景：rgba(#646464,#646464,#646464,0.8); 所以我删除了@col: rgba(@{col},@{col},@{col},@{alpha});

.colourMixin(@properties; @var){
    @pcount:length(@properties);
    .recurP(@index) when (@index > 0){
        @property: extract(@properties, @index);
        @colour: extract(@var, @index);
        @{property}:@colour;
        .recurP(@index - 1);
    }
        .recurP(@pcount);
}

现在取一个变量。

传递多个属性名称、值并使用一个 mixin 设置它们。可能吗？

Pass multiple property names, values and set them using one mixin. Is it possible?

css

less

less-mixins

传递多个 属性 名称、值并使用一个 mixin 设置它们。可能吗？

Pass multiple property names, values and set them using one mixin. Is it possible?

css

less

less-mixins

传递多个属性名称、值并使用一个 mixin 设置它们。可能吗？