sass if else

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

Search
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
source
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  }
source
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
source
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
similar questions
what is scsshow to write if condition in cssscss conditional stylewatch scsspartials in sasssass vs scsssass 26 selectorscss functionscss sass watch command linecss sass scss
queries leading to this page
sass if statementif condition in sasif statement scsssass if 21 3d 23 7bif 28 29 7d in scssif else in sassass functions if else examplesif condition in sassif and else in sasssas 25ifsass if 40if with or statement sasssas if then do 3b else if 3bsass else ifif else class sassif statements in sasssass if trueif en sassif sasif in sassif condition css sassif else for sasssass conditionalelse if sasif statement sasif statement in scsssass if else examplesass function if elseif else saselse if in sasif in sas 40if 40elseif sassif else with sassifs sasif statement in sassif sasssass if condition 21 3d if sassif else in sasssass else issass if elseif statements in sasw3 scholls sass if elsesass if 21 3d falseif else expression on sassif then and do in sas 40if and 40else sasssass if statementsscss conditionalsass if operationsass conditionscss if statementif statements in scsshow to use if style in sassuse if in sassif function sassscss if 25else if in sasscss write if statementif else sass if conditions in sasssass 40ifsass if or 40if in sasssass if else conditional stylingscss if condition string 40if sassfunction with if statement sassif statement sasssif 28 29 in scssput an if condition in scsssass if andif statement sasssas if then do else examplesas if else sass conditional ifcondition sasssass if else conditiosass conditional statementssass if else