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

What I Learned After Taking Break from Instagram for 30 Days

Break! I didn’t plan it. One day I just didn’t feel like opening Instagram—and then…

2 days ago

5 AI Tools That Actually Save You Time (And Aren’t Scary)

AI tools Let’s be real—AI sounds like either a robot apocalypse or something only tech…

2 days ago

Summer Learning Ideas

Summer vacation is a great time for kids to explore, have fun, and learn new…

5 days ago

Understanding How ChatGPT Works (ML/AI learning path)

Goal: Understand transformers, large language models, and the architecture behind ChatGPT. Tutorial Suggestions: ✅ “Transformers…

5 days ago

Using ChatGPT API (for developers)

Goal: Build apps or tools with ChatGPT or GPT-4 API. Tutorial Suggestions: ✅ OpenAI API…

5 days ago

Using ChatGPT Effectively (for general users or productivity)

Goal: Learn how to prompt better, write content, brainstorm, code, etc. Tutorial Suggestions: ✅ OpenAI's…

5 days ago