DEV Community

Cover image for How to add SASS to your project ? πŸ€”
Akram A. Abdelbasir
Akram A. Abdelbasir

Posted on • Updated on

How to add SASS to your project ? πŸ€”

I added the course road map.

Course Roadmap


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.

Sass files should be compiled to CSS ones.

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

#1. Command Line

Git illustrate how to install sass

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
Enter fullscreen mode Exit fullscreen mode

2-Install sass

npm install -g sass
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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');
    }
}

Enter fullscreen mode Exit fullscreen mode

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");
}
Enter fullscreen mode Exit fullscreen mode

#2 VS Code Extensions

live-sass is one of the most efficient VS code extensions that is used in sass compilation.

live sass vs code extension


#3 Online Compilers

There are some online tools, such as sassMeister that compile Sass without any installs.

sassMeister online compilers

Now, it's time to go deeper with sass. In the next article, we will learn more about sass syntax.

Top comments (10)

Collapse
 
adkins profile image
Devid Adkins John

Hi Akram, Thanks a lot for this series.

I receive an error message that reads,

cannot find module 'node-sass'

when I attempt to install Node-Sass.

Collapse
 
strapi_51 profile image
Strapi Vander

I experience the same issue, too.

Collapse
 
ak_ram profile image
Akram A. Abdelbasir

@adkins @strapi_51

Hi Devid, Hi Strapi, I want the best for you both.Β 
In this video, you can search for the issue. I hope it's beneficial.

Good day, everyone. πŸ™Œ

Collapse
 
abi0l9 profile image
Monsur Oyedeji

Node-sass has deprecated. You can do:

npm I sass

to get it working.

Thread Thread
 
ak_ram profile image
Akram A. Abdelbasir

Hello, Monsur! How are you doing?

Your sharing of this knowledge is greatly appreciated. The article was updated. πŸ™Œ

Thread Thread
 
fu91t1v3 profile image
⚑Abiola⚑

I'm doing good, you're welcome.

Collapse
 
tovar_99 profile image
Jorge Tovar

Bro, Your teaching style is effective; it's direct and concise. I love it.

Collapse
 
ak_ram profile image
Akram A. Abdelbasir

I appreciate your viewpoint. ❀

Collapse
 
bongers profile image
Chris Bongers

Great πŸ’ͺ

Collapse
 
ak_ram profile image
Akram A. Abdelbasir

❀πŸ’ͺ