SASS: What, why and how?
SASS is a CSS preprocessor that is designed to be used as a stand-alone preprocessor or as part of a framework called Compass. SASS for CSS is very similar to CSS, to create CSS files that are easier to read and maintain than traditional CSS files. In the next chapter, we’ll learn how to use SASS to create a simple CSS file.
Setup project
You can make the directory structure follow me
Why don’t we put all the files in one folder? Because the src/ source file will be automatically compiled and placed in the public/ folder. By keeping this folder separation, you can be sure that everything you need to get your app into production on a web server is in the public/ folder and everything you need to deploy your app is in the src/ folder.
Install SCSS
First, we’ll install sass, the executable library for compiling .sass and .scss files to .css files.
In your package.json file, we’ll add a script to compile our SCSS.
The format of the script is sass :, so we’re telling sass to compile any .scss files it finds ( except for those beginning with underscores) to src/scss and write the output to public/.
Development
Now that we have our SCSS installed, we can start building. work on our app. We’ll start by creating a .scss file in src/scss. I create a _base.scss file in src/scss and add it to src/scss/main.scss.
_base.scss is a file that contains all the base styles for the application. This is a good place to put global styles like colors, fonts, and other styles that are used throughout the application.
Some of the basic styles are:
Add SCSS to HTML
Browser cannot understand SCSS. Therefore, we need to add the compiled SCSS (CSS) file to HTML. We can do this by adding the tag to the tag.
Now we can run npm run sass to compile our SCSS to CSS.
Development and Production
Have a few different styles for development and production. If you are a development, you need to keep a real code and source map for debugging and easier to find what is wrong, where it is wrong. If you want to use production, you should minify your code, remove the sourcemap for web performance.
Now that we have a worker script to build our CSS, let’s incorporate it into our development and production build. processes. We probably want to treat our development and production builds differently. So let’s make some options to improve our build process.
In the build script: -watch tells sass to look for changes in the src/scss directory and try again compile whenever a change is detected. -embed-source-map tells sass to embed the source map in the compiled CSS.
In the production script: -no-source-map tells sass that doesn’t generate a source map. -compressed-style tells sass to compress and remove any unnecessary whitespace from the compiled CSS. Both options will keep the file size low and improve performance.
Conclusion
- SCSS is a clean, easy and less CSS writing aid in building a program .
- Browser cannot understand SCSS. So we need to port SCSS to CSS.
- In development, using source-map to have the browser rebuild the original source and present the reconstructed original to the debugger.
- In production , remove source- allocate and minimize the file size for faster loading and better performance.
See the code sample here: Code Sandbox
.