Tutorial
If/Else Statements in Sass
While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the "report an issue" button at the bottom of the tutorial.
An if statement is handy for checking if a variable exists or matches something:
$var: true !default; // Can be overridden elsewhere
@if $var == true {
// Conditional code
}
$other: single;
@if $other == single {
// Code for if it’s single
} @else if $other == double {
// Double code
} @else {
// Default if it’s neither
}
Make sure that if your variable properties are stored with ’ quotes around them, your @if statement checks that too. (e.g. $other ==‘single’).
if statements can be useful for mixins for checking variables or in libraries to include or exclude code.
