sass conditional statements code example

Example 1: sass if else

// How to create an if-else clause in sass

// First create a mixin, which is like a function in javaScript
// And pass in an optional parameter to the mixin to hold the value
// js ==> if, else if, else, while sass is ==> @if, @else if, @else
// No brackets surrounding each condition in sass
// Then pass in your block of styles to optionally load.
// @mixin variable-name(optional parameter(s))

  @mixin border-stroke($val){
    @if $val == light {
      border: 1px solid black;
    }
    @else if $val == medium {
      border: 3px solid black;
    }
    @else if $val == heavy {
      border: 6px solid black;
    }
    @else{
      border: none;
    }
  }

  // Usage
  // Call a mixin using the @include followed by the mixin name

  h2{
    @include border-stroke(medium)
  }

// with love @kouqhar

Example 2: scss conditional style

$p: 3;

@while $p < 5 {
  .item-#{$p} {
    
        color: red;
    
        $p : $p + 1;
  
    }
}