sass Mixins Create and use a mixin


To create a mixin use the @mixin directive.

@mixin default-box ($color, $borderColor) {
    color: $color;
    border: 1px solid $borderColor;
    clear: both;
    display: block;
    margin: 5px 0;
    padding: 5px 10px;

You can specify a list of arguments inside a parenthesis following the mixin's name. Remember to start your variables with $ and separate them with commas.

To use the mixin in another selector, use the @include directive.

footer, header{ @include default-box (#ddd, #ccc); }

The styles from the mixin will now be used in the footer and header, with the value #ccc for the $color variable and #ddd for the $borderColor variable.