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

User · Accepted Answer

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

User · Answer

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

User · Answer

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

[conditional] Syntax for if/else condition in SCSS mixin

Examples related to conditional

Examples related to mixins

Examples related to sass

Examples related to if-statement