Settings

Install the module

To build a sass file, follow these two steps. The first step is to install the Sass module, followed by compiling the Sass files into CSS. There are several approaches you may use depending on your frontend framework of choice, because some frameworks will automatically compile your sass while others will not.

The first step is to install the Sass module.

You will need a package manager to install the sass module ( like npm or yarn) and also Node.js . You may run the following scripts to see if you have these packages installed:

node -v; 
npm -v;

Code copied to clipboard !

If you don’t already have them, you may get them here:

In most circumstances, you must install the Sass module in the project as follows:

npm i sass;

Code copied to clipboard !

Compile the sass files

There are two techniques for compiling the files. The first is to compile the sass files into CSS, and the second is to compile the sass files using the chosen framework.

1. The first way (compiling the sass files manually into CSS) may be used wherever. To build a file, enter the following code in the terminal:

sass source/stylesheets/index.scss build/stylesheets/index.css;

Code copied to clipboard !

Note: If we run this command and don’t already have an index.css file, the file will be created for us without further action from us. If you execute this command and we have the file, the compiled code from the scss will take the place of the css. Any CSS modifications that are only in the css files and not the scss files should be saved in a temporary file. See

temporary files.

Explication:

Assuming this is how the project looks, we want to convert index.scss into index.css.

As a result, we have the instruction below. Because “sass” is the name of the command, it starts with that word. The other 2 arguments specify where we get the sass file and where we want to compile it .

Hence, in order to compile, import the Sass file similarly to how you imported the CSS file, and the framework will take care of the rest.

Using the —watch flag, you can additionally watch certain files or folders. The watch flag instructs Sass to monitor your source files for modifications and re-compile CSS after each Sass save. You would simply add the watch flag to your command, like in the following example, if you wanted to monitor (rather than manually build) your input.scss file:

sass --watch source/stylesheets/index.scss build/stylesheets/index.css;

Code copied to clipboard !

What happens if you manually compile the file and the framework does the same?

Types of css files

Sass has the ability to produce three different kinds of files.

[file-name].css

Is the file with all the compiled code, together with the comments, spaces, and order.

[file-name].css.map

By default, a file with the “.map” extension is created when you compile a Sass file into CSS. A CSS source map is a file that links the CSS code that has been produced with its original Sass source code.

The name, line numbers, and column positions of the original Sass file are all included in a file known as a CSS source map. When employing browser developer tools, it is utilized by web developers and designers to troubleshoot their Sass and CSS code.

[file-name].min.css

With the —style option with the value set to compressed, Sass can produce CSS files that have been compressed. A minified version of the original Sass file, free of any extraneous whitespace and comments, will be produced as the final CSS file.

For instance, you can run the following command in the terminal to convert a Sass file named styles.scss into a minified CSS file named styles.min.css:

sass [file-name].scss [file-name].min.css --style compressed

Code copied to clipboard !

By doing this, a minified CSS file called styles.min.css will be created, which can be used in production settings to minimize file size and speed up the loading of web pages.

Temporary Files

You can make a temporary CSS file if you’re not the only developer working on the project (and you don’t want the other developers to change the structure or they don’t want to change the scss) or if you need to make a quick fix. If you only want to make a few simple adjustments, this is the perfect scenario.

You are working with sass, so, occasionally you need to look at your temp file and try to integrate into your sass/scss files. You won’t have the opportunities that sass will provide you with if you don’t do this. You will lose the capacity to have all the items in the same place.

Compiled Chaos

When your compiled files look like this, the Compiled Chaos will appear:

In some circumstances, the [file-name].min.css file will take priority or be the only one needed to give our site the correct layout. Some developers might attempt to execute the command in this situation to change the sass/scss file to [file-name].min.css. This strategy will result in the following issues:

1) The original.css file will turn into a “ghost” when using outdated CSS.

2) Since the [file-name].min.css is no longer minified, it will no longer serve its intended purpose of reducing file size and accelerating web page rendering.

The solution:

The [file-name].map files should be ignored; they are only there to assist the developer in debugging the css in devtools.

The [file-name].css and [file-name].min.css files are now the cause of less trouble. You can use the right technique to immediately modify both files while keeping an eye out for changes to resolve this. Therefore, we want to normally build the [file-name].css file and minify the [file-name].min.css file. The instruction below can be used to accomplish this.

sass --watch sass/[file-name].scss:css/[file-name].css --watch scss/[file-name].scss:css/[file-name].min.css --style compressed

Code copied to clipboard !

Not a solution.

It is not a solution to remove [file-name].min.css because in some cases the app will get the layout from this file, even if the website is in developer mode and maintaining the style. Try “Force Refresh” or “Clean the Cache” to see the differences. It is also possible for some changes to appear when building the project, so it is still possible for in develop mode to look fine and in production to break.