I am brand new to sass and am trying to get my head wrapped around mixins and using if/else statements inside of mixins. I'm trying to write something simple that basically says if the width setting of a selector is greater than 50% it will be a certain color, otherwise it will be a different color.
Here is the code I have so far:
@mixin color-class($width) {
@if "$width > 50%" {
background-color: purple;
} @else {
background-color: orange;
}
}
.selector-two {
@include color-class(40%);
}
.selector-three {
@include color-class(80%);
}
The css outputs the color as purple no matter what value I put here so I'm definitely missing something, any help would be greatly appreciated.
try removing the "
:
@if $width > 50% {}
You can quickly experiment with it here: http://sassmeister.com/