web-dev-qa-db-fra.com

Syntaxe de la condition if / else dans le mix SCSS

Salut, j'essaie d'apprendre le SASS/SCSS et j'essaie de refactoriser mon propre mixin pour clearfix

ce que j'aimerais, c'est que le mixin soit basé sur le fait que je lui passe une largeur ou non.

pensées jusqu'ici (pseudo-code uniquement car je vais inclure d'autres mixins)

@mixin clearfix($width) {

   @if !$width {

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

   } @else {

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

voici comment je pensais que je pourrais l'appeler, mais ça ne marche pas.

@include clearfix();

ou

@include clearfix(100%)

ou

@include clearfix(960px)

J'apprécierais toute aide sur la meilleure ou la bonne façon de faire cela!

conditionalmixinssassif-statement
102
clairesuzy

Vous pouvez essayer ceci:

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

   @if $width == 'auto' {

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

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

Je ne suis pas sûr du résultat souhaité, mais la définition d'une valeur par défaut devrait renvoyer false.

137
simplethemes

Vous pouvez affecter des valeurs de paramètre par défaut en ligne lorsque vous créez le mixin:

@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

Vous pouvez définir par défaut le paramètre sur null ou false.
De cette façon, il serait plus court de tester si une valeur a été passée en paramètre.

@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