Variables

Imagine that you are coding the web page for your company; you define the style sheet, and, of course, you have a font standard color for all titles, body text, and so on. You are writing your CSS classes and notes that you need to repeat the same color value on more than one class definition. Okay, it’s not so hard to copy and paste the same value across my entire file. You finally present that web page to your UX designer and oh, surprise! That red doesn’t have to be so deep. You need to correct to the new color code. What does that mean? You will need to pe into your style sheet and manually change each color value for the new one.

Like other programming languages, with CSS preprocessors, we can define variables to reuse them across our style sheet, avoid repeating the same value, and save time when we need to adjust or change that same value. Let’s look at an example:

SASS syntax:

$my-height: 160px;

p {
  height: $my-height;
}

Then, LESS syntax:

@my-height: 160px;

p {
  font-size: @my-height;
}

They're pretty similar right? Let's explore other features!