<p class="info">Both the variables <span>i-am-true</span> and <span>i-am-false</span> were evaluated corrrectly. Otherwise, you would not be reading this sentence and the background would be reddish!</p>
<p class="warn">The number evaluated to false!</p>
body {
  font-family: 'Lato';
  line-height: 2;
  text-align: center;
}

span {
  color: black;
  font-weight: bold;
}

$i-am-true: true;
$i-am-false: false;
$a-number: 2;


body {
  @if not $i-am-true {
    background : rgba(255,0,0,0.6);
  } @else {
    background : rgba(0,0,255,0.6);
  }
}

.info {
  @if not $i-am-false {
    color: white;
    font-weight: bold;
    font-size: 1.5em;
  } @else {
    display: none;
  }
}

.warn {
  @if not $a-number {
    color: white;
    font-weight: bold;
    font-size: 1.5em;
  } @else {
    display: none;
  }
}
View Compiled

External CSS

  1. https://fonts.googleapis.com/css?family=Lato:300

External JavaScript

This Pen doesn't use any external JavaScript resources.