Answers for "sass if else"

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

scss if

@if $var == 'foo' {
    /* style 1 */
  } @else if $var == 'bar' {
    /* style 2 */
  } @else {
    /* style 3 */
  }

sass if

@mixin app-background($color) {
  #{if(&, '&.app-background', '.app-background')} {
    background-color: $color;
    color: rgba(#fff, 0.75);
  }
}

@include app-background(#036);

.sidebar {
  @include app-background(#c6538c);
}

if else scss

$light-background: #f2ece4;
$light-text: #036;
$dark-background: #6b717f;
$dark-text: #d2e1dd;

@mixin theme-colors($light-theme: true) {
  @if $light-theme {
    background-color: $light-background;
    color: $light-text;
  } @else {
    background-color: $dark-background;
    color: $dark-text;
  }
}

.banner {
  @include theme-colors($light-theme: true);
  body.dark & {
    @include theme-colors($light-theme: false);
  }
}