gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update extend-one-set-of-css-styles-to-another-element.spanish.md (#33119)

Browse Source 
Added the proper code block element for markdown
This commit is contained in:
pako herrera
2019-03-16 10:59:55 -06:00
committed by Jaka Kranjc
parent 766a737e53
commit 5a9962e5eb
1 changed files with 19 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
curriculum/challenges/spanish/03-front-end-libraries/sass/extend-one-set-of-css-styles-to-another-element.spanish.md
View File

@ -7,7 +7,25 @@ localeTitle: Extiende un conjunto de estilos CSS a otro elemento
---
## Description
<section id="description"> Sass tiene una característica llamada <code>extend</code> que facilita tomar prestadas las reglas de CSS de un elemento y construirlas sobre otro. Por ejemplo, el siguiente bloque de reglas CSS <code>.panel</code> una clase <code>.panel</code> . Tiene un <code>background-color</code> , <code>height</code> y <code>border</code> . <blockquote> .panel{ <br> color de fondo: rojo; <br> altura: 70px; <br> borde: 2px verde sólido; <br> } </blockquote> Ahora quieres otro panel llamado <code>.big-panel</code> . Tiene las mismas propiedades base que el <code>.panel</code> , pero también necesita un <code>width</code> y <code>font-size</code> . Es posible copiar y pegar las reglas CSS iniciales de <code>.panel</code> , pero el código se vuelve repetitivo a medida que agrega más tipos de paneles. La directiva <code>extend</code> es una forma sencilla de reutilizar las reglas escritas para un elemento, y luego agregar más para otro: <blockquote> .big-panel { <br> @extend .panel; <br> ancho: 150px; <br> tamaño de letra: 2em; <br> } </blockquote> El <code>.big-panel</code> tendrá las mismas propiedades que <code>.panel</code> además de los nuevos estilos. </section>
<section id="description"> Sass tiene una característica llamada <code>extend</code> que facilita tomar prestadas las reglas de CSS de un elemento y construirlas sobre otro. Por ejemplo, el siguiente bloque de reglas CSS <code>.panel</code> una clase <code>.panel</code> . Tiene un <code>background-color</code> , <code>height</code> y <code>border</code> .
```css
.panel{
background-color: red;
height: 70px;
border: 2px solid green;
}
```
Ahora quieres otro panel llamado <code>.big-panel</code> . Tiene las mismas propiedades base que el <code>.panel</code> , pero también necesita un <code>width</code> y <code>font-size</code> . Es posible copiar y pegar las reglas CSS iniciales de <code>.panel</code> , pero el código se vuelve repetitivo a medida que agrega más tipos de paneles. La directiva <code>extend</code> es una forma sencilla de reutilizar las reglas escritas para un elemento, y luego agregar más para otro:
```css
.big-panel {
@extend .panel;
width: 150px;
font-size: 2em;
}
```
El <code>.big-panel</code> tendrá las mismas propiedades que <code>.panel</code> además de los nuevos estilos. </section>
## Instructions
<section id="instructions"> Cree una clase <code>.info-important</code> que extienda <code>.info</code> y que también tenga un <code>background-color</code> definido en magenta. </section>