Un conseil pratique pour utiliser les paramètres par défaut SASS

SASS fournit des fonctions et des mixins qui acceptent les paramètres. Vous pouvez utiliser le paramètre par défaut SASS, c'est-à-dire que le paramètre a une valeur même s'il n'est pas fourni lors de l'appel d'une fonction ou d'un mixin.

Concentrons-nous sur Mixin. Ceci est la syntaxe de Mixin:

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

Le réglage des paramètres par défaut dans Sass Mix est plus sûr et plus utile:

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

Mais que se passe-t-il si je veux passer $ B et $ C mais laisser $ A comme paramètres par défaut SASS? L'astuce consiste à transmettre des paramètres nommés :

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

Exemple réel en utilisant les paramètres par défaut SASS

Voici un mixin rapide qui sort ce dont vous avez besoin pour une barre de défilement de style très basique (Kitty en a également un):

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

Maintenant, je peux l'appeler comme ceci:

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

Je viens de remarquer cela parce que j'ai dû chercher pour le comprendre. J'ai essayé de le "sauter" avec une chaîne vide ou null comme premier argument, mais cela ne fonctionne pas. La méthode du paramètre nommé doit être utilisée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!