Sass: ampliar las directivas

Descripción

La directiva @extend se usa para compartir reglas y relaciones entre selectores. Puede extender todos los demás estilos de clase en una clase y también puede aplicar sus propios estilos específicos. Los siguientes son los tipos de extensión:

Tipos y descripción Sintaxis Código compilado

Extending Complex Selectors

Puede extender el selector que consta de un solo elemento o selector de clase.

 
h2 {
   font-size: 40px;
}

.container{
   @extend h2
}
 
h2, .container {
   font-size: 40px;
}

Multiple Extends

Se puede ampliar más de un selector con un solo selector.

 
.style {
   font-size: 25px;
   font-style: italic;
}

h2 {
   color: #61C8E1;
}

.container {
   @extend .style;
   @extend h2
}
 
.style, .container {
   font-size: 25px;
   font-style: italic;
}

h2, .container {
   color: #61C8E1;
}

Chaining Extends

El primer selector extendido por el segundo selector y el segundo selector se extiende por el tercer selector, por lo que esto se conoce como extensión de encadenamiento.

 
.style {
   font-size: 25px;
   font-style: italic;
}

h2 {
   color: #61C8E1;
   @extend .style
}

.container {
   @extend h2
}
 
.style, h2, .container {
   font-size: 25px;
   font-style: italic;
}

h2, .container {
   color: #61C8E1;
}

Selector Sequences

El selector anidado puede usar @extend por sí mismo.

Merging Selector Sequences

Fusiona dos secuencias, es decir, una secuencia extiende otra secuencia que está presente en otra secuencia.

 
.style {
   font-size: 25px;
   font-style: italic;
   color: #61C8E1;
}

h2 .container {
   @extend .style
}
.container .style a {
   font-weight: bold;
}

#id .example {
   @extend a;
}
 
.style, h2 .container {
   font-size: 25px;
   font-style: italic;
   color: #61C8E1;
}
.container .style a, .container .style #id
.example, #id .container .style .example {
   font-weight: bold;
}

@extend - Only Selectors

Su carácter de porcentaje (%) se puede usar en cualquier lugar de una identificación o clase, evita que su propio conjunto de reglas se represente en CSS.

 
.style a%extreme {
   font-size: 25px;
   font-style: italic;
   color: #61C8E1;
}

.container {
   @extend %extreme;
}
 
.style a.container {
   font-size: 25px;
   font-style: italic;
   color: #61C8E1;
}

The !optional Flag

El indicador! Opcional se usa para permitir que @extend no cree ningún selector nuevo.

 
h2.important {
   @extend .style !optional;
}
 
A blank compile page gets display.

@extend in Directives

Si @extend se usa dentro de @media, entonces puede extender los selectores solo que están presentes dentro de los mismos bloques de directiva.

 
@media print {
   .style {
      font-size: 25px;
      font-style: italic;
   }
   
   .container {
      @extend .style;
      color: #61C8E1;
   }
}
 
@media print {
   .style, .container {
      font-size: 25px;
      font-style: italic;
   }

   .container {
      color: #61C8E1;
   }
}

Ejemplo

El siguiente ejemplo demuestra el uso de @extend en el archivo SCSS:

extend.htm

<!doctype html>
   <head>
      <title>Extend Example</title>
      <link rel = "stylesheet" href = "extend.css" type = "text/css" />
   </head>

   <body class = "container">
      <h2>Example using Extend</h2>
      <p class = "style">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
   </body>
</html>

A continuación, cree el archivo extend.scss .

extend.scss

.style{
   font-size: 30px;
   font-style: italic;
}

h2{
   color: #787878;
   @extend .style

}

.container{
   @extend h2
}

Puede decirle a SASS que observe el archivo y actualice el CSS cada vez que cambie el archivo SASS, utilizando el siguiente comando:

sass --watch C:\ruby\lib\sass\extend.scss:extend.css

A continuación, ejecute el comando anterior; creará el archivo extend.css automáticamente con el siguiente código:

extend.css

.style, h2, .container {
   font-size: 30px;
   font-style: italic;
}

h2, .container {
   color: #787878;
}

Salida

Realicemos los siguientes pasos para ver cómo funciona el código dado anteriormente:

  • Guarde el código html dado anteriormente en extend.html archivo.

  • Abra este archivo HTML en un navegador, se muestra una salida como se muestra a continuación.