An example of @extend in Sass.

An example of @extend in Sass.

by michananya

HTML

<div class="wrapper yellow-bg">
  <div class="color yellow-1">1</div>
  <div class="color yellow-2">2</div>
  <div class="color yellow-3">3</div>
  <div class="color yellow-4">4</div>
  <div class="color yellow-5">5</div>
</div>

<div class="wrapper orange-bg">
  <div class="color orange-1">1</div>
  <div class="color orange-2">2</div>
  <div class="color orange-3">3</div>
  <div class="color orange-4">4</div>
  <div class="color orange-5">5</div>
</div>

<div class="wrapper brown-bg">
  <div class="color brown-1">1</div>
  <div class="color brown-2">2</div>
  <div class="color brown-3">3</div>
  <div class="color brown-4">4</div>
  <div class="color brown-5">5</div>
</div>

<div class="wrapper red-bg">
  <div class="color red-1">1</div>
  <div class="color red-2">2</div>
  <div class="color red-3">3</div>
  <div class="color red-4">4</div>
  <div class="color red-5">5</div>
</div>

<div class="wrapper green-bg">
  <div class="color green-1">1</div>
  <div class="color green-2">2</div>
  <div class="color green-3">3</div>
  <div class="color green-4">4</div>
  <div class="color green-5">5</div>
</div>
<div class="wrapper cyan-bg">
  <div class="color cyan-1">1</div>
  <div class="color cyan-2">2</div>
  <div class="color cyan-3">3</div>
  <div class="color cyan-4">4</div>
  <div class="color cyan-5">5</div>
</div>
<div class="wrapper blue-bg">
  <div class="color blue-1">1</div>
  <div class="color blue-2">2</div>
  <div class="color blue-3">3</div>
  <div class="color blue-4">4</div>
  <div class="color blue-5">5</div>
</div>

<div class="wrapper pink-bg">
  <div class="color pink-1">1</div>
  <div class="color pink-2">2</div>
  <div class="color pink-3">3</div>
  <div class="color pink-4">4</div>
  <div class="color pink-5">5</div>
</div>

<div class="wrapper purple-bg">
  <div class="color purple-1">1</div>
  <div class="color purple-2">2</div>
  <div class="color purple-3">3</div>
  <div class="color purple-4">4</div>
  <div class="color...

SCSS

.wrapper {
    border-radius: 30px;
    padding: 8px;
    height: 32px;
    margin-bottom: 10px;
}
.color {
  height: 16px;
  width: 16px;
  text-align: center;
  padding: 8px;
  color: #ffffff;
  border-radius: 50%;
  margin-right: 4px;
  display: inline-block;
}

$white: #FFFFFF;
$black: #000000;

$yellow: #FFF017;
$orange: #ff8c00;
$brown: #a37940;
$red: #FF0000;
$green: #32A738;
$cyan: #2BC2BD;
$blue: #006BFF;
$pink: #DF10B7;
$purple:#c40fdb;
$gray: #999999;


.yellow-1 { background-color: lighten($yellow, 20%) }
.yellow-2 { background-color: lighten($yellow, 10%) }
.yellow-3 { background-color: $yellow; }
.yellow-4 { background-color: darken($yellow, 5%);}
.yellow-5 { background-color: darken($yellow, 10%);}
.yellow-bg { background-color: lighten($yellow, 35%);}
.yellow-bg:hover { background-color: lighten($yellow, 32%);}

.orange-1 { background-color: lighten($orange, 20%) }
.orange-2 { background-color: lighten($orange, 10%) }
.orange-3 { background-color: $orange; }
.orange-4 { background-color: darken($orange, 5%);}
.orange-5 { background-color: darken($orange, 10%);}
.orange-bg { background-color: lighten($orange, 35%);}
.orange-bg:hover { background-color: lighten($orange, 32%);}

.brown-1 { background-color: lighten($brown, 20%) }
.brown-2 { background-color: lighten($brown, 10%) }
.brown-3 { background-color: $brown; }
.brown-4 { background-color: darken($brown, 10%);}
.brown-5 { background-color: darken($brown, 20%);}
.brown-bg { background-color: lighten($brown, 46%);}
.brown-bg:hover { background-color: lighten($brown, 43%);}


.red-1 { background-color: lighten($red, 20%) }
.red-2 { background-color: lighten($red, 10%) }
.red-3 { background-color: $red; }
.red-4 { background-color: darken($red, 10%);}
.red-5 { background-color: darken($red, 20%);}
.red-bg { background-color: lighten($red, 46%);}
.red-bg:hover { background-color: lighten($red, 43%);}

.green-1 { background-color: lighten($green, 20%) }
.green-2 { background-color: lighten($green,...