SASS/SCSS Cheat Sheet

Introduction

SASS and SCSS serve as pre-processors, extending the capabilities beyond traditional CSS (3) by offering features such as nesting, loops, mixins, and more. This article will present cheats to simplify your workflow.

Variables

Variables like any other programming language are used to store information. For instance you might have the common theme colors that you need to use time and again.

// Declare Variables

$primary-color: #333;
$secondary-color: #777;

.heading-1 {
// using variables
  color: $primary-color;
}

.heading-2 {
  color: $secondary-color;
}




// Output

.heading-1 {
  color: #333;
}

.heading-2 {
  color: #777;
}        

Nesting

Sometimes it is hard to understand the hierarchy of the css code just by looking at different css blocks and declarations in scss you can nest the related styles.

// Nesting

.table {
  background-color: white;
  tbody {
    font-weight: bold;
    tr {
      color: #333;
      &:hover {
        background-color: #333;
        color: #fff;
      }
    }
  }
}




// Output

.table {
  background-color: white;
}
.table tbody {
  font-weight: bold;
}
.table tbody tr {
  color: #333;
}
.table tbody tr:hover {
  background-color: #333;
  color: #fff;
}        

Property Nesting

Properties can also be nested, like the below code will translate to font-weight, font-size.

// Property Nesting

font {
  weight: bold; // like font-weight
  size: 12px;  // like font-size
}        

Mixins Without Params

Mixins are like the common snippets (reusable declarations) that can be used or included inside the other declarations.

// Mixins

// Without Params

@mixin app-font {
  font-family: sans-serif, monospace;
}


body {
  @include app-font;
}




// Output

body {
  font-family: sans-serif, monospace;
}
        

Mixins With Params and Default

//  With Params

@mixin padding ($n) {
  padding: $n * 12px;
}

.heading-1 {
  @include padding(2);
}


//  With Params and a Default

$default-margin: 3;
$margin-scale: 12px;

@mixin margin ($n: $default-margin) {
  margin: $n * $margin-scale;
}


.p {
  @include margin(4);
}




// Output

.heading-1 {
  padding: 24px;
}

.p {
  margin: 48px;
}        

Extend

Most people think that mixins and extends (inheritance) are same, howvever they are different. Extend is used to share common properties from one selector to another.

.success-text-color {
  color: green;
}

.success-button {
  @extend .success-text-color;
  font-size: 12px;
}




// Output

.success-text-color, .success-button {
  color: green;
}

.success-button {
  font-size: 12px;
}        

Partials

These are the files that you don't want to convert and are mostly used inside other css files, they are there just as a reference or to keep things at one place. Like keeping all the colors in a single file. Partial Filenames should begin with underscore "_".

// file _colors.scss
$primary-color: #333;
$secondary-color: #777;

// file base.scss
@import "colors";

.primary-text {
  color: $primary-color;
}




// Output

.primary-text {
  color: #333;
}        

Modules

You don't need to write entire css in a single file. We can use "use" directive. It helps you to import mixins, functions, variables etc and it uses namespace for scoping.

// Modules

// file name _base.scss

@mixin common-font {
  font-family: monospace, sans-serif;
  font-size: 12px;
  font-weight: 200;
}


// file name main.scss
body {
  @include base.common-font;
}




// Output
body {
  font-family: monospace, sans-serif;
  font-size: 12px;
  font-weight: 200;
}        

Color Functions

RGBA

This function helps in creating colors using red, green, blue and alpha.

// Color Functions
$success-color: rgb(0, 255, 0);
$error-color: rgba(255, 0, 0, 0.1);


.success-text {
  color: $success-color;
}

.error-text {
  color: $error-color;
}




// Output

.success-text {
  color: rgb(0, 255, 0);
}

.error-text {
  color: rgba(255, 0, 0, 0.1);
}        

Mixing Colors

This function helps in mixing two colors.

// mixing colors

$dark-gray: mix(#fff, #000, 10%);

.body {
  background-color: $dark-gray;
}




// Output

.body {
  background-color: #1a1a1a;
}        

Misc Functions

There are few more functions that are available in SCSS to make life of UI developers easy.

// misc

$primary-color: #567845; 
$primary-color-opaque: rgba(#000, 0.5);
$grayscale-color: grayscale($primary-color);
$dark-primary-color: darken($primary-color, 10);
$light-primary-color: lighten($primary-color, 10);


.test-div {
  color: $primary-color;
  background-color: $primary-color-opaque;
  background-color: $grayscale-color;
  background-color: $dark-primary-color;
  background-color: $light-primary-color;
}



// Output

.test-div {
  color: #567845;
  background-color: rgba(0, 0, 0, 0.5);
  background-color: #5f5f5f;
  background-color: #3f5832;
  background-color: #6d9858;
}        

Functional Features

Interpolation

Interpolation is used to replace the placeholder with their value.

// Interpolation

$color-name: 'primary';

.#{$color-name}-text {
  color: balck;
}




// Output

.primary-text {
  color: balck;
}        

Lists, Maps and usage with loops

Like programming languages SASS also supports lists (array) and maps (key-value pairs). They are super helpful when we are trying to generate dynamic classes using loop.

// List
$supported-colors: #000, #111, #222, #333, #444;

// Map
$color-palette: (primary: #456, secondary: #333, info: #11F);

@for $i from 1 through length($supported-colors){
  .highligh-color-#{$i} {
    border: 2px solid nth($supported-colors, $i)
  }
}


@each $color-name, $color in $color-palette {
  .#{$color-name}-text {
    color: $color;
  }
}




// Output

.highligh-color-1 {
  border: 2px solid #000;
}

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

.highligh-color-3 {
  border: 2px solid #222;
}

.highligh-color-4 {
  border: 2px solid #333;
}

.highligh-color-5 {
  border: 2px solid #444;
}

.primary-text {
  color: #456;
}

.secondary-text {
  color: #333;
}

.info-text {
  color: #11F;
}        

Functions

You can create functions in SASS, which can accept parameters which can also be optional.

// Function
@function set-padding($scale: 1) {
  @return $scale * 12px;
}


.padding-1 {
  padding: set-padding(1);
}

.padding-2 {
  padding: set-padding(2);
}




// Output

.padding-1 {
  padding: 12px;
}

.padding-2 {
  padding: 24px;
}        

Conditionals

SASS also support if else conditions.

// if else Condition
@mixin set-border($width, $shape: 'square') {
  border-width: $width;
  @if($shape == 'rounded') {
    border-radius: 5px;
  } @else if ($shape == 'circle') {
    border-radius: 50%;
  } @else {
    border-radius: none;
  }
}


.square {
  @include set-border(2px)
}

.rounded {
  @include set-border(2px, 'rounded')
}

.circle {
  @include set-border(2px, 'circle')
}




// Output

.square {
  border-width: 2px;
  border-radius: none;
}

.rounded {
  border-width: 2px;
  border-radius: 5px;
}

.circle {
  border-width: 2px;
  border-radius: 50%;
}