Fast dive into Sass
Tags: sass, beginners, css
Published: 2024-04-19 14:27:46

## Table of contents

1. [Installation and usage](#installation-and-usage)
2. [Variables](#variables)
3. [Nesting](#nesting)
4. [Modules](#modules)
5. [Mixins](#mixins)
6. [Placeholer class](#placeholer-class)
7. [Operators](#operators)
8. [Other Sass stuff](#other-sass-stuff)

<hr />

Sass in one of the most popular CSS preprocessors, which reduce code repetition and provide nesting, mixins, variables.

<u>Two syntaxes of Sass preprocessor:</u>
1. **Scss** (file extension is '.scss') - a superset of CSS - all valid CSS is also valid SCSS. _Scss will be used in examples._
2. **Sass** (file extension is '.sass') has features:
  - Indentation rather than curly braces to nest statements;
  - Newlines instead of semicolons to separate nest statements. 

These files are compiled into regular css.

## Installation and usage

So, to use sass in just html, we need to compile `sass` file into `css` file. Thus, we install sass globally to use it from command line:
```bash
npm install -g sass
```
After installation we can set constant compiler `sass->css`:
```bash
sass --watch input.scss output.css
```
So we can use `output.css` in html file.

If you don't need `.map` files, specify it with flag `--no-source-map`:
```bash
sass --no-source-map --watch input.scss output.css
```

If there are multiple scss files in `sass` folder, we can watch all of them and convert to `css` with the corresponding names:
```bash
sass --watch sass:public/style
```
Our `css` files now will be in `public/style` directory.
<hr />
If you are using `vite` builder, [you don't need to install vite-plugins, but the exact `sass`](https://vitejs.dev/guide/features#css-pre-processors):
```bash
npm install -D sass
```

## Variables
If you are familiar with CSS variables, you know how useful they are. Sass has a different syntax for them - it uses `$` to make a variable:
```scss
$primary-color: #000;

body {
  background-color: $primary-color;
}
```
> Remember, that [the background of the root element becomes the background of the canvas](https://www.w3.org/TR/CSS21/colors.html#background). Since `body` element is the root-element, its background style is applied to webpage area.

### Differences from CSS variables
- Sass variables are compiled, while CSS ones are included in the output file.
- Sass variables treat hyphens and underscores as identical: `$pr-color` and `$pr_color` refer to the same variable.
- If we change value of CSS variable it will affect earlier uses and later uses.
- CSS variables are inherited, while in Sass, they are scoped to the block they appear:
```scss
//input.scss
$primary-color: #000;

.test {
  $primary-color: #fff;
}

.test a {
  background-color: $primary-color;
}

//output.css
.test a {
  background-color: #000;
}
```

## Nesting
Nesting in Sass resembles html hierarchy:
```scss
header {
  nav {

  }
  
  a {

  }
}
```
Here we are accessing elements `nav` and `a` inside `header` element.

## Modules

### Partials
We can create partial Sass file, that will be included in other Sass files.
> if a name of Sass file starts with `_` it tells Sass to not generate this file into a CSS file.
```scss
// _partial.scss
$secondary-color: #fff;

body {
  padding: 20px;
}
```

### `@use` rule
This rule loads another Sass file as a module:
```scss
//input.scss
@use 'partial';

body {
  color: partial.$secondary-color;
}
```
Here, final body's style will include padding and color. 

## Mixins
**Mixin** is a group of CSS declarations, that can be reused in further CSS statements. It corresponds to DRY rule.
```scss
@mixin theme {
  background-color: aqua;
  box-shadow: inset 0 0 20px 10px red;
}

div {
  @include theme;
}
```

### mixin arguments
We can also pass arguments to mixin: 

```scss
@mixin theme($color: aqua, $shadow-color: red) {
  background-color: $color;
  box-shadow: inset 0 0 20px 10px $shadow-color;
}

div {
  @include theme($color: green, $shadow-color: yellow);
}
```

## Placeholer class
**Placeholer class** - a type of class that can be extended. The difference from mixins is that it doesn't take arguments and has different syntax.It starts with `%` and needs `@extend`:
```scss
%btn {
  background-color: bisque;
  cursor: pointer;
}

button[type=submit] {
  @extend %btn;
  border: 1px solid green;
}

button[type=reset] {
  @extend %btn;
  border: 1px solid blue;
}
```

> If you don't need arguments, it's better to use **placeholder class** over **mixin** since in the resulting css file, placeholders merge shared code: instead of  `.classA{} .classB{}` we get `.classA, .classB {}`

## Operators
Remember CSS `calc()`? We can also use mathematical operators in scss: `+,-,*`. 
```scss
header {
  height: 1rem * 2;
}
```

However, unlike in CSS `calc()` we can't use pure `/`, we need to use sass built-in module `sass:math`:
```scss
@use 'sass:math';

.logo {
  width: math.div(200px, 600px) * 100%;
}

nav {
  width: math.div(400px, 600px) * 100%;
}
```

## Other Sass stuff
- [Here](https://sass-lang.com/documentation/at-rules/) is a list of Sass rules. We already know `@use`, `@mixin`, `@include`, `@extend`, there are also rules for debugging, creating functions etc.
- [Here](https://sass-lang.com/documentation/modules/) is a list of Sass  built-in modules that can be `@use`d. We've already encountered with `sass:math` among sass modules. If you want to change color based on other or to compound selectors, look at sass modules.