mercredi 16 novembre 2016

SASS: Multiple IF statements, or on IF with multiple conditions?

Let's say I want to make a mixin for a button:

@mixin button($button-size) {
   padding: $button-size;
}

I now want to add some conditions for the $button-size and set a default if I'm using it without passing a value - but I don't know which way would be better/faster/right:

  1. With multiple IF statements I would do the following:

    @mixin button($button-size: medium) {
    
     @if $button-size == big {
      padding: $base*1.5;
     }
     @if $button-size == medium {
      padding: $base;
     }
     @if $button-size == small {
      padding: $base*0.5;
     }
    
    }
    
    
  2. With multiple IF statements and a default value set right inside the mixin:

    @mixin button($button-size: null) {
    
     padding: $base;
    
     @if $button-size == big {
      padding: $base*1.5;
     }
     @if $button-size == small {
      padding: $base*0.5;
     }
    
    }
    
    
  3. With one IF statement with multiple conditions and a default value as last condition:

    @mixin button($button-size: null) {
    
     @if $button-size == big {
      padding: $base*1.5;
     } @else if $button-size == small {
      padding: $base*0.5;
     } @else {
      padding: $base;
     }
    
    }
    
    
  4. With one IF statement with multiple conditions and a default value set right inside the mixin:

    @mixin button($button-size: null) {
    
     padding: $base;
    
     @if $button-size == big {
      padding: $base*1.5;
     } @else if $button-size == small {
      padding: $base*0.5;
     }
    
    }
    
    

Is everything the same and it doesn't matter? Why? Does it matter which one I pick and why? Could there be a better solution?

Aucun commentaire:

Enregistrer un commentaire