Sass Crash Course

01. Use Sass variables to store data

CSS Sass and 061551a2d0015a is that it can use variables. They can be declared and set to store data as variables JavaScript

In JavaScript , variables are declared let and const In Sass , the variable starts with $ , followed by the variable name.

Suppose we need to use the success color "green" in different places without repeating its name. So, we need to write code like this:

$success-color: green;

Then we use this global variable in different places, as shown below:

.success {
color: $sucess-color;
}

h3 {
color: $success-color;
}

An example where variables are useful is when many elements need the same color. If that color changes, the only place where you can edit the code is the variable value

02. Use Sass to nest CSS

Sass will make your CSS code look like the structure of html

Usually, each element is styled for different rows, like this

No nesting:

footer {
background-color: #000;
}

footer ul {
list-style: none;
}

footer ul li {
display: flex;
}

After nesting:

footer {
  background-color: #000;

  ul {
   list-style: none;

   li {
    display: flex;
   }
  }
}

You can make the code more regular by nesting child styles in the corresponding parent elements

03. Use @mixin create reusable CSS

In Sass , mixin is a set of CSS declarations. So we can reuse them in our style sheets.

The newer CSS feature takes time to be fully compatible with all browsers. As browsers adopt features, the CSS rules that use them may require vendor prefixes. For example, the box-shadow attribute.

Without mixing:

.card {
  -webkit-box-shadow: 0px 0px 4px #fff;
  -moz-box-shadow: 0px 0px 4px #fff;
  -ms-box-shadow: 0px 0px 4px #fff;
   box-shadow: 0px 0px 4px #fff;
}

Imagine that there are different types of cards on our website, they have different effects box-shadow It requires a lot of coding to support all browsers.

Use mix:

@mixin box-shadow($x, $y, $blur, $c) {
  -webkit-box-shadow: $x $y $blur $c;
  -moz-box-shadow: $x $y $blur $c;
  -ms-box-shadow: $x $y $blur $c;
   box-shadow: $x $y $blur $c;
}

The definition starts with @mixin , followed by a custom name. The parameters ( $x , $y , $blur and $c ) are optional. Now, whenever you need box-shadow , you only need to call mixin one line to automatically generate the vendor prefix.

We need to use the @include instruction to call @mixin

.card {
  @include box-shadow(0px, 0px, 5px, #000);
}

.popup-card {
  @include box-shadow(2px, 2px, 10px, #000);
}

04. Use @if and @else to add logic to the style

In Sass , the @if @else statement is similar to JavaScript . It is very useful Sass when we search for specific conditions before applying any style.

@mixin text-color($val) {
  @if $val == danger {
    color: red;
  }
  @else if $val == success {
    color: green;
  }
  @else {
    color: black;
  }
}

Then we need @include this mixin in different places:

h1 {
 @include text-color(danger);
 font-size: 2rem; 
}

.sucess-text {
  @include text-color(success);
  font-weight: bold;
}

05. Sass@Loop

Sass has several loop options, much like other programming languages. They include the @for cycle, the @each cycle, and the @while cycle. These loops are very powerful tools for generating CSS code

uses @for create a Sass cycle:
In Sass , @for be used in two ways: start through end or start to end . The difference is that to will not include the last image

start through end:

@for $i from 1 through 5 {
  .text-#{$i} { font-size: 10px * $i; }
}

{$i} part is the grammar that combines the variable (i) and the text into a string, compiled into Css:

.text-1 {
  font-size: 10px;
}

.text-2 {
  font-size: 20px;
}

.text-3 {
  font-size: 30px;
}

.text-4 {
  font-size: 40px;
}

.text-5 {
  font-size: 50px;
}

"start to end" is the same as "start through end", except that the end is not included

@for $j from 1 to 6 {
  .text-#{$j} {font-size: 10px * $j}
}

Compile to Css:

.text-1 {
  font-size: 10px;
}

.text-2 {
  font-size: 20px;
}

.text-3 {
  font-size: 30px;
}

.text-4 {
  font-size: 40px;
}

.text-5 {
  font-size: 50px;
}

uses @each to cycle through the items in the list:
Without using Map:

@each $color in red, green, yellow {
  .#{$color}-text {color: $color;}
}

Use Map:

$colors: (color1: red, color2: green, color3: yellow);

@each $key, $color in $colors {
  .#{$color}-text {color: $color;}
}

Both of the above code examples are compiled into the following CSS:

.red-text {
  color: red;
}

.green-text {
  color: green;
}

.yellow-text {
  color: yellow;
}

uses @while cycle:

$i: 1;
@while $i < 6 {
  .text-#{$i} { font-size: 10px * $i;}
   $i: $i + 1;
}

So, first, we take a variable and set it to 1. Next, we use the @while instruction to check the conditions to create different sizes of text when $i is less than 6. Make sure to increase $i by 1 to avoid infinite loops after setting CSS rules.
Compile to css:

.text-1 {
  font-size: 10px;
}

.text-2 {
  font-size: 20px;
}

.text-3 {
  font-size: 30px;
}

.text-4 {
  font-size: 40px;
}

.text-5 {
  font-size: 50px;
}

06. Use _Partial to split the style into smaller pieces

Partial is a Sass file that starts with an underscore, that is: _partial.scss . The underscore lets Sass know that the specific file is a partial file and will not generate a CSS file. The Partial part is intended to be used @import This is a great way to group similar code into a module.

For example, if all your text colors are saved in a _textColor.scss , and you want them to be in the main.scss module, use in the main Sass file:

@import 'textColor'

Please note that you do not need to specify the underscore and file extension import Because Sass understands it is partial. After importing parts of the file, all text colors, blends, and other codes can be used.

07. Extend a set of CSS styles to another element

@extend is a feature of Sass that allows classes to share a set of properties with each other.

For example, the following CSS rule block style .card class. It has some properties, such as background color, width, and height.

.card {
  background-color: #fff;
  width: 200px;
  height: 150px; 
}

Now we need another card named .popup-card . It has the same attributes as the .card But we need to add additional attributes to the pop-up card. You can .card to the target class. But there is a better way to do this @extend

.popup-card {
  @extend .card;
  border-radius: 5px;
  background-color: #349db;
}

This put .card style copied to .popup-card in