John Durso

Front-End Web Developer

Detroit, Michigan

  • Back to blog

    Use a preprocessor and don't look back...

    February 7, 2018

    Back in 2014 while I was at my first design job ever, a coworker of mine recommended I get involved in SASS/SCSS as soon as possible. That advice didn't really resonate with me until I started used Ruby on Rails, which pretty much requires you to use a preprocessor. After I forced myself to dive head first into SCSS, I noticed that it's really not much different than Vanilla CSS.

    Learning new syntax instead of an entirely new language is something that made SCSS way easier than I anticipated. There are several aspects of SCSS that shaves so much time off of basic, everyday style coding.

    My favorite advantages of SCSS over CSS:

    • Variables

      A must-use if you're coding anything that uses a certain color more than once, especially in large-scale websites.

      In use:
      SCSS Variables
    • Mixins

      Having the ability to use one line of code multiple times instead of three or four is what DRY (don't repeat yourself) code is all about.

      Mixin syntax:
      SCSS Mixins
      In use:
      SCSS Mixins in use
    • Nesting

      A time saver to say the least! Easier code to read, and manage.

      In use:
      SCSS Nesting in use
      Not in use:
      SCSS Nesting NOT in use

    These are just basic examples of how moving on from basic vanilla CSS to SASS/SCSS (or another CSS preprocessor langugage like LESS or Stylus) can benefit your day-to-day coding process. The time you save once you get comfortable with SCSS is worth any of the hiccups you deal with when learning it!

    If you're interested in getting started, check out Derek Banas's SCSS tutorial or check out the sass-lang docs.

    SASS/SCSS docs