Syntax for if/else condition in SCSS mixin

conditional mixins sass if-statement
clairesuzy picture clairesuzy · Mar 28, 2011 · Viewed 158k times · Source

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

Ryan James picture Ryan James · Feb 28, 2012

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;

  }
}

Related questions

Check if something is (not) in a list in Python

I have a list of tuples in Python, and I have a conditional where I want to take the branch ONLY if the tuple is not in the list (if it is in the list, then I don't want to …

Read More
How to combine multiple conditions to subset a data-frame using "OR"?

I have a data.frame in R. I want to try two different conditions on two different columns, but I want these conditions to be inclusive. Therefore, I would like to use "OR" to combine the conditions. I have used …

Read More
Laravel Checking If a Record Exists

I am new to Laravel. Please excuse the newbie question but how do I find if a record exists? $user = User::where('email', '=', Input::get('email')); What can I do here to see if $user has a record?

Read More