0

I can't understand some syntax usage. I have a simple mixin with default params:

 @red: #ff4136;
 @blue: #00aef9;
 @green: #01ff70;
 @yellow: #ffdc00;

.paint(@color: @yellow, @height:100px, @width:200px) {
background-color: @color;
height: @height;
width: @width;
}

    .monster-happy {
        .paint(@color, 100px, 10px);
    }

I want to change only first and last default param and I dont want to change the middle param, something like:

.monster-happy {
    .paint(@red, @height, 10px);
}

But it doesn't work. How should I make it correct and what better way to do this?

Paolo Forgia
  • 6,572
  • 8
  • 46
  • 58
prostyash
  • 117
  • 1
  • 13

1 Answers1

1

I believe that you can ignore the value you want to use the default for, and then explicitly define any parameters further down the the arguments.

.monster-happy {
    .paint(@red, @width: 10px);
}

This is because your mixin will check the values that are passed in, in order that you pass them. It always expects color first, which is why we can just use @red, but due to leaving out the height, we have to explicitly state that the next value is for the @width property.

Sam Willis
  • 4,001
  • 7
  • 40
  • 59
  • thanks, but when I am trying to compile that with grunt I got an error: SyntaxError: wrong number of arguments for .monster-happy (2 for 3) – prostyash Sep 06 '17 at 10:24
  • Sorry, I'm not sure why that is happening, it should work like that as far as I can tell. – Sam Willis Sep 06 '17 at 11:12