How to compile your SASS code to CSS from the command line

Hello there

In this tutorial, I'll share how to compile SCSS files to CSS using only the command line and no external compilers or task runners. Let's dive into it...

Table of content

1. Compiling a single Sass file to CSS.
2. Compiling multiple Sass files to CSS.

Note: This course requires you to have prior knowledge of HTML and at least intermediate knowledge as neither will be covered in this tutorial.

Before we begin you need to have Nodejs and npm installed on your local computer, if you don't have Nodejs installed, install them here: .

PS: NPM comes pre-installed with Nodejs so you don't need to install it separately.

1. Compiling a single Sass file to CSS.

Open the terminal on Vs code, to initialize npm in your local folder run:

npm init -y

This creates a package.json file that contains information about your project.

Once NPM is initialized install Sass globally on your local machine by typing

npm install -g sass

Once you've installed Sass globally check the version by typing

sass --version

Next, create a sass file, input.scss, open the terminal
and run the following command

"sass input.scss output.css

This starts the compiler which outputs the compiled sass code from into output.css. To watch for changes to your code and compile on saving the file add the watch flag to the command like so:

sass --watch input.scss output.css

This creates a CSS file containing the compiled sass code.

2. Compiling multiple Sass files to CSS.

Suppose you're working on a large project that requires you to write a lot of style rules and writing all sass code in 1 file can be bulky you can split your code into multiple files and then compile them all at the same time. To do this create a folder named sass or scss in your project for storing all your sass files and then create a CSS folder where the compiled CSS code files will be stored. Then in your terminal run the following command

sass --watch scss:css/

This starts the compiler which compiles all sass files in the scss folder and outputs the compiled code into the CSS folder.

Thanks for reading.

Adios!