jugal13

Flow control in SASS

Flow control in SASS

This article focuses on flow control in SASS

Jugal Wadhwa's photo
Jugal Wadhwa
·

5 min read

Table of contents

Hello world. Let's continue learning about SASS and how we can use conditionals in SASS.

In the previous article we learned about SASS Modules and how to use them. Let's have a look at how we can use flow control in SASS.

Introduction

SASS provides flow control through at-rules. These rules allow a user to decide what snippets of styling should be emitted. They can be combined with other features like mixins and functions to make writting and maintaining SASS code easier.

The following at-rules can be used to help change the way the code is emitted:

  1. @if, @else & @else if
  2. @each
  3. @for
  4. @while

Note about truthy and falsy values

false & null are considered false

Rest all values are considered truthy including 0, empty lists and empty strings

Conditionals

SASS conditionals include different decision making statements. They are as follows

  1. @if Rule
  2. @else Rule
  3. @else if Rule


@if Rule

@if rules written as @if <condition> { /* code block */ } controls whether or not the styles are being emitted it or not. Upon the condition being true the block is evaluated and styles are applied.

SCSS CSS 
@mixin avatar($size, $circle: false) {
  width: $size;
  height: $size;

  @if $circle {
    border-radius: $size / 2;
  }
}

.rounded-avatar {
  @include avatar(48px);
}

.circle-avatar {
  @include avatar(48px, true);
}


.rounded-avatar {
  width: 48px;
  height: 48px;
}

.circle-avatar {
  width: 48px;
  height: 48px;
  border-radius: 24px;
}


@else Rule

@else rule is an optional rule that followes the @if rule and is evaluated if the <condition> returns false

SCSS CSS 
$bg-light: #f2ece4;
$text-light: #036;
$bg-dark: #6b717f;
$text-dark: #d2e1dd;

@mixin theme($light: true) {
  @if $light {
    background-color: $bg-light;
    color: $text-light;
  } @else {
    background-color: $bg-dark;
    color: $text-dark;
  }
}

.banner {
  @include theme($light: true);

  body.dark & {
    @include theme($light: false);
  }
}


.banner {
  background-color: #f2ece4;
  color: #036;
}

body.dark .banner {
  background-color: #6b717f;
  color: #d2e1dd;
}


@else if Rule

@else if is used to define multiple conditional flows. This block is written between and @if block and @else block and is evaluated if the condition in the preceeding blocks return false.

SCSS CSS 
$primary: #2a2ea3;
$success: #0aa10f;
$warn: #d68400;
$error: #d60000;

@mixin notify-theme($theme: "primary") {
  @if $theme == "primary" {
    background-color: $primary;
  } @else if $theme == "success" {
    background-color: $success;
  } @else if $theme == "warn" {
    background-color: $warn;
  } @else if == "error" {
    background-color: $error;
  } @else {
    background-color: grey;
  }
}

.primary-alert {
  @include notify-theme();
}

.success-alert {
  @include notify-theme("success");
}

.warn-alert {
  @include notify-theme("warn");
}

.error-alert {
  @include notify-theme("error");
}


.primary-alert {
  background-color: #2a2ea3;
}

.success-alert {
  background-color: #0aa10f;
}

.warn-alert {
  background-color: #d68400;
}

.error-alert {
  background-color: #d60000;
}


@each Rule

@each rule is used to loop through values such as lists and maps wherein it evaluates each element of the list/map. It is handy when there is a repetitive set of styles to be emitted

SCSS CSS 
$theme: (
  $primary: #2a2ea3,
  $success: #0aa10f,
  $warn: #d68400,
  $error: #d60000,
);

@each $type, $colour in $theme {
  .#{$type}-alert {
    background-color: $colour;
  }
}


.primary-alert {
  background-color: #2a2ea3;
}

.success-alert {
  background-color: #0aa10f;
}

.warn-alert {
  background-color: #d68400;
}

.error-alert {
  background-color: #d60000;
}


@for Rule

@for works like a simple for loop counting up or down from one number to another.

  1. @for and to indicate counting excluding the final number
  2. @for and through indicate counting including the final number

Creating a 12 column grid system using for loop

SCSS CSS 
$columns: 12;

@for $i from 1 through $columns {
  .col-#{$i} {
    width: (100% / ($columns / $i));
  }
}


.col-1 {
  width: 8.3333333333%;
}

.col-2 {
  width: 16.6666666667%;
}

.col-3 {
  width: 25%;
}

.col-4 {
  width: 33.3333333333%;
}

.col-5 {
  width: 41.6666666667%;
}

.col-6 {
  width: 50%;
}

.col-7 {
  width: 58.3333333333%;
}

.col-8 {
  width: 66.6666666667%;
}

.col-9 {
  width: 75%;
}

.col-10 {
  width: 83.3333333333%;
}

.col-11 {
  width: 91.6666666667%;
}

.col-12 {
  width: 100%;
}


@while Rule

@while loops works by continually executing the block as long as the condition remains true. Once the condition is evaluated as false the loop is exited.

SCSS CSS 
$i: 1;

@while $i < 5 {
  .border-#{$i * 2} {
    border: #{(2 * $i)}px solid #111;
  }

  $i: $i + 1;
}


.border-2 {
  border: 2px solid #111;
}

.border-4 {
  border: 4px solid #111;
}

.border-6 {
  border: 6px solid #111;
}

.border-8 {
  border: 8px solid #111;
}


Conclusion

We've learnt how flow control can be used to generate and emit styles. Taking advantage of flow control, allows creating reusable classes and even more advanced concepts like themes. This series of articles have introduced the various concepts of SCSS and why SCSS is advantageous over CSS. Using these concepts one should explore building different ideas and even design systems.

SassCSSscss