Syntax für if / else-Bedingung im SCSS-Mixin

106

Hallo, ich versuche SASS / SCSS zu lernen und versuche mein eigenes Mixin für Clearfix umzugestalten

Ich möchte, dass das Mixin davon abhängt, ob ich das Mixin eine Breite übergebe.

Gedanken bisher (Pseudocode nur, da ich andere Mixins einschließen werde)

@mixin clearfix($width) {

   @if !$width {

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

   } @else {

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

So dachte ich, ich könnte es nennen, aber es funktioniert nicht.

@include clearfix();

oder

@include clearfix(100%)

oder

@include clearfix(960px)

Ich würde mich über jede Hilfe bei der besten oder richtigen Vorgehensweise freuen!

clairesuzy
quelle
3
Bitte lesen Sie die Antwort von Ryan James - sie ist viel besser als die derzeit akzeptierte. =)
Quinn Strahl

Antworten:

145

Sie könnten dies versuchen:

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

   @if $width == 'auto' {

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

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

Ich bin mir Ihres beabsichtigten Ergebnisses nicht sicher, aber das Festlegen eines Standardwerts sollte false zurückgeben.

simplethemes
quelle
5
es tut, danke, ich hatte es mit, " "aber ich mag den automatischen Wert besser :) - musste keine Variable setzen, obwohl ich es in die Mixin-Syntax als Standard vaue gesetzt habe @mixin clearfix($width: auto) {... danke
clairesuzy
Ist irgendein Zweck für die Angabe von $ width: auto; als Standardwert?
Krish
222

Sie können Standardparameterwerte inline zuweisen, wenn Sie das Mixin zum ersten Mal erstellen:

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

  @if $width == 'auto' {

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

  } @else {

    display: inline-block;
    width: $width;

  }
}
Ryan James
quelle
23
Dies sollte die akzeptierte Antwort sein! Es ist besser / sauberer, einen Standardparameter zu verwenden.
Denken Sie grafisch
@hellaFont: Bitte fügen Sie keine ungültigen Änderungen hinzu. Durch Hinzufügen oder Ändern von Code wird die Bedeutung einer Antwort geändert. Ein Kommentar wird ausreichen.
Brian
9

Sie können den Parameter standardmäßig auf nulloder setzen false.
Auf diese Weise wäre es kürzer zu testen, ob ein Wert als Parameter übergeben wurde.

@mixin clearfix($width: null) {

  @if not ($width) {

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

  } @else {

    display: inline-block;
    width: $width;

  }
}
Quentin Veron
quelle
Die logischste Antwort mit den wenigsten positiven Stimmen ... Die Welt ist unlogisch.
CPHPython