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
1 2 | <span class="token function">npm</span> init -y |
You can refer to my directory tree below
1 2 3 4 5 6 7 8 9 | <span class="token builtin class-name">.</span> ├─ node_modules/ ├─ public/ │ ├─ styles/ │ ├─ index.html ├─ src/ │ ├─ scss/ package.json |
Why split into 2 directories
src/
andpublic/
? Because the source code fromsrc/
will be compiled and automatically placed in thepublic/
directory. By keeping these folders separate, you can be sure that everything you need to bring your website to the Product environment is in thepublic/
folder and that everything for your project development is in the public/ directory. in thesrc/
directory.
Install SASS
First, we’ll install sass , a library that helps compile .sass
or .scss
files into .css
.
1 2 | <span class="token function">npm</span> <span class="token function">install</span> -D sass |
In the package.json
file, we will add a launch line to help compile SASS.
1 2 3 4 5 6 | <span class="token property">"scripts"</span> <span class="token operator">:</span> <span class="token punctuation">{</span> ... <span class="token property">"start"</span> <span class="token operator">:</span> <span class="token string">"sass src/scss:public"</span> ... <span class="token punctuation">}</span> |
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 thesrc/scss
directorysrc/scss
and output topublic/
.
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
.
1 2 3 4 5 6 7 8 | // main.scss <span class="token atrule"><span class="token rule">@import</span> <span class="token string">'_base'</span> <span class="token punctuation">;</span></span> <span class="token selector">h1</span> <span class="token punctuation">{</span> <span class="token property">color</span> <span class="token punctuation">:</span> tomato <span class="token punctuation">;</span> <span class="token property">font-family</span> <span class="token punctuation">:</span> system-ui <span class="token punctuation">,</span> -apple-system <span class="token punctuation">,</span> Roboto <span class="token punctuation">,</span> sans-serif <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
_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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <span class="token selector">// _base.scss *, *:before, *:after</span> <span class="token punctuation">{</span> <span class="token property">box-sizing</span> <span class="token punctuation">:</span> border-box <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">h1, h2, h3, h4, h5, h6</span> <span class="token punctuation">{</span> <span class="token property">margin</span> <span class="token punctuation">:</span> 0 <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">html, body, ul, ol, li, figure, blockquote, dl, dd</span> <span class="token punctuation">{</span> <span class="token property">margin</span> <span class="token punctuation">:</span> 0 <span class="token punctuation">;</span> <span class="token property">padding</span> <span class="token punctuation">:</span> 0 <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
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>
.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <span class="token doctype"><span class="token punctuation"><!</span> <span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> html</span> <span class="token attr-name">lang</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> en <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> head</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> meta</span> <span class="token attr-name">charset</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> UTF-8 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> meta</span> <span class="token attr-name">name</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> viewport <span class="token punctuation">"</span></span> <span class="token attr-name">content</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> width=device-width, initial-scale=1.0 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> title</span> <span class="token punctuation">></span></span> Document <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> title</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> link</span> <span class="token attr-name">rel</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> stylesheet <span class="token punctuation">"</span></span> <span class="token attr-name">href</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> styles/main.css <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> head</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> body</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> h1</span> <span class="token punctuation">></span></span> Hello World <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> h1</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> body</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> html</span> <span class="token punctuation">></span></span> |
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.
1 2 3 4 5 6 7 | <span class="token property">"scripts"</span> <span class="token operator">:</span> <span class="token punctuation">{</span> ... <span class="token property">"sass:dev"</span> <span class="token operator">:</span> <span class="token string">"sass --watch --embed-source-map src/scss:public/styles"</span> <span class="token punctuation">,</span> <span class="token property">"sass:prod"</span> <span class="token operator">:</span> <span class="token string">"sass --no-source-map --style compressed src/scss:public/styles"</span> ... <span class="token punctuation">}</span> |
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