Creating basic mixinsReferencing parent selectors with &

Étendre les fonctionnalités d'une classe avec une autre

.style_a {
  background:red;
}
.style_b {
  @extend .style_a;
  color: black;
}
.style_c {
  @extend .style_a;
  color: blue;
}

// output :

.style_a, .style_b, .style_c {
  background:red;
}
.style_b {
  color: black;
}
.style_c {
  color: blue;
}

Invisible class : si on a pas besoin d'un classe dont on hérite

%style_a {
  background:red;
}
.style_b {
  @extend .style_a;
  color: black;
}
.style_c {
  @extend .style_a;
  color: blue;
}

// output :

.style_b, style_c {
  background:red;
}
.style_b {
  color: black;
}
.style_c {
  color: blue;
}