Maison > interface Web > tutoriel CSS > Un conseil pratique pour utiliser les paramètres par défaut SASS

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

Christopher Nolan
Libérer: 2025-03-15 10:42:09
original
448 Les gens l'ont consulté

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>
Copier après la connexion

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>
Copier après la connexion

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>
Copier après la connexion

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>
Copier après la connexion

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>
Copier après la connexion

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal