Creating mixins with default parameters is very easy in SASS using maps. Let's say we have a mixin called button size that takes a configuration map called $in
:
@mixin button-size($in) {}
And let's say we have a defaults configuration map called defaults
inside the mixin that sets the defaults:
@mixin button-size($in) {
$defaults: (
pad-v: 10px,
pad-h: 40px,
fs: 16px,
lh: 17px
);
}
now, we just have to merge $in
with $defaults
to enable the consumer to override the defaults:
@mixin button-size($in) {
$defaults: (
pad-v: 10px,
pad-h: 40px,
fs: 16px,
lh: 17px
);
$opts: map-merge($defaults, $in); // <- Merge
}
That's it! Now the consumer can provide their own configuration map only for the properties that they want to override.
TIP
If you want to make the input configuration optional, set the $in
to an empty map:
@mixin button-size($in: ()) {}
Now, your consumer can use your mixin, even if they don't provide a configuration map!