Example
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 lightgray;
outline-offset: 5px;
}
So a call to
.default {
@include galerie-thumbnail;
}
.with-width {
@include galerie-thumbnail($img-width: 12em);
}
.without-height {
@include galerie-thumbnail($img-height: null);
}
will simply output the following in the CSS file:
.default {
height: 14em;
outline: 1px solid lightgray;
outline-offset: 5px;
}
.with-width {
width: 12em;
height: 14em;
outline: 1px solid lightgray;
outline-offset: 5px;
}
.without-height {
outline: 1px solid lightgray;
outline-offset: 5px;
}
SASS doesn't output properties with null as their value, which is very helpful when we need to include an optional argument in our call or not.
