Sass gives features and mixins that settle for parameters. You should use Sass default parameters, that’s, parameters which have a price even for those who don’t present them when the perform or mixin is named.
Let’s concentrate on mixins right here. Right here’s the syntax of a mixin:
@mixin foo($a, $b, $c) {
// I can use $a, $b, and $c in right here, however there’s a threat they’re null
}
.el {
@embody foo(1, 2, 3);
// if I attempted to do `@embody foo;`
// … which is legitimate syntax…
// I might get `Error: Lacking argument $a.` from Sass
}
It’s safer and extra helpful to arrange default parameters on this Sass mixin:
@mixin foo($a: 1, $b: 2, $c: 3) {
}
.el {
// Now that is advantageous
@embody foo;
// AND I can ship in params as effectively
@embody foo(“three”, “little”, “pigs”);
}
However what if I needed to ship in $b and $c, however depart $a because the Sass default parameter? The trick is that you just ship in named parameters:
@mixin foo($a: 1, $b: 2, $c: 3) {
}
.el {
// Solely sending within the second two params, $a would be the default.
@embody foo($b: 2, $c: 3);
}
An actual-life instance utilizing Sass default parameters
Right here’s a quick-y mixin that outputs what you want for very fundamental styled scrollbars (Kitty has one as effectively):
@mixin scrollbars(
$dimension: 10px,
$foreground-color: #eee,
$background-color: #333
) {
// For Google Chrome
&::-webkit-scrollbar {
width: $dimension;
top: $dimension;
}
&::-webkit-scrollbar-thumb {
background: $foreground-color;
}
&::-webkit-scrollbar-track {
background: $background-color;
}
// Customary model (Firefox just for now)
scrollbar-color: $foreground-color $background-color;
}
Now I can name it like this:
.scrollable {
@embody scrollbars;
}
.thick-but-otherwise-default-scrollable {
// I can skip $b and $c as a result of they’re second and third
@embody scrollbars(30px);
}
.custom-colors-scrollable {
// I can skip the primary param if all of the others are named.
@embody scrollbars($foreground-color: orange, $background-color: black);
}
.totally-custom-scrollable {
@embody scrollbars(20px, purple, black);
}
I’m simply noting this as I had to go looking a bit to determine this out. I used to be making an attempt stuff like sending empty strings or null as the primary parameter in an effort to “skip” it, however that doesn’t work. Gotta do the named parameter strategy.
A Sensible Tip For Utilizing Sass Default Parameters initially printed on CSS-Methods. It is best to get the e-newsletter and grow to be a supporter.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!