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!

score 224 · Answer 1 · edited Oct 03 '17 at 10:18

224

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;

  }
}

edited Oct 03 '17 at 10:18

rmNyro

303
2
12

answered Feb 28 '12 at 20:02

Ryan James

2,241
2
11
2

score 147 · Accepted Answer · edited Oct 03 '17 at 10:18

147

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.

edited Oct 03 '17 at 10:18

rmNyro

303
2
12

answered Mar 29 '11 at 05:43

simplethemes

1,912
2
14
11

5

it 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 :) – clairesuzy Mar 29 '11 at 08:07
Is any purpose for giving $width:auto; as default value? – Krish Jun 01 '17 at 12:21

Quentin Veron · Answer 3 · 2018-09-18T16:08:23.683

12

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;

  }
}

edited Sep 18 '18 at 16:08

answered Sep 18 '18 at 15:59

Quentin Veron

2,421
1
10
27

Syntax for if/else condition in SCSS mixin

3 Answers3

Linked