LESS and Sass -- advanced LESS

Exploring parameterized mixins

You can pass the parameter to the mixins and set default value for it

// using regular arguments
.border-radius(@radius: 5px) {
    -mox-border-radius: @radius;
    -webkit-border-radius: @radius;
    -ms-border-radius: @radius;
    border-radius: @radius;
}
#mypara {
    .border-radius;
}

You use the parameters by name.

// using named arguments with defaults
.customBorder(@color: black, @width: 1px) {
    border: @width solid @color;
}
#mypara {
    .border-radius;
    .customBorder(blue, 5px);
}

You can use @arguments to use all the paramenters as they list.

// using the @arguments parameter
.box-shadow(@x: 0, @y: 0, @blur:1px, @color: #000) {
    -webkit-box-shadow: @arguments;
    -mox-box-shadow: @arguments;
    -ms-box-shadow: @arguments;
    box-shadow: @arguments;
}

#mypara {
    .border-radius;
    .customBorder(blue, 5px);
    .box-shadow(10px,10px,10px, gray);
    padding: 10px;
}

After compiled:

#mypara{
-mox-border-radius:5px;
-webkit-border-radius:5px;
-ms-border-radius:5px;
border-radius:5px;
border:5px solid #00f;
-webkit-box-shadow:10px 10px 10px #808080;
-mox-box-shadow:10px 10px 10px #808080;
-ms-box-shadow:10px 10px 10px #808080;
box-shadow:10px 10px 10px #808080;
padding:10px
}

Exploring mixins and pattern matching

You can also use parameters to define which mixin you use in your css.

.alert(warning) {
    @color: goldenrod;
    color: @color;
    border-color: darken(@color, 10%);
}
.alert(error) {
    @color: red;
    color: lighten(@color, 10%);
    border-color: darken(@color, 20%);
}
.alert(other, @color) {
    color: lighten(@color, 10%);
    border-color: darken(@color, 20%);
}
.alert(@_) {
    display: block;
    border-width: 2px;
    border-style:solid;
    padding: 10px;
}

@type: error;
#mypara {
    .alert(@type);
}

@_ means always match the contents of .alert mixin, regardless of what the parameter is. But it only matchs one parameter mixin. So it means if you use .alert(other, green), the border would dissapper. and you need to add the code for it like:

.alert(@_, @_) {
    display: block;
    border-width: 2px;
    border-style:solid;
    padding: 10px;
}