Syntax for if/else condition in SCSS mixin

Question

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!

Answer 1

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;    } } 

Answer 2

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.