Intro to SASS
Tags: webdev, css
Published: 2022-05-14 03:40:34

## What is Sass?

- As there website says, "Sass is the most mature, stable, and powerful professional grade CSS extension language in the world".
- It is completely compatible with all versions of CSS.
- With Sass you can write code logically and organized which increases reusability of code.
- Uses .scss file extension.

**Variables:**

- It creates variables which directly convert to actual values. it does not create root in css file.
- We can create variable just like javascript, use dollarsign to create variables.
- It easy to maintain colors value, can easily change value at only one place.
-examples:
.sass
 ```scss
	$primaryColorBtn: green;
	
	.card {
		color: $primaryColorBtn;
	}
 ```
.css
 ```css
 .card {
	color: green
 }
```

**Maps:**

- just like js has Maps scss provides same functionality.
- syntax is map-get("map's name", "key's name")
- throught key's name it look through map to get value.

```css
$font-sizes: (
	"regular": 0.875rem,
	"medium": 1rem,
	"large": 1.2rem
)

.card {
    font-size: map-get($font-sizes, large);
}
```

in this snippet, first finds "large" key in font-sizes map and get value from it.

**Nest Keyword:**

- in css, to assign css properties to child classes we use these kind of syntax ".parent .children {}"
- in sass we can use nesting to achive this thing with out repeating parent isentifiers.

```css
.form-horizontal {
	display: flex;
	.btn {
		color: $primaryBtnColor;
	}
} 
```
which result in to ".form-horizontal .btn {color: green }"

- This will assign primary btn color only to "form-horizontal" parent's child.
- Still be careful of using to-much nesting in your project.
- It better to create resuable classes than using nesting.

**Partial Files:**

- In sass, you can create partial sass files which contains small css code blocks to make code modular.
- It can be created using _(underscore) as prefix.
- compiler does not create those partial files as separate file.
- In which target file these partial files are being import,
- It creates all partial file's code to target file's css after compilation

**@include and mix-ins:**

- sass allows to create function as mixin to increase reusablity.
- Allows to create mixin with parameter to make more dynamic.

```css
@mixin important-text {
  color: red;
  font-size: 25px;
  font-weight: bold;
}

.warning {
  @include important-text;
  color: yellow;
}
```
include is used to access the mixin in different class.
mixin with parameter:

```css
@mixin important-text($color) {
  color: $color;
  font-size: 25px;
  font-weight: bold;
}

.warning {
  @include important-text(yellow);
}
```

**@extends:**

- extend keyword is used to extend on class's property to another classes.

```css
.text-basic  {
  border: none;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.text-warning {
  @extend .text-basic;
  color: yellow;
}

.text-error {
  @extend .text-basic;
  color: red;
}

.text-success {
  @extend .text-basic;
  color: green;
}
```

**Math calculations:**

- With sass, can do math calculation without using "calc" keyword.
- It support "+", "-", "*", "/" operations.
- Allowed to do Math operations with same units only.
like,

> 80% - 20% valid
> 100vh - 78vh valid
> 30% + 10vh not-valid
	  
**import:**

- in css for importing file use "import("./abc.css").
- in sass, use "@import './abc'".