SassBites Episode #5

sassbites5.scss

$animal: cat;
$tail: curl;

div {
    @if $animal == 'cat' {
        sound: meow;
    }
    @if $animal == 'dog' {
        sound: woof;
    }
    @if $animal == 'cat' or $tail == 'curl' {
        nap: yes;
    }
    @if $animal == 'dog' and $tail != 'curl' {
        play: yes;
    }
}





$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}


$ie-support: true;

@mixin if-demo($var) {
  @if $ie-support {     // external variable
    font-size: $var * 16px;
  }
  @if unitless($var) { // parameter variable
    font-size: $var + rem;
  }
  @for $i from 1 through 5 {
    @if $i > 2 {  // internal variable
      output: $i;
    }
  }
}

div {
  @include if-demo(3);
}

comparable($num1, $num2) can be added, subtracted or compared

font-size: if($ie-support, $var * 16px, $var + rem);