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:
-
With multiple
IFstatements 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; } } -
With multiple
IFstatements 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; } } -
With one
IFstatement 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; } } -
With one
IFstatement 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