Mixins

This extension allows you to use basic mixins like those used in Sass. Mixins are groups of properties that can take parameters. They’re like functions for CSS.

Usage

First, you define a mixin:

@mixin name
{
    color:blue;
}

Then you call it within the CSS:

#id
{
    @include name;
}

Which will output:

#id
{
    color:blue;
}

Adding Parameters

Mixins become even more powerful when you add parameters.

@mixin box($bg,$border = #eee)
{
    display:block;
    border:1px solid $border;
    background:$bg;
    padding:20px;
}

#error
{
    @include box(red,#ff0000);
}

Which returns:

#error
{
    display:block;
    border:1px solid #ff0000;
    background:red;
    padding:20px;
}

Settings

This extension has no settings.

Hooks

This extension has no hooks.