SASSデフォルトパラメーターを使用するための実用的なヒント

SASSは、パラメーターを受け入れる関数とミキシンを提供します。 SASSデフォルトパラメーターを使用できます。つまり、関数またはミックスインを呼び出すときに提供されていない場合でも、パラメーターに値があります。

Mixinに焦点を当てましょう。これはMixinの構文です：

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

SASSミックスのデフォルトパラメーターの設定はより安全で、より便利です。

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

しかし、$ bと$ cを渡したいが、$ aをsassデフォルトパラメーターとして残したい場合はどうなりますか？トリックは、名前付きパラメーターを渡すことです。

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

SASSデフォルトパラメーターを使用した実際の例

これは、非常に基本的なスタイリングスクロールバーに必要なものを出力するクイックミックスです（キティにもあります）：

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

今、私はそれをこのように呼ぶことができます：

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

私はそれを把握するために探し回らなければならなかったので、私はちょうどこれに気づきました。最初の引数として空の文字列またはnullで「スキップ」しようとしましたが、これは機能しません。名前付きパラメーターメソッドを使用する必要があります。

以上がSASSデフォルトパラメーターを使用するための実用的なヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。