A Step-by-Step Guide to Building a Sass Project

Procedure to create SASS Project

Open Visual Studio Code and open the terminal.
Type npm init -y in the terminal and press Enter to create a new project named SASS with default settings.
Open the package.json file and change the name to sass-app, add keywords and author name as Tutor Joes.
In the terminal, type npmi sass -D to install the Sass module in your project.
Create a list of folders in your project:
- css for stylesheet
- sass for .scss files.
In the SASS folder, create a new index.scss file and add your Sass code.
In the index.html file, link the stylesheet by adding <link rel="stylesheet" href="../css/style.css"> to the head section.
Install the Live Server extension in Visual Studio Code.
Click on the Go Live button on the bottom right corner of the Visual Studio Code window to run the project using the Live Server extension
Run project using the command npm start in visual studio code terminal. You can get compiled style in style.css file.

Configure SASS Project

Open package.json file and add the below code in script key.

"start": "sass ./sass/index.scss ./css/style.css && sass ./sass/index.scss ./css/style.min.css --style=compressed --no-source-map --watch"

Here's a breakdown of the command:

"start": The name of the script command.
"sass": The command to compile the Sass code.
./sass/index.scss: The path to the Sass entry file that needs to be compiled.
./css/style.css: The path where the compiled CSS file will be generated.
&&: The command separator that allows us to run multiple commands.
sass ./sass/index.scss ./css/style.min.css: This is the second Sass compilation command that generates the minified version of the CSS file.
--style=compressed: This option specifies that the output should be compressed, i.e., without any whitespace.
--no-source-map: This option specifies that no source map files should be generated.
--watch: This option tells Sass to watch for changes in the Sass file and recompile the CSS file whenever a change is detected.

In summary, this script command compiles the Sass code in the ./sass/index.scss file, generates two CSS files, one with regular styling in ./css/style.css and another minified version in ./css/style.min.css. Additionally, the --watch flag instructs Sass to continuously watch for changes to the source Sass file and recompile the CSS files whenever changes are detected. This can help automate the development process and ensure that the CSS files are always up-to-date with the Sass code.