1. sass basic - if
scss
body {
margin: 50px;
}
@mixin textAndBgColor($textColor, $bgColor) {
color: $textColor;
background-color: $bgColor;
}
@mixin theme($mood) {
@if ($mood == "light") {
@include textAndBgColor(#333, #ff0);
} @else if ($mood == "dark") {
@include textAndBgColor(#fff, #000);
} @else {
@include textAndBgColor(#f00, #aaa);
}
}
#box1 {
@include theme("light");
}
#box2 {
@include theme("dark");
}
#box3 {
@include theme("");
}
css
body {
margin: 50px;
}
#box1 {
color: #333;
background-color: #ff0;
}
#box2 {
color: #fff;
background-color: #000;
}
#box3 {
color: #f00;
background-color: #aaa;
}