One of the main task of programming is to find out a shortcut to solve "Repetition". While writing code in CSS, we tend to repeat a lot of code, making our code large, hard to read & change. Out of All the solutions SCSS/SASS provides, one of them is Variables.

🔥Let's look at 4 tricks to Solve code repetition using SCSS/SASS variables.

Table Of Contents 🔥

• Media Queries
• Responsive Design
• Global Scope
• Local Scope

1. Media Queries :

Responsive Website, without Media Queries is a Joke! Let's say we have 4 block level, and 10 element level media queries(I follow BEM method). While changing the values of our media queries we have to manually read the whole thing.
But, if we deploy SCSS/SASS variables, then we only need to look at the top of our page. ***Thank me later.

❌Instead Of Doing This❌

//*******  Avoid this system  *******

@media (max-width: 1024px){
  // Contents Here
}
@media (max-width: 768px){
  // Contents Here
}
@media (max-width: 480px){
  // Contents Here
}

✔️Do This✔️

//*******  Follow this system  *******

$laptop : 1024px;
$tablet : 768px;
$mobile : 480px;

@media (max-width: $laptop){
  // Contents Here
}
@media (max-width: $tablet){
  // Contents Here
}
@media (max-width: $mobile){
  // Contents Here
}

2. Responsive Design :

Designers pick 4-6 common numbers to set font size, padding, margin, etc.

Let's say, A Designer has picked 22px for heading, 16px for font size(general), padding between 2 elements of 32px, common margin of 10px, etc.

A Developer has to follow these style guides. While coding, he has to set these values in multiple places. It becomes a nightmare when there's a change in padding from 32px to 20px, and the developer has to read the whole file and change it again.

So, deploy SCSS/SASS variables and next time, look for the values at the top of the page.

❌Instead Of Doing This❌

//*******  Avoid this system  *******

.container{
  color: black;
  font-size: 18px;
  padding :32px;
  margin:10px;
}

✔️Do This✔️

//*******  Follow this system  *******

$color-1: black;
$fs : 18px;
$padding : 32px;
$margin : 10px;

.container{
  color: $color-1;
  font-size: $fs;
  padding :$padding;
  margin: $margin;
}

Quick Tip 💪

You can perform Calculations on the go using SCSS/SASS variables, like this......

$x : 50px;

.div-1{
  width: ($x+$x);     // (50+50) = 100px;
}
.div-2{
  width: ($x*10)/2;   // (50*10)/2 = 250px;
}

3. Global Scope(General Purpose):

Variables once set, at the top of your page, you can use it anywhere as you please. Sample 👇

$color-1 : white;
$color-2 : blue;
$color-3 : black;
$fs: 18px;
$padding: 20px;


.container{
  background-color: $color-3;
  font-size :$fs; 
}

4. Local Scope(Temporary Use):

If you want to set a value for a temporary use, then it's possible to create local scoped variables for temporary use.
**P.S : for this to work, set variables inside code blocks.
Sample 👇

//These are Global Scoped Variables

$color-A : white;
$color-B : black;


.div-1{

// This is Local Scoped Variable

$color-1 : green;

  background-color : $color-1;

}


.div-2{


//**** This will not work  ****
  background-color : $color-1;


//*** This will Work ****
  color : $color-A;

}

Conclusion :

So, we're Done with the Tutorial Ladies & Gentlemen. Let me know your thoughts on the comment section.

Suggestions & Criticisms are Highly Appreciated ❤️

• Youtube / Joy Shaheb

• Twitter / JoyShaheb

• Instagram / JoyShaheb