Sintaks untuk kondisi if / else di mixin SCSS

106

Hai, saya mencoba mempelajari SASS / SCSS dan saya mencoba memfaktor ulang mixin saya sendiri untuk clearfix

yang saya inginkan adalah agar mixin tersebut didasarkan pada apakah saya melewatkan mixin dengan lebar.

pemikiran sejauh ini (hanya kode pseudo karena saya akan menyertakan mixin lainnya)

@mixin clearfix($width) {

   @if !$width {

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

   } @else {

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

begini cara saya pikir saya akan menyebutnya, tetapi itu tidak berhasil.

@include clearfix();

atau

@include clearfix(100%)

atau

@include clearfix(960px)

Saya menghargai bantuan apa pun tentang cara terbaik atau benar untuk melakukan ini!

clairesuzy
sumber
3
Silakan lihat jawaban Ryan James - ini jauh lebih baik daripada yang diterima saat ini. =)
Quinn Strahl

Jawaban:

145

Anda bisa mencoba ini:

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

   @if $width == 'auto' {

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

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

Saya tidak yakin dengan hasil yang Anda inginkan, tetapi menyetel nilai default harus mengembalikan false.

tema sederhana
sumber
5
ya, terima kasih saya telah menggunakannya " "tetapi saya lebih suka nilai otomatisnya :) - tidak perlu mengatur variabel meskipun saya memasukkannya ke dalam sintaks mixin sebagai nilai default @mixin clearfix($width: auto) {... terima kasih :)
clairesuzy
Apakah ada tujuan untuk memberikan $ width: auto; sebagai nilai default?
Krish
222

Anda dapat menetapkan nilai parameter default sebaris saat Anda pertama kali membuat mixin:

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

  @if $width == 'auto' {

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

  } @else {

    display: inline-block;
    width: $width;

  }
}
Ryan James
sumber
23
Ini harus menjadi jawaban yang diterima! Lebih baik / lebih bersih menggunakan parameter default.
Pikirkan Grafis
@hellaFont: Harap jangan menambahkan hasil edit yang tidak valid. Menambahkan kode atau mengubahnya akan mengubah arti sebuah jawaban. Komentar sudah cukup.
Brian
10

Anda dapat menetapkan parameter secara default ke nullatau false.
Dengan cara ini, akan lebih singkat untuk menguji apakah suatu nilai telah dilewatkan sebagai parameter.

@mixin clearfix($width: null) {

  @if not ($width) {

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

  } @else {

    display: inline-block;
    width: $width;

  }
}
Quentin Veron
sumber
Jawaban paling logis dengan suara positif paling sedikit ... Dunia ini tidak logis.
CPHPython