Getting Started with Less

Mixins with Parameters

Mixin Parameters

We've already learned about variable scope and those rules still apply to Mixins no differently.

You can also pass variables to mixins to give yourself even more control! These are called "parametric mixins".

That's just a very complex way of saying mixins with parameters.

Let's do a demo for vendor browser prefixes:

// Mixin
.border-radius(@radius) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}

// How to use
.my-button {
    display: inline-block;
    background: pink;
    text-transform: uppercase;
    text-decoration: none;
    padding: 25px;

    .border-radius(5px);
}




/*==============================
=            OUTPUT            =
==============================*/
.my-button {
    display: inline-block;
    background: pink;
    text-transform: uppercase;
    text-decoration: none;
    padding: 25px;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

However this is not really necessary anymore. Your "compile" process should be setup to auto-prefix making stuff like this obsolete.

Also note these are mixins are "private" or not outputted by default.

A More Practical Use Case

Since auto-prefixing is already enabled, let's do a more practical use case:

.cool-button(@background, @color: red) {
    display: inline-block;
    padding: 25px 60px;
    border-radius: 5px;

    font-size: 14px;
    text-transform: uppercase;
    font-weight: 700;
    text-decoration: none;

    transition: all 225ms ease;

    background: @background;
    color: @color;

    &:hover, &:focus {
        background: lighten(@background, 15%); // We'll cover this in the next lesson. Just to tease this out
    }
}


.read-more {
    .cool-button(#ff6f00, #fff);
    .cool-button(#000); // Default red is used as color
}