Ein praktischer Tipp für die Verwendung von SASS -Standardparametern

SASS bietet Funktionen und Mischungen, die Parameter akzeptieren. Sie können den SASS -Standardparameter verwenden, d. H. Der Parameter hat einen Wert, selbst wenn er beim Aufrufen einer Funktion oder beim Mischen nicht bereitgestellt wird.

Konzentrieren wir uns auf Mixin. Dies ist die Syntax von Mixin:

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

Das Einstellen von Standardparametern im SASS -Mix ist sicherer und nützlicher:

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

Aber was ist, wenn ich $ B und $ C übergeben möchte, aber $ A als SASS -Standardparameter hinterlassen möchte? Der Trick besteht darin, benannte Parameter weiterzugeben:

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

Tatsächliches Beispiel Verwenden SASS -Standardparameter

Hier ist ein kurzes Mixin, das das ausgibt, was Sie für eine sehr einfache Styling -Scrollbar benötigen (Kitty hat auch eine):

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

Jetzt kann ich es so nennen:

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

Ich habe das gerade bemerkt, weil ich suchen musste, um es herauszufinden. Ich habe versucht, es mit einer leeren Zeichenfolge oder Null als erstes Argument zu "überspringen", aber das funktioniert nicht. Die benannte Parametermethode muss verwendet werden.

Das obige ist der detaillierte Inhalt vonEin praktischer Tipp für die Verwendung von SASS -Standardparametern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!