extend
que facilita tomar prestadas las reglas de CSS de un elemento y construirlas sobre otro. Por ejemplo, el siguiente bloque de reglas CSS .panel
una clase .panel
. Tiene un background-color
, height
y border
. .panel{Ahora quieres otro panel llamado
color de fondo: rojo;
altura: 70px;
borde: 2px verde sólido;
}
.big-panel
. Tiene las mismas propiedades base que el .panel
, pero también necesita un width
y font-size
. Es posible copiar y pegar las reglas CSS iniciales de .panel
, pero el código se vuelve repetitivo a medida que agrega más tipos de paneles. La directiva extend
es una forma sencilla de reutilizar las reglas escritas para un elemento, y luego agregar más para otro: .big-panel {El
@extend .panel;
ancho: 150px;
tamaño de letra: 2em;
}
.big-panel
tendrá las mismas propiedades que .panel
además de los nuevos estilos. .info-important
que extienda .info
y que también tenga un background-color
definido en magenta. info-important
debe tener un background-color
configurado en magenta
.
testString: 'assert(code.match(/\.info-important\s*?{[\s\S]*background-color\s*?:\s*?magenta\s*?;[\s\S]*}/gi), "Your info-important
class should have a background-color
set to magenta
.");'
- text: Su clase de info-important
debe usar @extend
para heredar el estilo de la clase de info
.
testString: 'assert(code.match(/\.info-important\s*?{[\s\S]*@extend\s*?.info\s*?;[\s\S]*/gi), "Your info-important
class should use @extend
to inherit the styling from the info
class.");'
```
This is an important post. It should extend the class ".info" and have its own CSS styles.
This is a simple post. It has basic styling and can be extended for other uses.