SASS/SCSS: Setup guide for beginners

Tram Ho

SASS: What, why and how?

SASS is a CSS preprocessor that helps you to use features that don’t exist in CSS like variables, nesting, mixins, functions, and other nifty features. This makes the code easier to read, concise, inherit and maintain than traditional CSS writing. When you start it running, it will take your Sass file, convert it and save it as a normal CSS file that you can use in your website.

Project Initialization

First, need to create a package.json that helps manage package versions as well as launch projects through npm

You can refer to my directory tree below

Why split into 2 directories src/ and public/ ? Because the source code from src/ will be compiled and automatically placed in the public/ directory. By keeping these folders separate, you can be sure that everything you need to bring your website to the Product environment is in the public/ folder and that everything for your project development is in the public/ directory. in the src/ directory.

Install SASS

First, we’ll install sass , a library that helps compile .sass or .scss files into .css .

In the package.json file, we will add a launch line to help compile SASS.

The launch line is of the form sass <inputPath>:<outputPath> , which tells sass to compile any .scss files it finds (except those that start with an underscore) from the src/scss directory src/scss and output to public/ .

Write code

Once we have installed SASS, we can start working on our project. We’ll start by creating a .scss file in the src/scss directory. Create a file _base.scss in src/scss and import it into src/scss/main.scss .

_base.scss is a file that contains all the basic styles for the project. It’s a good place to put global styles like colors, fonts, sizes, and other styles used throughout the project.

There are some basic styles commonly used such as:

Add SASS to HTML

The browser cannot understand SASS. So we need to add the compiled file of SASS (CSS) to the HTML. We can add by adding <style> tag inside <head> .

Now we can run npm run start at the terminal to convert from .scss to .css .

Development and Production Environment

There are a few differences when building in development and production environments. If in a Dev environment, you need to keep the code intact, along with the source-map to help debug and easily find when errors arise, where errors are. If in Prod environment, you need to compress the code, remove source-map , empty spaces and unnecessary comments to increase performance.

Earlier we created a command to help build CSS code, now let’s separate it into 2 versions to suit the characteristics of each environment.

Dev Script : --watch helps SASS listen in the src/scss directory and recompile if it detects a change in the file. --embed-source-map to generate the source-map for the compiled CSS file.

Prod Script : Use --no-source-map to not initialize source-map . And --style compressed compresses and removes any unnecessary whitespace from the compiled CSS file. Both of these options will reduce file size and improve page load performance.

Conclusion

  • SCSS is a tool that helps you to write CSS clearly, easily and less expensively in a program structure.
  • The browser cannot understand SASS. So we need to convert SCSS to CSS.
  • In a Development environment, using source-map for the browser will reconstruct the original code and display the reconstructed original in the debugger.
  • In a Production environment, remove the source-map and reduce the file size for faster page loads, resulting in better performance
Share the news now

Source : Viblo