figuring out sass mixins

Question

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.

Answer 1

try removing the ":

@if $width > 50% {}

You can quickly experiment with it here: http://sassmeister.com/