Tag: width

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 + ' !important');
   } @else if $w AND $isImportant {
       width: $w + ' !important';
   }
   @else if $w AND $unit {
       width: $w + $unit;
   } @else if $w {
       width: $w;
   }
 
   @if $h AND $unit AND $isImportant {
       height: unquote($h + $unit + ' !important');
   } @else if $h AND $isImportant {
       width: unquote($h + ' !important');
   } @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!