How to run Sass in the Command Line
(And how to use NPM as a Task Runner!)
For those interested in learning to build websites, or those starting their journey to become front-end developers, learning Sass or SCSS can be an exciting step. Sass, and other CSS preprocessors, can allow you to speed up writing code, and can give you a taste for the type of logic used in JavaScript to build functionality by writing functions, conditionals, and loops to output the CSS that you want. In this article, I will be using “Sass” to include both Sass and SCSS — the two terms refer to syntax patterns and for our purposes are essentially interchangeable.
An aside — I’m a Mac user, but these instructions should work for both Mac and PC. Also, this article assumes the user knows basic commands for navigating folders and directories in the command line — if not, look into “pwd”, “cd”, and “ls”.
However, as browsers do not support Sass syntax, this comes with some more complicated concepts, like compiling your Sass to browser-readable CSS. A number of tools exist to make this easy — in my personal experience, I was taught to use Prepros to easily compile my Sass. But I grew weary of this for reasons discussed below (any user of Prepros will know where I’m coming from).
Why Prepros?
Prepros provides a very user-friendly Graphical User Interface (GUI) to compile your Sass automatically, along with some extra features like minification and automatic auto-prefixing. The downside is that Prepros exists as a paid program, and while available for free, the program will intermittently give the user pop-ups prompting one to purchase the program. (I call this “hassleware”, also known as “guiltware”). While the idea that the makers of useful software should be compensated for their work makes absolute sense to me, this is not ideal, and thankfully there are other ways to compile Sass without annoying popups.
Command Line Sass Step One — Installing Node
Using the Command Line / Terminal can be an intimidating step for a beginner, but with some copy & pasted instructions, you can get up and running with Sass in the command line!
The first step is to install Node.js. Node is a JavaScript framework that allows you to write JavaScript code in your terminal, to gain access to features that JavaScript doesn’t normally do — in this case, reading and writing files on your local drive. (For those who are curious, Node is essentially a C++ program that is wrapped in JavaScript — thus you can write JS and under the hood, C++ is executed.) You can download Node right from their website and install from the zipped file as you would any other program. For those who already have Node installed, type node -v in your terminal to see which version you have.
Node comes bundled with a package manager called npm, which we’ll be using to download Sass (and, in the last step, to run Sass as well!)
Installing Sass
Once you’ve got Node installed, you can use npm to download the Sass package.
In your terminal, type npm install sass -g. This tells the npm package manager to find and download the Sass module, and the “-g” (or “-global”) flag indicates to install it globally — that is, accessible from anywhere on your machine. Oh wait — are you getting an error? One that says you do not have sufficient user permissions? That’s ok and to be expected! Type sudo npm install sass -g and, after entering your computer’s user password, you should see the package downloading. (“Sudo” is a keyword that overrides those permissions”). A note — you do not have to be in any specific directory or file folder to do this!
Running Sass in the Command Line
Now that Sass is installed globally, you can compile your Sass directly from the command line! To start, open your terminal and navigate to your project folder. (Note: an easy way to do this in VS Code is to open your folder, and use VS Code’s built-in terminal by typing “Control + `“ (that’s the little key under your Escape key). Type “pwd” (aka “print working directory” to make sure you’re in the right spot.
Once you have your Sass files written, you’re ready to go! The command to run Sass is sass --watch input.scss output.css where ‘input.scss’ is your main Sass file (with all your partials imported) and ‘output.css’ is your target file that will be created.
File paths matter here — in the above example, my Sass file live in a Sass folder, and my target folder is ‘styles’. In this example, when I am in my main folder in my terminal, my command would be sass --watch sass/styles.scss styles/styles.cssYou’ll note that I don’t currently have a CSS file — the first time you run Sass, the file will be automatically created!
When I run my command, I’ll see the above result! You can see my CSS file has been created (along with another file I’ll talk about next). In the terminal, you can see that Sass is now watching for changes — any time you save any of your Sass files or partials, Sass will re-compile to the CSS file you’ve specified! To stop it at any time, press Control-C, and to re-start just enter your Sass command! But don’t forget to refresh your browser to see the changes you’ve made!
The Source-Map File
But… what’s’ that ‘style.css.map’ file doing there? This is called a “source map”, and when debugging Sass this file is essential. Because your Sass partials are all compiled into one giant CSS file, the source map keeps track of which Sass partials a certain piece of code is compiled from. When you inspect your code in your browser dev tools, you’ll be shown not only which line of your CSS file the inspected code comes from, but also which Sass partial it’s located in — very helpful when you want to make changes!
Running Sass in the command line can get even easier. After the initial compile, if you’ve stopped Sass and want to re-start it in the same session, you can press the up arrow in your command line to see your past commands. But what about when you close your editor and re-open it? If you have many nested folders, typing out the file paths can be a pain.
Using npm as a Task Runner
A “task runner” is a little program that runs snippets of code for you, so that you can chain together actions and automate your output. You may have heard of Gulp, Grunt, or Webpack, build tools which are great if you are running a framework like React or have a complex app. However, for a simple website, they can be overkill. Luckily, npm can also function as a task runner to save you typing out lengthy commands.
To set this up, in your main directory, type npm init -yto initialize npm. (you can also just type npm init and manually answer the setup questions, but it’s unnecessary. The ‘-y’ flag answers ‘yes’ to all questions.) You’ll see a file called “package.json” has been created — this file contains all the info you’ve just provided, as well as snippets of code you can add.
The “scripts” part is what we’re interested here — this is where you can specify the commands you want to run, and the nickname you want to use for it. Ignore the ‘test’ script, but after the final quotation, type a comma and then start a new line.
To add a new script, you can follow the pattern of the “test” command. We’ll use the keyword “start” (in quotations!) followed by a comma, and then (also in quotations) the exact same code you’d type in the command line to start Sass.
Above, you can see the package.json file with my Sass command from above! Now, instead of typing out the lengthy command with my file paths, I can simply type npm initinto my terminal and npm will look in my package.json file, see the code with the ‘start’ keyword, and run it!
In Conclusion
Following these steps should get you up and running with Sass, and hopefully get you a little more comfortable with your command line or terminal! While Sass provides a source map, it does *not* minify or auto-prefix. If you want these features, you can look into other npm packages, or use Prepros for your final compile. Or, if you want to chain it all together, look into a more complex task runner like Gulp (though the learning curve from npm to Gulp can be a steep one).
Good luck and happy coding! If you have any comments, please drop me a line! I can be found on Twitter @fakelauralouise and on the web at lauraloui.se (and yes, my portfolio site was built with command-line Sass!)