Składnia warunku if / else w mieszance SCSS


106

Cześć, próbuję się nauczyć SASS / SCSS i próbuję zreformować mój własny mixin dla clearfix

chciałbym, żeby miksowanie było oparte na tym, czy podam szerokość miksu.

dotychczasowe przemyślenia (tylko pseudokod, ponieważ będę zawierał inne miksy)

@mixin clearfix($width) {

   @if !$width {

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

   } @else {

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

tak myślałem, że mogę to nazwać, ale to nie działa.

@include clearfix();

lub

@include clearfix(100%)

lub

@include clearfix(960px)

Byłbym wdzięczny za każdą pomoc w najlepszej lub właściwej drodze, aby to zrobić!


3
Zobacz odpowiedź Ryana Jamesa - jest znacznie lepsza niż obecnie akceptowana. =)
Quinn Strahl

Odpowiedzi:


145

Możesz spróbować tego:

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

   @if $width == 'auto' {

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

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

Nie jestem pewien co do zamierzonego wyniku, ale ustawienie wartości domyślnej powinno zwrócić fałsz.


5
tak, dziękuję, że używałem, " "ale bardziej podoba mi się wartość auto :) - nie musiałem ustawiać zmiennej, chociaż umieściłem ją w składni mixin jako domyślną wartość @mixin clearfix($width: auto) {... dziękuję :)
clairesuzy

Czy jest jakiś cel nadawania $ width: auto; jako wartość domyślna?
Krish

222

Możesz przypisać domyślne wartości parametrów w tekście podczas tworzenia miksu:

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

  @if $width == 'auto' {

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

  } @else {

    display: inline-block;
    width: $width;

  }
}

23
To powinna być akceptowana odpowiedź! Lepiej / czystsze jest użycie parametru domyślnego.
Myśl graficznie

@hellaFont: Nie dodawaj nieprawidłowych zmian. Dodanie kodu lub jego zmiana zmieni znaczenie odpowiedzi. Wystarczy komentarz.
Brian,

10

Możesz ustawić domyślny parametr na nulllub false.
W ten sposób krótsze byłoby sprawdzenie, czy wartość została przekazana jako parametr.

@mixin clearfix($width: null) {

  @if not ($width) {

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

  } @else {

    display: inline-block;
    width: $width;

  }
}

Najbardziej logiczna odpowiedź z najmniejszą liczbą pozytywnych głosów ... Świat jest nielogiczny.
CPHPython
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.