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!


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.


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;

  }
}

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;

  }
}

Jawaban paling logis dengan suara positif paling sedikit ... Dunia ini tidak logis.
CPHPython
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.