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

Question

Here is a ruleset in which I have my mixins, .greyMixin() and .disabled(). The problem is that I am unable to find a way to write multiple properties in one mixin. As one can see the result where color and background are separated. I want them in one declaration.

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

and the result is:

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

I am using less.js 2.5.3; Windows 7; Winless compiler 1.9.1.

Answer 1

For this case, you can use looping and array list like in the below snippet. As you can notice, the input parameters are all arrays instead of having just a single value. Within the mixin, we can use extract function to extract the property, its color value and alpha based on the index and then use the loops to create the properties.

Note: I didn't understand why you need those guards with the .mixin() because all cases seem to be setting the same property and output. So, I have removed it in the below snippet.

I have done the changes only for one mixin (.greyMixin) but you can do the same for the other mixin also.

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