CODEWITHSUNDEEP
csslessless-mixins
vssadineni
vssadineni

Reputation: 454

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

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.

Upvotes: 1

Views: 160

Answers (2)

vssadineni
vssadineni

Reputation: 454

earlier I had an issue where in the output I got background: rgba(#646464,#646464,#646464,0.8); so I removed the @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);
}

now it is taking a variable.

Upvotes: 0

Harry
Harry

Reputation: 89760

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

Upvotes: 3

Related Questions