A Practical Tip For Using Sass Default Parameters

Sass provides functions and mixins that accept parameters. You can use the Sass default parameter, i.e. the parameter has a value even if it is not provided when calling a function or mixin.

Let's focus on mixin. This is the syntax of mixin:

 <code>@mixin foo($a, $b, $c) { // 我可以在此处使用$a、$b 和$c，但存在它们为空的风险} .el { @include foo(1, 2, 3); // 如果我尝试执行`@include foo;` // ... 这也是有效的语法... // 我会从Sass 获取`Error: Missing argument $a.` 错误}</code>

Setting default parameters in Sass mix is ​​safer and more useful:

 <code>@mixin foo($a: 1, $b: 2, $c: 3) { } .el { // 现在这样就可以了@include foo; // 我也可以传入参数@include foo("three", "little", "pigs"); }</code>

But what if I want to pass in $b and $c but leave $a as the Sass default parameters? The trick is to pass in named parameters:

 <code>@mixin foo($a: 1, $b: 2, $c: 3) { } .el { // 只传入第二个和第三个参数，$a 将为默认值。 @include foo($b: 2, $c: 3); }</code>

Actual example using Sass default parameters

Here is a quick mixin that outputs what you need for a very basic styling scrollbar (Kitty also has one):

 <code>@mixin scrollbars( $size: 10px, $foreground-color: #eee, $background-color: #333 ) { // 适用于Google Chrome &::-webkit-scrollbar { width: $size; height: $size; } &::-webkit-scrollbar-thumb { background: $foreground-color; } &::-webkit-scrollbar-track { background: $background-color; } // 标准版本（目前仅适用于Firefox） scrollbar-color: $foreground-color $background-color; }</code>

Now I can call it like this:

 <code>.scrollable { @include scrollbars; } .thick-but-otherwise-default-scrollable { // 我可以跳过$b 和$c，因为它们是第二个和第三个参数@include scrollbars(30px); } .custom-colors-scrollable { // 如果所有其他参数都是命名的，我可以跳过第一个参数。 @include scrollbars($foreground-color: orange, $background-color: black); } .totally-custom-scrollable { @include scrollbars(20px, red, black); }</code>

I just noticed this because I had to search around to figure it out. I've tried to "skip" it with an empty string or null as the first argument, but this doesn't work. The named parameter method must be used.

The above is the detailed content of A Practical Tip For Using Sass Default Parameters. For more information, please follow other related articles on the PHP Chinese website!