If/Else Statements in Sass

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
}

This affiliate banner helps support the site 🙏

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.

Author: Mike Street

Mike is a front-end developer for Brighton agency Liquid Light. When not writing copious amounts of CSS he can be found cycling with around Sussex or making an arduino blink.

Find Mike at mikestreety.co.uk