clairesuzy clairesuzy - 11 months ago 88
Sass (Sass) Question

Syntax for if/else condition in SCSS mixin

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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download