Preprocessor Sass/SCSS to CSS compilation transformation

Let's briefly take a look at how to convert sass or scss into css and use it in the NodeJS environment.

When is conversion necessary?
In general situations, it is not necessary as it can be automatically converted during the transpiling or bundling process in most building processes. However, there may be rare situations where manual building is required, or when code from a previously worked on CSS preprocessor file needs to be converted to CSS.


One. Installing sass module.
To perform a conversion, you basically need to use the sass command. To use sass as a cli, you install the node package globally.

Once the installation is complete, try entering "sass" on the command line. Verify if the message below appears.


Two. Using commands in command line.
Once the installation is complete, checking the conversion or CSS code is simple. First, let's briefly learn about a few options as shown below.

-w // If the file has been changed, automatically detect and convert it.
-c // Using color in terminal or Unicode.
-h // Check for help.

There are options like above. In the case of watch, it is very useful as the file that is automatically updated every time the file changes.

! View example code for SASS conversion.

Let's look at a brief example. First, here is the sample code.

Filename : test.scss

@ Check for only code
The method to only check for code changes made in CSS is to enter the SCSS or SASS command and file name in the CLI.

If we check the converted result, we can confirm that it has been converted properly. This time, let's try creating a new file called test2.css..


@ Create a new css file
Creating a new file is simple. You just need to add a new file name after the existing file name.

This time, a new file named test2.css has been created without being displayed. Let's check its content.

Upon examining the generated files, they are identical. However, it can be noted that there are comments added at the bottom.


We have learned the method for converting sass/scss files to css in a brief manner up to this point.