☰

Sass は変数がミックスインに渡されるかどうかをチェックします 質問する

tag-icon • tag-icon variables sass
Sass は変数がミックスインに渡されるかどうかをチェックします 質問する

デフォルト値を持つミックスインがあるとします

$default: 1;

@mixin test($p : $default) {
    @if () {
        // Do something if $p was 4passed?
    } @else {
        // Do something if $p was not passed?
    }

}

このようにミックスインを呼び出す場合、次の 2 つの異なる方法があります。

@include test(); // A
@include test(1);  // B

デフォルトとの違いを見分ける方法はありますか？（あ）、そしてデフォルトを上書きするもの（バ）?

ベストアンサー1

ミックスインは、少し変更すれば機能します (実際には、問題のパラメータをディレクティブに渡す必要があるため) 。また、パラメータをまたは@ifにデフォルト設定して、何も渡されないようにします。nullfalse

@mixin test($p: null) {
    @if ($p) {
        /* Do something if $p was passed */
    } @else {
        /* Do something if $p was not passed */
    }
}

デモ

デフォルトとして別の値を設定する場合は、if ステートメントでその特定の値をチェックするだけです (例: 「$pデフォルト値に設定されている場合、何かを行う」)。ここでは、例のように、変数からデフォルトを設定することでこれを実行する方法を示します。ただし、これは「引数が渡されませんでした" そして "渡された値はデフォルト値と等しい「」。

@mixin test($p: $default) {
    @if ($p == $default) {
      /* Do something if $p is set to $default */
    } @else {
      /* Do something else if $p is not $default */
    }
}

デモ

もちろん、両方のアプローチを組み合わせることもできます...何かが渡されたかどうかを確認し$p（渡されたかどうかに応じて異なる処理を実行する）、何も渡されなかった場合は$pの値をデフォルトに設定します。

@mixin test($p: null) {
    @if ($p) {
      /* Do something if argument passed */
    } @else {
      /* Do something else if no argument passed. Set $p to default. */
      $p: $default;
    }
}

デモ

これで、 のブール値を除くすべてに対して機能するようになりfalse、 とnullは両方ともディレクティブでfalse検証されます。したがって、引数値として渡すことを許可するには、より具体的な式を使用する必要があります。例:false@iffalse

...
    @if ($p != null) {
...

デモ

これで、うまくいくはずです。ただし、何らかの理由でnull引数として渡したい場合は別です。その場合は、引数として渡される可能性が非常に低い文字列など、別のものをデフォルトとして使用する必要があります。例: "no arguments have been passed"=)

デモ

おすすめ記事