1

这是一个规则集，其中我有我的 mixins，.greyMixin()并且 .disabled(). 问题是我无法找到在一个 mixin 中编写多个属性的方法。可以看到结果 wherecolor和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。

4

2 回答 2

3

对于这种情况，您可以像下面的代码片段一样使用循环和数组列表。如您所见，输入参数都是数组，而不是只有一个值。在 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);
});
于 2015-11-13T07:11:38.837 回答
0

早些时候我遇到了一个问题，在输出中我得到了背景：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);
}

现在它正在接受一个变量。

于 2015-11-13T12:56:16.930 回答