Installing SASS to our Project

[00:00 - 00:54] 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 full-stack 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 simply CSS but we are going to move one step further and we will be using SAS. It says CSS with super powers and trust me, it really is. It is a CSS preprocessor which stands for syntactically awesome style sheet. Although it compiles to normal CSS, it gives us a lot of extra features over it , such as the variables. You can use variables as you do in any other programming language.

[00:55 - 02:02] For example, you want to use a color scheme. Rather than remembering the color codes, you can simply store them in a variable 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. Now let's move on to the next SAS feature which is nesting. Another important SAS 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 gets really difficult to manage the code. With the help of nesting, you can simply create a scope using curly brackets and can write children style inside it. Now let's talk about partials. If you're working on a big project, you don 't want a giant SAS file with 1000 lines of code. With partials and imports, you can create a main.sas file which will import all the other SAS files. You can divide it as per your convenience.

[02:03 - 02:56] You can create it feature wise or components and pages wise. It works perfectly well. By doing this, you don't have to import the styling sheet in individual components. Just import it once and it will work for the whole application. Amazing right? Now let's talk about the modules. Suppose you 're writing styles for a component. The code gets picked and you want to include only one file in the main.sas file for that component. What you can do is create a different file for the partial code and use it in the main component's styling file by using at the rate followed by the name of the file. You don't even have to mention the extension. SAS does it for you. Also, it keeps your file short and structured. Now let's talk about mix sense. Mix sense is one of my favorite SAS feature.

[02:57 - 03:55] It's basically a piece of style you can use dynamically. You can think of it as a function, which takes an argument and it does it work accordingly. For example, here's a mix in called theme, which takes an argument dollar theme, which is a color. In CSS, if you want to use same style for some track, you need to write the same code again and again. But using mix sense, you can use it by using at the rate include followed by the name of the mixing. Here is theme. If you want to use the mix in with a dynamic value, you can do that as well using the argument. Now let's talk about extent and inheritance. Another useful SAS feature, which is the extent inheritance. Using this, you can create a piece of code, which is common. And you can share the code with other selectors, which can personalize them using an additional property.

[03:56 - 04:46] For example, the message shared code has border, padding and a color. The selectors, which are using it, are personalizing them by using a unique border color. Success class has a green border and the error class has a red border. You can extend the code by just prefixing the percentage symbol. If you want to use it, use it by writing at the rate extend followed by name of the shared code, which is message shared. Now let's talk about operators. If you love maths like me, you will love the operators which SAS provides. You can do all basic mathematical calculations using addition, subtraction, multiplication, division, and of course, the percentage sign.

[04:47 - 06:00] It gives you more freedom as a front-end developer. I hope by now, you're convinced that using SAS is a good choice. By the way, I'm calling it SAS, but the new version of it, which we are going to use is called SCSS. So keep this thing in mind. When I say SAS, I mean SCSS. Now that we know why SAS is awesome, let's use it in our project. Open the VS code, open the terminal, let's go to our client project and type npm install save dev as it is the dev dependency and we will install node SAS and at types, types, node, SAS. Like I told you before, SAS compiles back to CSS, like TypeScript compiles to JavaScript. That's why we don't need it in production. Hence, we are using it as a dev dependency.

[06:01 - 06:43] Once it's properly installed, let's create a directory inside client, src folder, and call it SAS. Let's create a main.scss file. This is the file where we will import all the other SAS files. I like to divide my project as components and pages. So let's create two more directories called components and another one is pages. This is where we will create our file specific code.

[06:44 - 06:49] I think this is enough for this lesson and I will see you in the next one.