Petua praktikal untuk menggunakan parameter lalai SASS

SASS menyediakan fungsi dan campuran yang menerima parameter. Anda boleh menggunakan parameter lalai SASS, iaitu parameter mempunyai nilai walaupun ia tidak disediakan semasa memanggil fungsi atau mixin.

Mari fokus pada Mixin. Ini adalah sintaks Mixin:

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

Menetapkan parameter lalai dalam campuran sass lebih selamat dan lebih berguna:

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

Tetapi bagaimana jika saya mahu lulus dalam $ B dan $ C tetapi meninggalkan $ A sebagai parameter lalai SASS? Caranya ialah lulus parameter bernama :

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

Contoh sebenar menggunakan parameter lalai SASS

Berikut adalah campuran cepat yang mengeluarkan apa yang anda perlukan untuk bar skrol gaya yang sangat asas (Kitty juga mempunyai satu):

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

Sekarang saya boleh memanggilnya seperti ini:

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

Saya hanya perasan ini kerana saya terpaksa mencari sekitar untuk memikirkannya. Saya telah cuba "melangkau" dengan tali kosong atau null sebagai hujah pertama, tetapi ini tidak berfungsi. Kaedah parameter yang dinamakan mesti digunakan.

Atas ialah kandungan terperinci Petua praktikal untuk menggunakan parameter lalai SASS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!