sass
Extender / Herencia

Sintaxis

• @extend .<className>
• @extend .<className>, .<className>
• @extend .<className> !optional
• @extend .<className>, .<className> !optional

Parámetros

Observaciones

Extender una clase

.message
  color: white

.message-important
  @extend .message
  background-color: red

Esto tomará todos los estilos de .message y los agregará a .message-important . Genera el siguiente CSS:

.message, .message-important {
  color: white;
}

.message-important {
  background-color: red;
}

Extenderse de clases múltiples

.message
  color: white

.important
  background-color: red

.message-important
  @extend .message, .important

En el código anterior, @extend se usa en una línea para agregar el código de varias clases a .message-important , sin embargo, es posible usar una extensión por línea como esta:

.message-important
    @extend .message
    @extend .important

Cualquiera de estos métodos generará el siguiente CSS:

.message, .message-important {
  color: white;
}

.important, .message-important {
  background-color: red;
}

El encadenamiento se extiende

.message
  color: white
  background: black

.message-important
  @extend .message
  font-weight: bold

.message-error
  @extend .message-important
  font-style: italic

Este código hace que .message-error extienda desde .message-important , lo que significa que contendrá código de .message-important y .message , ya que .method-important extiende desde .message . Esto resulta en el siguiente CSS:

.message, .message-important, .message-error {
  color: white;
  background: black;
}

.message-important, .message-error {
  font-weight: bold;
}

.message-error {
  font-style: italic;
}

Descargo de responsabilidad: asegúrese de que la (s) clase (s) de la cual se está extendiendo se produzcan solo una vez en el código; de lo contrario, Sass puede generar algunos CSS confusos y complicados.

Opcional Extiende

A veces, es posible que desee que un @extend sea ​​opcional y no requiera que exista la clase especificada en su código.

.message-important
  @extend .message !optional
  background: red

Esto resultará en el siguiente CSS:

.message-important {
  background: red;
}

Descargo de responsabilidad: Esto es útil durante el desarrollo cuando es posible que aún no tenga todo su código escrito y no desee errores, pero probablemente debería eliminarse en la producción porque podría dar lugar a resultados inesperados.

Placeholders

A veces, creará clases que no se utilizarán por derecho propio, sino que solo se extenderán dentro de otros conjuntos de reglas. Esto significa que el archivo CSS compilado será más grande de lo que debe ser. Los selectores de marcadores de posición resuelven este problema.

Los selectores de marcador de posición son similares a los selectores de clase, pero utilizan el carácter de porcentaje (%) en lugar del (.) Utilizado para las clases. No aparecerán en el CSS compilado.

%button {
    border: 5px solid black;
    border-radius: 5px;
    margin: 0;
} 

.error-button {
    @extend %button;
    background-color: #FF0000;
}

.success-button {
    @extend %button;
    background-color: #00FF00;
}

Esto compilará al siguiente CSS:

.error-button, .success-button {
    border: 5px solid black;
    border-radius: 5px;
    margin: 0;
}

.error-button {
    background-color: #FF0000;
}

.success-button {
    background-color: #00FF00;
}

Extendiendo al padre

Típicamente tratando de extender al padre así:

.parent {
  style: value;

  @extend &;
}

Resultará en un error, indicando que el padre no puede ser extendido. Esto tiene sentido, pero hay una solución. Simplemente almacene el selector padre en una variable.

.parent {
  $parent: &;
  style: value;
  @extend #{&};
}

No hay ningún beneficio en hacer esto en el ejemplo anterior, sin embargo, esto le da el poder de envolver los estilos principales dentro de una mezcla incluida.