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:
$primary-color:#FFF;
$secondary-color:#000;
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 leveluptuts.com for further explanation.
http://leveluptuts.com/tutorials/sass-tutorials/1-how-install-sass

Installing SCSS:

1. Install Ruby http://rubyinstaller.org/
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 rubygems.org
4. Verify Gem installed via Command Prompt gem -v
5. Install SCSS sass-lang.com
6. Verify SCSS installed via Command Prompt scss -v