Sass/SCSS Installation – Getting Started

What is SCSS/CSS?

SCSS is the updated version of Sass which prefers a CSS like syntax over indented syntax. SCSS stands for Sassy CSS.

SCSS is a CSS preprocessor which aids in the process of writing CSS saving valuable time and staying organized.

CSS Alone:
body {background-color:#fff;}
h1 {color:#000;}
h2 {color:#000;}
h3 {color:#000;}

If you needed to change the color of h1, h2, & h3, you would have to make the changes manually which could become a headache.

With SCSS:
body {background-color:$primary-color;}
h1 {color:$secondary-color;}
h2 {color:$secondary-color;}
h3 {color:$secondary-color;}

SCSS is similar to CSS. The file would be named stylename.scss and once processed, it will create a new file called stylename.css

After SCSS Processing:
body {background-color:#fff;}
h1 {color:#000;}
h2 {color:#000;}
h3 {color:#000;}

This would be the processed .CSS file.

I’ve only scratched the surface here for my own personal reference. I would recommend visiting for further explanation.

Installing SCSS:

  1. Install Ruby
  2. Verify Ruby installed by opening Command Prompt (Windows Key+R, then type CMD) and typing ruby -v. If installed correctly a version number will be displayed.
  3. Next install Ruby Gems
  4. Verify Gem installed via Command Prompt gem -v
  5. Install SCSS
  6. Verify SCSS installed via Command Prompt scss -v

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.