12 Weeks of UX Engineering - Day 1 (Learning SASS)

There’re 2 syntaxes supported by SaSS

  1. Sassy CSS Syntax (SCSS)
    @mixin button-base(){
        @include typography(button);

        display: inline-flex;
        position: relative;
        height: $button-height;
        border: none;
        vertical-align: middle;

        &:hover { cursor: pointer }
    }
  1. Indented Syntax (SASS). No curly brackets or semi columns. I hate it already

CSS Variables

Just like CSS variables, we use SCSS variables like so

    $primary-color: indigo;

    body {
        background: $primary-color;
    }

Maps

Maps are groups of key-value pairs. We can think of them as a group of constants we only want to edit once.

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

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

Nesting CSS

We can nest style declarations in CSS like so…

    .main {
        font-weight: map-get($font-weights, bold);
         
         .main__text {
             font-weight: map-get($font-weights, regular);
         }
    }

But this outputs

    .main {
        font-weight: map-get($font-weights, bold);
    }
    .main__text {
        font-weight: map-get($font-weights, regular);
    }

To also include the class name of the parent, we modify the selector to have #{&}__text instead of &__text. This now outputs

        .main {
        font-weight: map-get($font-weights, bold);
    }
    .main .main__text {
        font-weight: map-get($font-weights, regular);
    }

Partials

Partials are created with a leading _. SCSS doesn’t compile them to CSS, it rather ignores them and packs them together into other SCSS files. After defining partials, we use them like so

    @import './partial'

    // Content of the file

Functions

We can get some functionality by using CSS functions

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

Mixins

Mixins are just like functions except they’re group of CSS declarations that we’d want to reuse.

    @mixin flexCenter {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .main {
        @include flexCenter;
    }

We can also pass arguments to mixins. For example

    @mixin flexCenter($direction) {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: $direction
    }

    .main {
        @include flexCenter(row);
    }

The difference is that functions should be used to return computed values while mixins should define styles. Here’s another mixin to implement dark mode. It combines if statements with the lighten and darken scss functions

    @mixin theme($light-theme: true) {
        @if ($light-theme) {
            background: lighten($primary-color, 100%);
            color: darken($text-color, 100%);
        }
    }

    .light {
        @include theme(true)
    }

Operations

We normally use calc in CSS. With SCSS, we just do the calculations (without the calc). One downside to SCSS calculations is that all operands must be in the same unit.

    .selector {
        height: 200px + 10%; // 🙅‍♀️
    }

This is because SCSS ends up as regular CSS and knows nothing about the browser dimensions.