SCSS: Started with static website

SASS: What, why, and how?

SASS is a CSS preprocessor that is designed to be used as a standalone preprocessor, or as part of a framework called Compass.

SASS for CSS is very similar to CSS, for creating CSS files that are more easily readable and maintainable than traditional CSS files.

In the next chapper, we will learn how to use SASS to create a simple CSS file.

Setup Project

npm init -y

You can make directory structure follow me

.
├─ node_modules/
├─ public/
│  ├─ styles/
│  ├─ index.html
├─ src/
│  ├─ scss/
package.json

Why don't we put all files into one folder? Because source code file from src/ will get compile and placed automatically into public/ folder. When keeping this separation of folders, you can be sure that everything you need to take your application to production on a web server sits in the public/ folder and everything to implement your application sits in the src/ folder.

Install SCSS

First, we’ll install sass, the library executable to compile .sass and .scss files to .css files.

npm install -D sass

In your package.json file, we will add a script to compile our SCSS.

"scripts": {
  ...
  "sass": "sass src/scss:public"
  ...
}

The format of the script is sass <inputPath>:<outputPath>, so we’re telling sass to compile whatever .scss files that it finds (except for ones starting with underscores) in src/scss and write the output to public/.

Development

Now that we have our SCSS installed, we can start working on our application. 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.

// main.scss
@import '_base';

h1 {
    color: tomato;
    font-family: system-ui, -apple-system, Roboto, sans-serif;
}

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

Some of the base styles are:

// _base.scss
*, *:before, *:after {
  box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

html, body, ul, ol, li, figure, blockquote, dl, dd {
  margin: 0;
  padding: 0;
}

Add SCSS to HTML

Browser can't understand SCSS. So we need to add SCSS compiled file (CSS) to HTML. We can do this by adding <style> tag to <head> tag.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="styles/main.css">
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

Now we can run npm run sass to compile our SCSS to CSS.

Development and Production

Have some diffrent styles for development and production. If an development, you need a keep real code, and source-map for debugging and easier to find what is wrong, wrong at where. If you want to use production, you need to minify your code, remove source-map for web performance.

Now that we have a working script for building our CSS, let’s incorporate that 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 enhance our build process.

"scripts": {
    ...
    "sass:dev": "sass --watch --embed-source-map src/scss:public/styles",
    "sass:prod": "sass --no-source-map --style compressed src/scss:public/styles"
    ...
}

In dev script: --watch tells sass to watch for changes in the src/scss directory and recompile whenever a change is detected. --embed-source-map tells sass to embed the source map in the compiled CSS.

In prod script: --no-source-map tells sass to not generate a source map. --style compressed tells sass to compress and remove any unnecessary whitespace from the compiled CSS. Both of these options which will keep file size down and improve performance.

Conclusion

SCSS is a help you write clean, easy and less CSS in a program construct.
Browser can't understand SCSS. So we need tranfer SCSS to CSS.
In development, using source-map for browser reconstruct the original source and present the reconstructed original in the debugger.
In production, remove source-map and minify file size for load faster and better performance.

Checkout the code example here:
Code Sandbox

Blog