sass if
// 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
4
4
@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);
}
Thank you!
4
0
Are there any code examples left?
New code examples in category CSS
-
CSS 2022-03-27 22:50:16 make text bigger html5
-
CSS 2022-03-27 21:40:08 move list item to left css
-
CSS 2022-03-27 21:35:05 reduce image size css
-
CSS 2022-03-27 21:30:21 css image background center horizontally in div
-
CSS 2022-03-27 21:05:02 css button styles
-
CSS 2022-03-27 18:50:09 compass font awesome
-
CSS 2022-03-27 18:50:06 modal in materialize css
-
CSS 2022-03-27 17:55:12 box round corner css
-
CSS 2022-03-27 17:45:12 jquery add css
-
CSS 2022-03-27 17:45:01 css image fit in div with aspect ratio