We are going to take a high-level view of what SCSS is actually doing so that we can see there really is nothing magical about it. It simply is one type of markup language that can be converted into something much more complex.

If you have worked with other types of libraries like JQuery or Angular which are JavaScript libraries and frameworks, then those are very similar to SCSS in the sense that they sit on top of another language, and then they are converted into something that is much more complex.

That's essentially what SCSS does every time we use it, regardless of how complex it may be. Technically all of this could be performed with CSS. In regards to the output, we use SCSS so that we can streamline our processes and so we can better organize our code.

So right here we have a Code Pen. We are going to be using Code Pen throughout this entire course.

On the left we have HTML, and on the right is the SCSS file. If I just put this into a normal CSS file, the browser would not interpret it and it wouldn't give us the desired functionality.

It would throw an error because CSS doesn't know what a mixin is, it doesn't know what a variable is and it doesn't know what to do with the included statement. All of these are elements of SCSS. All of these things are going to be converted into pure CSS because that's what browsers are able to render.

Now to see what this looks like in CSS you can click the right-hand side dropdown and view compiled CSS.

Here we can see a completely different set of styles. One is called error and the other is a success. Notice there's a lot of duplication. We have an identical width, height, text alignment, font size, font border, border-radius, and margin. The only big differences we see are the colors.

If we decided to write this in pure CSS we would have quite a bit of duplication. This would be a messy way to write it due to the fact that if we wanted to make a change we would have to change every instance.

If we go back and look at what we created you can see that we don't have any of that duplication inside of our SCSS file. We simply have this mixin. At this point, don't worry about the syntax, right now we are just looking at what occurs and just walk through the fact that SCSS and the browsers by alone would not be able to know what we're doing. You wouldn't be able to define two different classes like this.

The other thing that you may notice is that the entire concept of a mixin was skipped over. When the process starts, it ignores the mixin. It simply takes all of that code and it adds it into a master CSS preprocessed file, then sends it to the browser. So now the browser doesn't care about duplication.

If we wanted to add a new type of style, we have success and error, but I want to have a warning. We can simply create this new class and change the background color, the font color and then the border if we want it to be different.

If we go back and view the compiled CSS, you can see now we have our warning class and it has all of those elements.

As you start going through the course, one thing that I'll definitely recommend for you to do is to play around with switching between viewing the SCSS file and what it compiles to. This will allow you to learn a lot more about what is going on behind the scenes with CSS, especially when we get into more complicated topics such as nesting and nested pseudo selectors. Those are things that if you're brand new to front end development it may be a little bit intimidating. Using SCSS and seeing the CSS version will drive home the importance and functionality that SCSS provide us.