BLOG

The purpose of defining a variable is to make things easier for future changes as a result of repeating the same code in more than one place. For example "color: pink;" Assuming that the code is used in several parts of our page, the change from one place will affect all pages. If this is done from a variable definition, it is necessary to find and replace the related code individually. In the global scope, we can start with a $ (dollar) sign and define a variable and start using it.

Sample 1 (font definition)

$default-font: Helvetica, sans-serif;
$default-font-size: 16px;
body{
  font: $default-font-size $default-font;
}

Sample 2 (color definition)

$baseColor: #C5C8D4;
body{
  color: $baseColor;
}

ATTENTION: When defining variables, units must be the same if they are treated with numbers.

Sample

$size: 5 + 8; //Output = 13

$size: 5px + 8; //Output = 13px

$size: 5px + 8em; //Output = ERROR

$size: 5em + 8em; //Output = 13em

See you in the next class.

---

---