How to add SASS to your project ? 🤔

#scss #css #design #webdev

I added the course road map.

The previous post explained what SASS is and why it's preferable to use it rather than CSS. Right now, we are about to learn how to include it in our project.

Browsers won't understand sass files since, as we all know, they only understand HTML, CSS, and JS. Therefore, in order to make it simple for browsers to grasp, we need to compile Sass scripts into CSS files.

In the next few lines, we will discuss 3 methods to compile Sass to Css

#1. Command Line

One of the simplest ways to compile Sass into CSS is by using the sass package.

sass can be installed on Windows, Mac OS X, Linux, and Unix operating systems. It can also be installed through the Node Package Manager (NPM). The installation process for both methods is quite simple.

To install sass using NPM, we need to install node.js first on our machine, then open the node terminal and follow these steps:

1-Run node --version to confirm that the node has been set up properly.



node --version
> Expected: v16.16.0 or any other version

2-Install sass



npm install -g sass

This will download the package from npm's repository and install it globally on your system.

3-Watching sass file



sass -w style.sass style.css

This will automatically compile style.sass file to style.css file

Congratulate 🎉 you have setup sass successfully.

Now, if you copy & paste this Scss code in your local Scss file



$socails : facebook twitter youtube;
@each $item in $socails {
    .#{$item}-img{
        background: url('../images/image-#{$item}.png');
    }
}

it will be compiled to



.facebook-img {
  background: url("../images/image-facebook.png");
}

.twitter-img {
  background: url("../images/image-twitter.png");
}

.youtube-img {
  background: url("../images/image-youtube.png");
}