Syntax for if/else condition in SCSS mixin
171,322
Solution 1
You could try this:
$width:auto;
@mixin clearfix($width) {
@if $width == 'auto' {
// if width is not passed, or empty do this
} @else {
display: inline-block;
width: $width;
}
}
I'm not sure of your intended result, but setting a default value should return false.
Solution 2
You can assign default parameter values inline when you first create the mixin:
@mixin clearfix($width: 'auto') {
@if $width == 'auto' {
// if width is not passed, or empty do this
} @else {
display: inline-block;
width: $width;
}
}
Solution 3
You could default the parameter to null
or false
.
This way, it would be shorter to test if a value has been passed as parameter.
@mixin clearfix($width: null) {
@if not ($width) {
// if width is not passed, or empty do this
} @else {
display: inline-block;
width: $width;
}
}
Related videos on Youtube
Author by
clairesuzy
Updated on July 08, 2022Comments
-
clairesuzy almost 2 years
Hi I'm trying to learn SASS/SCSS and am trying to refactor my own mixin for clearfix
what I'd like is for the mixin to be based on whether I pass the mixin a width.
thoughts so far (pseudo code only as I will be including other mixins)
@mixin clearfix($width) { @if !$width { // if width is not passed, or empty do this } @else { display: inline-block; width: $width; } }
here's how I thought I might call it, but it's not working.
@include clearfix();
or
@include clearfix(100%)
or
@include clearfix(960px)
I'd appreciate any help on the best or right way to do this!
-
clairesuzy about 13 yearsit does, thank you I had it using
" "
but I like the auto value better :) - didn't need to set variable though I put it in the mixin syntax as the default vaue@mixin clearfix($width: auto) {...
thank you :) -
Krish almost 7 yearsIs any purpose for giving $width:auto; as default value?