sass if else

Solutions on MaxInterview for sass if else by the best coders in the world

showing results for - "sass if else"
Ismail
09 Jun 2018
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
Thibaut
14 Jul 2018
1 @if $var == 'foo' {
2    /* style 1 */
3  } @else if $var == 'bar' {
4    /* style 2 */
5  } @else {
6    /* style 3 */
7  }
Marlene
27 May 2017
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
Alessia
08 Feb 2020
1$light-background: #f2ece4;
2$light-text: #036;
3$dark-background: #6b717f;
4$dark-text: #d2e1dd;
5
6@mixin theme-colors($light-theme: true) {
7  @if $light-theme {
8    background-color: $light-background;
9    color: $light-text;
10  } @else {
11    background-color: $dark-background;
12    color: $dark-text;
13  }
14}
15
16.banner {
17  @include theme-colors($light-theme: true);
18  body.dark & {
19    @include theme-colors($light-theme: false);
20  }
21}
22