The Not-So-Hidden Gems of Styling with SASS

What’s the difference between CSS and SCSS?

CSS is the styling language that your browser understands and uses to style web pages. SCSS is a special type of file for SASS, a program written in Ruby that assembles CSS style sheets for a browser. SASS adds lots of additional functionality to CSS like variables, nesting and more which can make writing CSS easier and faster. SCSS files are processed by the server running a web app to output (or compile) a traditional CSS that your browser can understand.

What’s all that mean?

In a nutshell, when you style using CSS, you have to remember hex colors, margins, and countless other attributes, and working around that can get complicated and time-consuming. Enter SCSS. When you style with SCSS, you have the benefit of applying attributes to a variable and calling that variable into a style, or set of styles.

Nesting is fun, too, and it keeps you organized! For example, you can “nest” a series of “sub-styles” within the header. Instead of having a slew of header styles floating all over the style sheet, you can “nest” the styles. When the web app compiles the SCSS into CSS, what you get is a streamlined and organized CSS file. It keeps things linear and easy for the next developer to read and follow.

Screen Shot 2015-12-29 at 11.35.05 AM

Screen Shot 2015-12-29 at 11.34.55 AM

Getting organized and staying organized not only speeds up the styling process, it benefits the future of the website by making it easy for another developer to make tweaks, updates, and changes to the overall aesthetic of the website.

With variable and mixins, you’re able to set up repeating attributes into one “style” and use that throughout your styling process. It’s like CSS within CSS.

If you need to change a margin for multiple styles, you need no longer change it in a number of places within the stylesheet. You simply change the attribute in the variable or mixin and the compiler will do all the heavy lifting.

I encourage you to read more about SASS and SCSS here.

Happy styling!