Question

以下是我的mixins .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; Windows 7的; 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进行设置。可能吗？

2 个答案: