SCSS Basics: Enhance Your CSS Skills

·

3 min read

Hey! This is all new to me. I have finally found the courage to write my first blog. I hope you will enjoy it and, hopefully, earn something new.

What is SCSS?

CSS is a fantastic programming language (no need to panic) that is relatively simple to learn. However, in larger projects, CSS may become cluttered and difficult to maintain. This is where SCSS comes into play, offering its syntax and a variety of useful tools.

Is it SCSS or Sass?

There can be some confusion because Sass also exists, but are they different? Technically, the answer is no. The main difference lies in the syntax. Sass was written in Ruby, so it relies on removing braces, semi-colons and other punctuation symbols. On the other hand, SCSS has the same syntax as CSS but includes all the features that Sass provides. Under the hood, both SCSS and Sass are compiled into the same code and offer the same features.

// SCSS example

$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-stack: 'Helvetica', sans-serif;

@mixin border-radius($radius) {
  border-radius: $radius;
}

.container {
  font-family: $font-stack;
  color: $primary-color;
  background-color: $secondary-color;
  @include border-radius(10px);
}
// Sass example

$primary-color: #3498db
$secondary-color: #2ecc71
$font-stack: 'Helvetica', sans-serif

@mixin border-radius($radius)
  border-radius: $radius

.container
  font-family: $font-stack
  color: $primary-color
  background-color: $secondary-color
  @include border-radius(10px)

SCSS Best Practices

With SCSS, you can write and maintain it in various ways. However, I believe adhering to these best practices will help keep your styling document easy to scale and maintain.

Selector nesting

One of the features provided by SCSS is selector nesting. It is advised to not go beyond three levels deep. If nesting is deeper than that, it is likely the selector is poorly written and overly dependent on the HTML structure, or the selector is too specific.

// Three levels deep nesting
.car {
    color: red;

    .seat {
        width: 50px;

        .material {
            color: black;
        }
    }
}

Keep writing your parent selector when using BEM

In SCSS nesting, typing parent selectors can be avoided, which may appear to be a convenient feature; however, it can lead to issues later on. The codebase becomes unsearchable since the selector names are missing the parent selector. In my opinion, this makes the code harder to read in larger projects.

// Problem
.car {
    // CSS declarations

    &--make {
      // Modifier
    }

    &__seat {
      // Element
    }
}

// Write it like this :)

.car {
    // CSS declarations

    .car--make {
      // Modifier
    }

    .car__seat {
      // Element
    }
}

Useful mixins/functions

Converting px to rem

@use 'sass:math';

@function pxToRem($pxValue) {
    @return math.div($pxValue, 16px) * 1rem; 
}

p {
  font-size: pxToRem(24px); // 1.5rem
}

Control your z-indexes

$z-indexes: (
  'modal': 100,
  'dropdown': 200,
  'default': 1,
  'below': -1,
);

@function z($layer) {
  @return map-get($z-indexes, $layer);
}

div {
  z-index: z('dropdown');
}

Media queries manager

$breakpoints: (
  'sm': (min-width: 640px),
  'md': (min-width: 768px),
  'lg': (min-width: 1024px),
);

@mixin respond-to($breakpoint) {
    $raw-query: map-get($breakpoints, $breakpoint);

    @if $raw-query {
      $query: if(
        type-of($raw-query) == 'string',
        unquote($raw-query),
        inspect($raw-query)
      );

      @media #{$query} {
        @content;
      }
    } @else {
      @error 'No value found for `#{$breakpoint}`. '
           + 'Please make sure it is defined in `$breakpoints` map.';
    }
}

div {
  width: 200px;

  @include respond-to('sm') {
    width: 100px;
  }
}

References