creating mixins with arguments in LESS

Question

I'd like to create a mixin so hat I don't have to type always the same code. I want the mixin to take arguments. This is the piece I have to write again and again (the .serial and .circle part):

.bg-primary { // LIGHTBLUE
    background-color: @fashionLightBlue;
    color: @fashionDarkBlue;
    .serial {
        color: @fashionPink;
    }
    .circle {
        background-color: @fashionWhite;
    }
}

I want to create something like this:

.CircleInfoBox (@color1, @background-color) {
    .serial {@color1};
    .circle {@background-color};
}

Is this possible somehow?

Answer 1

Yes, it is possible to send parameters/arguments to a mixin and use it to generate the rules. In official terms, such mixins are called as parameteric mixins.

Note that parameteric mixins would not produce any output unless they are invoked from within any specific selector block. That is, without the below line, the mixin's code will never appear in the output CSS. Parameters to the function should always be passed within circular/round braces (()).

.CircleInfoBox(#FFF, #000);

Less:

.bg-primary { // LIGHTBLUE
    background-color: @fashionLightBlue;
    color: @fashionDarkBlue;
    .CircleInfoBox(#FFF, #000); // mixin call
}

.CircleInfoBox (@color1, @background-color) { // the mixin
    .serial {
        color: @color1;
    }
    .circle {
        background-color: @background-color;
    }
}

Extra: Curly braces (@{color1}) is used only to form the value of a selector dynamically (through selector interpolation) or when you want to use the variable value within a String. For example, if you want to use a loop then the below code would form the selector dynamically.

@count: 1;
.serial-@{count}{
    color: @color1;
}

would result in

.serial-1{
    color: #ffffff;
}