Differences Between Sass and Scss
So far we have been through a full overview of SCSS, walked through the preprocessors step so you can see what code was written and then we looked at how it got translated into something the browser could understand.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

There is something that might be a little bit confusing whether it's in some type of coding interview situation or just in general as reading documentation. There are actually two different types of SASS syntax. There is SASS and then there is SCSS. Now technically both of those are called SASS which makes for some kind of confusing component when you're first starting to learn it. Here we are going to talk about the differences there are between the two and what we are going to be using for the course.

SASS was the original version. It does not look anything like CSS and it cares about things such as indentation. When using SASS all of your code has to be segmented and it has to have the right number of spaces right in front of each set of style definitions. It doesn't have curly braces, it has plus signs and equal signs all over the place. If you've ever worked with Hammill or slim, you may notice it looks very similar to that type of setup.

What you will see more often is SCSS and that's what we're going to be using in this entire course. There are many reasons why SCSS is used so widely. One is that it looks exactly like CSS. Also, it uses curly braces and semicolons to end each style definition. This makes it much more familiar and the learning curve is also much lower. Also if you want to write just pure CSS code an SCSS file will still process it where the original version of SASS would actually throw an error.

I wanted to go over these differences due to the fact that during your research you are going to run into both syntax. Without this brief overview, it may seem very confusing.