web-dev-qa-db-ja.com

SCSSミックスインのif / else条件の構文

こんにちは私はSASS/SCSSを学ぼうとしており、clearfixのために自分のmixinをリファクタリングしようとしています。

ミックスインが幅を渡すかどうかに基づいてミックスインが欲しいのです。

これまでの考え方（他のミックスインを含めるための擬似コードのみ）

@mixin clearfix($width) {

   @if !$width {

    // if width is not passed, or empty do this

   } @else {

        display: inline-block;
        width: $width;
   }
}

これは私がそれを呼ぶかもしれないと思った方法ですが、それは機能していません。

@include clearfix();

または

@include clearfix(100%)

または

@include clearfix(960px)

これを行うための最良の方法または正しい方法に関する助けをいただければ幸いです！

conditionalmixinssassif-statement
102
clairesuzy

これを試すことができます：

$width:auto;
@mixin clearfix($width) {

   @if $width == 'auto' {

    // if width is not passed, or empty do this

   } @else {
        display: inline-block;
        width: $width;
   }
}

意図した結果はわかりませんが、デフォルト値を設定するとfalseが返されます。

137
simplethemes

ミックスインを最初に作成するときに、デフォルトのパラメーター値をインラインで割り当てることができます。

@mixin clearfix($width: 'auto') {

  @if $width == 'auto' {

    // if width is not passed, or empty do this

  } @else {

    display: inline-block;
    width: $width;

  }
}
214
Ryan James

デフォルトのパラメーターは、nullまたはfalseです。
この方法では、値がパラメーターとして渡されたかどうかをテストする方が短くなります。

@mixin clearfix($width: null) {

  @if not ($width) {

    // if width is not passed, or empty do this

  } @else {

    display: inline-block;
    width: $width;

  }
}
3
Quentin Veron