Installing Sass to our project#

Introducing SASS#

Welcome back. In this course, we are not using any styling library like semantic ui or bootstrap, because that's not what you usually use in a real world project. If you want to be a fullstack developer, you should know how to write your own css. Every project is unique and you don't want your application to look like some other application right? We could have used simple css, but we are going to move one step further. We will use Sass, and it says "css with Superpowers", and trust me, it really is. It is a CSS Preprocessor which stands for Syntactically Awesome Stylesheets. Although it compiles to normal css, it gives us a lot of extra features over it, such as:

Variables:#

You can use variables as you do in any programming language. For example, you want to use a color scheme, rather than remembering the color codes. You can simply store them in variables as color 1 or color 2, and you can use them anywhere in your project globally. Another example can be of a specific margin or any styled border you want to give. The next SASS feature is:

Nesting:#

Another important SASS feature which I absolutely love and something I use all the time is the nesting. Suppose you're writing a large component which has lots of children, it would get really difficult to manage the code. With the help of nesting, you can simply create a scope using curly brackets, and write children's style inside it.

Now, let's talk about Partials:

Partials:#

If you're working on a big project, you don't want a giant scss file with 1000 lines of code. With partials and imports, you can create a main.scss file which will import all the other scss files. You can divide it as per your convenience. You can create it feature wise or components and pages wise; it works perfectly well either way. By doing this, you don't have to import the styling sheet in individual component. Just import it once, and it will work for the whole application. Amazing right?