One Pager: Sass Tutorial for Beginners

In this post I share the knowledge I got from the video below. These are notes that helped me learn, not a transcript. Credit goes to freeCodeCamp.org and codeSTACKr.

Variables in CSS vs SCSS:

/* CSS */
body {
  --ocean-color: blue;
}

div {
  background: var(--ocean-color);
}

/* SCSS */
$ocean-color: blue

div {
  background: $ocean-color;
}

Map of values:

/* SCSS */
$font-weights: (
  "regular": 400,
  "medium": 500,
  "bold": 700
);

body {
  font-weight: map-get($font-weights, bold)

No nesting in CSS vs Nesting in SCSS

/* CSS */
body {
  width: 80%;
}

body p {
  color: white;
}

/* SCSS */
body {
  width: 80%;

  p {
    color: white;
  }
}

& (ampersand)

& (ampersand) is a shortcut for "insert name of parent class here". The following are equal.

/* SCSS */
.container {
  width: 80%;

  .container-paragraph {
    background: black;
  }

/* SCSS */
.container {
  width: 80%;

  &-paragraph {
    background: black;
  }

Using just the & (ampersand) compiles (translates) this sass code:

/* SCSS */
.container {
  width: 80%;

  &-paragraph {
    background: black;
  }

...into this css code:

/* CSS */
.container {
  width: 80%;
}

.container-paragraph {
  background: black;
}

#{&} Interpolation

Wrapping the & in #{} (a process called interpolation) translates this sass code:

/* SCSS */
.container {
  width: 80%;

  #{&}-paragraph {
    background: black;
  }

...into this css code:

/* CSS */
.container {
  width: 80%;
}

.container .container-paragraph {
  background: black;
}

Partials (subfiles)

To break up your SCSS into subfiles you can name them like "_filename.scss". These subfiles are called partials. Then import them into your main file using:

/* SCSS */
/* No _ or .scss needed */
@import "./filename";

Functions:

/* SCSS */
$font-weights: (
  "regular": 400,
  "medium": 500,
  "bold": 700
);

/* Instead of doing this: 
/* body { font-weight: map-get($font-weights, bold) } */

@function weight($weight-name) {
  @return map-get($font-weights, $weight-name);

body {
  font-weight: weight(bold);

Mixins:

/* SCSS */
/* Define it once */
@mixin flexCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Use everywhere */
.container1 {
  @include flexCenter;
}

.container2 {
  @include flexCenter;
}

Mixins can take arguments:

/* SCSS */
/* Define it once */
@mixin flexCenter($direction) {
  display: flex;
  justify-content: center;
  align-items: center;
  direction: $direction;
}

/* Use everywhere */
.container1 {
  @include flexCenter(column);
}

.container2 {
  @include flexCenter(row);
}

Mixins can contain JS-like logic:

/* SCSS */
@mixin theme($light-theme) {
  @if $light-theme {
    background: white;
    color: black;
  } @else {
    background: black;
    color: white;
}

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

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

Mixins can wrap a media query. @content is short for "everything defined when the mixing is called":

/* SCSS */
@mixin mobile {
  @media (min-width: 600px) {
    @content;
  }
}

body {
  @include mobile {
    display: flex;
    flex-direction: row;
  }
}

@extend

Extend styles from one class to the other using @extend:

/* SCSS */
.main {
  #{&}-paragraph1 {
    background: blue;

    &:hover {
      color: yellow;
    }
  }

  #{&}-paragraph2 {
    @extend .main-paragraph1;

    /* Optionally override anything being extended */
}

Calculations in CSS vs SCSS:

/* CSS */
body {
  width: calc(80% - 40%);
  /* mixing % with px works */ 
}

/* SCSS */
body {
  width: 80% - 40%;
  /* mixing % with px DOES NOT work */ 
}

The rest of the video shows the building of a real world example, a portfolio site. Check it out for more!