Parametric mixins with default values

Want to same time when writing a style sheet?

Parametric mixins offer a great way to do this. Especially if you know how to create parametric mixins with default values.

Parametric mixins with default values

In the previous tutorial about Parametric mixins we learned that you can reuse rule sets with mixins. And that these mixins retain flexibility when they contain parameters instead of constant values.

In this tutorial you will see that parameters in mixins can also have a default value. When you use the mixin and do not insert a specific value the mixin will fall back on the default value.

Below you can see a Bootstrap 3 example:

The mixin .content-columns has 2 parameters: @column-count and @column-gap. Both parameters can be replaced by values when we use the mixin. But for the parameter @column-gap we do not have to specify a value later on. If we do not set a value the default value “30px” will be used.

Mixin with several default values

Our previous example had only one default value. But there are CSS properties that require more than one value.

To set a box shadow for instance we need to at least set the values for:

  1. the position of the horizontal shadow
  2. the position of the vertical shadow

And we can optionally set other values (e.g. color of the shadow).

In the example below we have set default values for the position of the horizontal shadow, the position of the vertical shadow, the blur distance and the color:

As you can see in this instance we have used 2 parameters:

  1. the first parameter @style holds 3 default values;
  2. the second parameter @color holds one default value.

If we apply this to 2 div’s as in the example below:

the CSS result we would get is this:

you can see that div-A gets a CSS box shadow with the values we set specifically for this div. These values override all of the default values for this mixin.

For div-B we only set values for the parameter @style. Because we did not set a value for the default color “#000000” is used for div-B.

There are a few things I want to point out here:

  • If a parameter in a mixin contains several values you need to set a value for each of them if you want to correctly override the default values. If we only specified:
    we would get an incomplete specification of the box shadow for div B:
    You see that div B now only has values for the horizontal/vertical shadow position and for the color, but not for the blur.
  • If we want to override the default value for a parameter further down the string of arguments we must call it by name:
    this will result in:

Which leads to the conclusion that if you want to have maximum flexibility you need to create parameters for each value you want to be able to set later on. An example of how this is done in Bootstrap 3 is:

This gradient mixin is used to set the gradient for a dropdown menu:

What we see here is that the start-color and the end-color values are specifically set for the dropdown menu (with variables and operators). But the values for the stops are not specified. So for these stops the default percentage values will be used.

Parametric mixin with @arguments

When we have a mixin with several parameters we can also use a special variable @arguments. The variable @arguments will represent a whole string of the default values.

Below you can see how this works for a box shadow mixin:

When we use this mixin with a div:

The CSS result will be:

So instead of having to repeat each parameter we can simply use @arguments. And we still retain our flexibility.If we want to reuse all the default values except for the blur we only need to specify:

The CSS result for this would be:

As you can see with hardly any coding at all we can give the div a box shadwo with all the default values but for the blur (with has changed from a default 1px to a 2px blur distance).

Add your comment