mixins.html.md.eco

---
layout: "post"
title: "Mixins"
date: 2014-07-21
description: "How to use mixins: with and without parameters; with defaults; with an unknown number of mixin arguments"
---



## Mixin basics

Here is how to include a simple mixin, as you can see, the syntax is rather similar between the preprocessors.

<%- @code('Mixins', 'basic') %>


## Mixin parameters and parameter defaults

Mixins can receive one or multiple parameters.

You can even set defaults for each of the parameters. When a parameter has a default value, you don't need to set one when calling the mixin - see how we can omit the `thickness` parameter.

<%- @code('Mixins', 'params') %>



## Named parameters

If, for whatever reason, you want to set the parameters of a mixin in a particular order that is different that the one set in the mixin, you can do that by calling the mixin and explicitly state each of the parameters you're defining.

<%- @code('Mixins', 'params-named') %>



## Unknown number of parameters

If you want to have a mixin with a varying number of parameters, all CSS preprocessors allow you output all arguments like so:

<%- @code('Mixins', 'arguments') %>