Install Sass

nana Jeon
nana Jeon
Sep 7, 2018 · 3 min read

1. Download Node

First of all, download and install Node. I am going to use node-sass to compile Sass.

Node.js is a JavaScript runtime built on Chrome’s V8 JavaScript engine.

Check a node version

$ node -v

2. Install npm

To share and manage these packages, we should have to install npm which is package manager.

$ npm init

After install npm, package.json file would be created like below.

What is a package.jason file?

All npm packages contain a file, usually in the project root, called package.json — this file holds various metadata relevant to the project. This file is used to give information to npm that allows it to identify the project as well as handle the project’s dependencies. -Aug 26, 2011

3. Install Sass compile

At the first time to install Sass in the project file, I tried to write npm install -g sass as the guideline in the Sass website. but I have got the error message like below.

So I found a proper code. It has worked.

$ npm install node-sass --save-dev

After install Sass like above, these files are created like below.

4. Write your own npm Script

Go to the pacage.json file and delete blew code.

And write your won npm script, I call itdev.

$ "dev": "node-sass sass/main.scss css/style.css"

Let’s check it out.

$ npm run dev

As you can see, it works very well.👌

reference video

I’m great thankful for @chodri who created tutorials and posted them on Youtube for free.


That’t all for now❤️

😄

Lastly, I would like to share <FrontEnd30 /> where I learnt many cool front-end techniques.

🎉🎉🎉🎉🎉 Happy Coding Today 🎉🎉🎉🎉

Design & Code Repository

Hello there, I am nana, living in Sydney, multidisciplinary Visual Designer with coding skills; web, graphic and print. Specialized in interactive & responsive UI with accessibility in mind.

nana Jeon

Written by

nana Jeon

UI / Visual designer who loves CSS 🧙🏻‍♀️

Design & Code Repository

Hello there, I am nana, living in Sydney, multidisciplinary Visual Designer with coding skills; web, graphic and print. Specialized in interactive & responsive UI with accessibility in mind.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade