07. Sass @extend y Herencia

La directiva @extend

La directiva @extend le permite compartir un conjunto de propiedades CSS de un selector a otro. La directiva @extend es útil si tienes elementos con estilos casi idénticos que solo difieren en algunos pequeños detalles.

El siguiente ejemplo de Sass primero crea un estilo básico para los botones (este estilo se usará para la mayoría de los botones). Luego, creamos un estilo para un botón “Informe” y un estilo para un botón “Enviar”. Tanto el botón “Informe” como el botón “Enviar” heredan todas las propiedades CSS de la clase .button-basic, a través de la directiva @extend. Además, tienen sus propios colores definidos:

.button-basic  {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report  {
  @extend .button-basic;
  background-color: red;
}

.button-submit  {
  @extend .button-basic;
  background-color: green;
  color: white;
}

Después de la compilación, el CSS se verá así:

.button-basic, .button-report, .button-submit {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report  {
  background-color: red;
}

.button-submit  {
  background-color: green;
  color: white;
}

Al usar la directiva @extend, no necesitas especificar varias clases para un elemento en su código HTML, como este: <button class=”button-basic button-report”>Informar de esto</button>. Solo necesita especificar .button-report para obtener ambos conjuntos de estilos. La directiva @extend ayuda a mantener tu código Sass verdaderamente DRY.