Learning

How we can write complex SCSS mixin with if else condition and null value passed or on no value passed?

Hello

Welcome, to this short post on writing/learning a little complex SCSS Mixin for your project/learning.

To keep it straight and short here it is the code example:

@mixin setWH($w: false, $h: false, $unit: false, $isImportant: false) {
   @if $w AND $unit AND $isImportant {
       width: unquote($w + $unit + ' ');
   } @else if $w AND $isImportant {
       width: $w + ' ';
   }
   @else if $w AND $unit {
       width: $w + $unit;
   } @else if $w {
       width: $w;
   }
 
   @if $h AND $unit AND $isImportant {
       height: unquote($h + $unit + ' ');
   } @else if $h AND $isImportant {
       width: unquote($h + ' ');
   } @else if $h AND $unit {
       height: $h + $unit;
   } @else if $h {
       height: $h;
   }
}

Usage Examples:


//Usage examples:
.myMixinTest1 {
  @include setWH(15, 5, 'em');
}

.myMixinTest2 {
  @include setWH(6, 4.3, "rem");
}

.myMixinTest3 {
  @include setWH(60, false, "px");
}

.myMixinTest4 {
  @include setWH(false, 30, "px");
}

.myMixinTest5 {
  @include setWH(27, 3, "rem", true);
}

It looks complex if you pay a little bit close look, its most simple.

You may extend more with if else or else conditions. I just kept to that extend as not require for me any else condition for error handling or something else to output.

A small ~codepen~ in action!

Hope you like & enjoyed learning!

Happy Learning!

admin

Recent Posts

The Ultimate Guide to Effective Meetings

In today’s fast-paced work environment, meetings are essential but can often feel unproductive. However, by…

2 months ago

From Mine to Market: How Gold Is Mined, Refined, and Sold in Shops

Gold is one of the most coveted precious metals in the world, adored for its…

2 months ago

The Historical Journey of Gold: From Ancient Civilizations to Modern Times

Gold, the shimmering metal synonymous with wealth, power, and beauty, has been deeply intertwined with…

2 months ago

How to Onboard an Intern in Small, Individual-Based Company

How to Onboard an Intern in a Small, Individual-Based Company Hiring an intern can be…

3 months ago