Follow this guide to learn how to install Node.js and SASS/SCSS, as well as how to implement SASS in your next project!
What is SASS? What is SCSS? How do they differ from normal CSS?
SASS (Syntactically Awesome Style Sheets) is a preprocessor scripting language which is built upon SCSS (Sassy CSS). It uses a strict indentation structure, and therefore does not require the opening or closing of brackets, or the use of semicolons at the end of each line. SCSS introduces many incredibly useful features such as global variables, and smart importation which disregards the need for file extensions. I still strongly encourage the user to read the full documentation, found here: https://www.npmjs.com/package/node-sass
These languages are both supersets of CSS, which offer the same features, but are syntactically different, in that SASS uses an indentation structure, and SCSS uses syntax reminiscent of standard CSS syntax.
*note that node-sass is deprecated and while it will still receive patches, it will no longer receive new features. The newest version is known as Dart Sass, and an introductory guide is forthcoming.
What is Node.js? What is npm?
For those of you that are unaware, Node.js is “an asynchronous event-driven JavaScript runtime” that is designed to build scalable network applications (source: https://nodejs.org/en/about/). npm (Node package manager – https://www.npmjs.com/) is “the world’s largest software registry” (source: https://docs.npmjs.com/about-npm ) which comes packaged with the installation of Node.js, and is used to add useful packages to server-side JavaScript programs.
Install and set-up Node.js
On Windows this is slightly more complicated than it is with Linux and Mac, but still entirely doable. To do this go to: https://nodejs.org/en/download/ (it should look like the image below), and download the appropriate file for your operating system.
The initial installation shouldn’t take long, however the installation of “Install Additional Tools for Node.js” may take much longer on Windows, as well as the installing stalling quite often. The installation requires that you shut down any and all other programs prior to installation. If the installation fails, you can find the executable under Node.js in the start menu.
To check that everything is installed correctly you can type “node –version”, after which you should receive a response akin to 14.17.0, and “npm –version”, after which you should receive a response akin to 6.14.13 (both numbers signifying the currently installed version of the respective program).
Installing Node SASS
After you have done this, navigate to the directory of your project in powershell, and type “npm init”. This will initialize a package.json file in your project folder, as well as allowing you to fill in some widely used criteria in that package.json file. After you have done this type, “npm install node-sass” into powershell. This command will download the node-sass package to your project directory, allowing you to write in SASS.
Now that SASS is installed in your project directory, open the aforementioned package.json file and change the seventh (7th) line from
“test”: “echo \”Error: no test specified\” && exit 1”
to
"sass": "node-sass --watch scss -o css"
“sass” references the command, “node-sass” references the package itself, “–watch” is optional, however this allows the command to watch all changes to the sass file while the command is running, and prevents you as the user from continuously running the command to transpile SASS to CSS. “scss” refers to the name of the folder in which all of your sass or scss files will lie, and “-o css” signals the program to transpile the sass files into counterpart files within a file named css.
This will let you run the “npm run sass” command in powershell, which will automatically transpile your sass code to css code while it is running.
After you have run the above command, your input.scss should have transpiled into CSS, and moved to a file of the same name with the .css extension within your CSS file.
Alternate Methods of Implementing Node-SASS
Alternatively, you can navigate to the head directory in which you have installed Node.js, and run “npm install -g node-sass”. After this, follow the above steps for initializing a package.json file, and downloading node-sass into the local project directory. When editing the aforementioned package.json file change the same line as mentioned above to
"sass": "node-sass -w scss/ -o css/ --recursive"
This removes the need for specific CSS and SCSS files, and is file specific regarding the transpiling of code, however, it requires that you manually enter “node-sass input.sass output.css” (replace input.sass and output.css with your respective SASS and CSS file names) every time you would like to transpile SASS to CSS.
*This is the method I personally use, and therefore the method that I recommend, however, I am not the authority on the matter, and I leave the choice up to the reader.
Congratulations! Node.js and SASS are now at your disposal, enjoy!
Don’t forget to check out my other guides here: https://www.cameronsjordan.com/category/guides/