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
}— Sorry to interrupt this program! 📺
Are you interested in learning React? If so, I highly recommend you try Wes Bos' React for Beginners or Fullstack Advanced React & GraphQL course.
Given the current situation with COVID-19, times are hard for most of us, but if you're stuck at home you can perhaps use that extra time to work on your web dev skills. Wes put all of his courses at 50% off to help out with the current challenge we're facing.
Plus, these are affiliate links, so if you purchase a course you help Alligator.io continue to exist at the same time! 🙏
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