Intro to SASS

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

    $primaryColorBtn: green;

    .card {
        color: $primaryColorBtn;
    }

.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.

$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.

.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.

@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:

@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.

.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'".