<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
This Pen doesn't use any external JavaScript resources.