SCSS: Started with static website
Tags: scss, sass, css, webdev
Published: 2022-06-18 18:19:05

## 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](http://compass-style.org/).  
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
```bash
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](https://sass-lang.com/dart-sass), the library executable to compile `.sass` and `.scss` files to `.css` files.

```bash
npm install -D sass
```
In your `package.json` file, we will add a script to compile our SCSS.
```json
"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`.


```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:
```scss
// _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.

```html
<!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.

```json
"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](https://codesandbox.io/s/scss-static-j3807y)