Since its inception, CSS has grown very slowly. The syntax is very simple to understand, but it doesn’t offer a lot of flexibility and is only now beginning to add logic such as media queries.
Files can grow to be up to thousands of lines of code with various commented sections. To overcome this hurdle, you may have multiple style sheets and then have your production server minify and concentrate these files. It gets even more difficult when you want to change a primary or secondary color. You’ll have to use the classic CTRL + F to find and replace all hex values. Talk about a headache!
This is where SCSS comes into play.
Well, first we have to talk about CSS pre-processors. A pre-processor basically takes code and then converts it into CSS code that the browser can understand. There’s various pre-processors available such as LESS, but SCSS is currently the most favored solution available. SCSS stands for Sassy CSS.
If you ever decide to learn more about SCSS you’ll also hear about SASS. SASS is the older version. It’s still supported for those who prefer to use it. SCSS is the newer version and supports a variety of features. The syntax is also more readable than its predecessor. We’ll be using SCSSthroughout the rest of this article.
Alright, so now that you know what SCSS is, let’s get our hands dirty by actually using it and seeing it’s benefits first-hand.
Setting up SCSS will be covered at the end of this article. For now, we’ll be using an online editor to save time and test the waters straight away! CodePen is an excellent online service that lets you write code in the browser. The best part is that it’s free and fully supports SCSS! You can create a new pen, but I suggest you start with one I already created for you. http://codepen.io/jaskokoyn/pen/AXdVVb
SCSS is just CSS with a few enhanced features. Meaning you can write regular CSS code and it’ll work! The pen I provided loads bootstrap and then I wrote some CSS to align some buttons in the middle. So, where does SCSS come into play?
At the very top I created a variable named $bg_color. A variable is just a placeholder for data. The data can be anything. It can be a number, text, and/or colors (RGB, Hex, HSV, etc). Every variable must start with a dollar sign ($) followed by the name.
In our case, I assigned the value #ddd. Now I can use this value anywhere in my CSS. For body I defined a background and set its value to our variable. When SCSS compiles the code, it’ll replace the variable with the actual hex value and output CSS.
This is the most basic example of SCSS works. It may not seem much at first, but it’s definitely maintainable. You could have a variable represent a color for various locations on your site. If you ever want to change the color, then you simply change the value of the variable. You no longer have to search through thousands of lines of code or various files just to change one color. SCSSwill take care of that for you.
SCSS has so much more to offer. We just touched the tip of the iceberg. You can use loops, functions, and even minify your SCSS for faster performance. You can learn more about SCSS at the official website http://sass-lang.com/
