Tutorial by Examples

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 followin...

There are some cases in mixins where there can be single or multiple arguments while using it. Let's take a case of border-radius where there can be single argument like border-radius:4px; or multiple arguments like border-radius:4px 3px 2px 1px;. Traditional with Keyword Arguments mixing will be l...

SASS gives you the ability to omit any parameter except the ones you want to overwrite of course. Let's take again the default-box example: @mixin default-box ($color: red, $borderColor: blue) { color: $color; border: 1px solid $borderColor; clear: both; display: block; mar...

SASS's optional arguments let you use a parameter only if you specify its value; otherwise, it will be ignored. Let's take an example of the following mixin: @mixin galerie-thumbnail ($img-height:14em, $img-width: null) { width: $img-width; height: $img-height; outline: 1px solid li...

Mixins can be passed a block of SASS compliant code, which then becomes available within the mixin as the @content directive. @mixin small-screen { @media screen and (min-width: 800px;) { @content; } } @include small-screen { .container { width: 600px; } } And this wou...