CSS vs SASS vs SCSS
Hello all reading, today I would like to discuss just what the difference is between CSS, SCSS, and SASS. I noticed there’s not a lot of decent blogs out there that get to the point, without going too far in. So, let’s start breaking it down.
What is CSS? CSS stands for cascading style sheets and is a style sheet language used to add style or design to our webpages. It goes hand in hand with Html and Javascript. Ok Jared we all know what CSS is, so let’s move on.
What is a Preprocessor Scripting Language? This can differ depending on the langue, but a general idea is a scripting language, that requires a compiler to transform your code, before compilation. While there are other styling PSLs out there like Less and PostCSS, SASS & SCSS are the standard starting point.
Cons of Styling Preprocessor Scripting Languages: Our long con here, is your typical styles.sass or styles. scss won’t work right out of the box. We need the aid of a compiler, to transform our SASS/SCSS into CSS, because most browsers only accept, HTML/JS/CSS. We can achieve these several ways, in Ruby, there is a Gem, In Node, there is a package, in VSCode there is an extension. There is also the option of third party APIs that can help us with this. A simple trip to the SASS documents can walk you through the steps.
Pros of a Styling Preprocessor Scripting Language: There are quite a few actually, that make the con worth the extra mile. For starters, Nesting is a beast, but we also have variables, partials, and modules to name a few. Another reason to pick up one of these is it is very common in-company use. Since this is an introduction, I will use an online compiler to show some examples.
What is SASS? SASS stands for Syntactically Awesome Style-Sheets. This is the original syntactic language extension to CSS. It gives us the ability to write less code, with greater usability. With the removal of semicolons, and curly braces (as seen below), it makes for a lot less code. While this sounds great, it’s not necessarily better and boils down to personal taste.
What is SCSS? SCSS stands for SASSY CSS. It is a newer extension to CSS, with newer syntax. SCSS was built a lot like CSS to give individuals coming from CSS an easier transition. Cool fact, any CSS style sheet is also a valid SCSS stylesheet. That’s amazing, but again just a matter of taste.
While they do require a bit more work than our standard CSS, we can see how this can be very beneficial, with time and space. If you want to take things a step forward I would recommend looking into Mixins, Includes, Imports, and Extends. Since they’re so close syntactically to CSS it’s surely an easy step. I will leave you with that, and the one you choose is up to you.
