sass if

1// How to create an if-else clause in sass
2
3// First create a mixin, which is like a function in javaScript
4// And pass in an optional parameter to the mixin to hold the value
5// js ==> if, else if, else, while sass is ==> @if, @else if, @else
6// No brackets surrounding each condition in sass
7// Then pass in your block of styles to optionally load.
8// @mixin variable-name(optional parameter(s))
9
10  @mixin border-stroke($val){
11    @if $val == light {
12      border: 1px solid black;
13    }
14    @else if $val == medium {
15      border: 3px solid black;
16    }
17    @else if $val == heavy {
18      border: 6px solid black;
19    }
20    @else{
21      border: none;
22    }
23  }
24
25  // Usage
26  // Call a mixin using the @include followed by the mixin name
27
28  h2{
29    @include border-stroke(medium)
30  }
31
32// with love @kouqhar

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

1@mixin app-background($color) {
2  #{if(&, '&.app-background', '.app-background')} {
3    background-color: $color;
4    color: rgba(#fff, 0.75);
5  }
6}
7
8@include app-background(#036);
9
10.sidebar {
11  @include app-background(#c6538c);
12}
13