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

update code examples for spanish translation (#18583)

Browse Source
This commit is contained in:
Dulce Hernández
2018-11-07 05:36:28 -06:00
committed by Kristofer Koishigawa
parent 12da60565a
commit e24a2d9fdb
1 changed files with 31 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
curriculum/challenges/spanish/03-front-end-libraries/sass/nest-css-with-sass.spanish.md
View File

@ -10,7 +10,37 @@ localeTitle: Nest CSS con Sass
--- ---
## Description ## Description
<section id="description"> Sass permite <code>nesting</code> reglas CSS, que es una forma útil de organizar una hoja de estilo. Normalmente, cada elemento está enfocado en una línea diferente para diseñarlo, así: <blockquote> nav { <br> color de fondo: rojo; <br> } <br><br> nav ul { <br> estilo de lista: ninguno; <br> } <br><br> nav ul li { <br> pantalla: bloque en línea; <br> } </blockquote> Para un proyecto grande, el archivo CSS tendrá muchas líneas y reglas. Aquí es donde el <code>nesting</code> puede ayudar a organizar su código al colocar reglas de estilo secundarias dentro de los elementos principales respectivos: <blockquote> nav { <br> color de fondo: rojo; <br><br> ul { <br> estilo de lista: ninguno; <br><br> li { <br> pantalla: bloque en línea; <br> } <br> } <br> } <br></blockquote></section> <section id="description">
Sass permite anidamiento (<code>nesting</code>) de reglas CSS, que es una forma útil de organizar una hoja de estilo. Normalmente, cada elemento se escribe en una línea diferente para darle estilo así:
```html
nav {
background-color: red;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline-block;
}
```
Para un proyecto grande, el archivo CSS tendrá muchas líneas y reglas. Aquí es donde el <code>nesting</code> puede ayudar a organizar su código al colocar reglas de estilo secundarias dentro de los respectivos elementos principales:
```html
nav {
background-color: red;
ul {
list-style: none;
li {
display: inline-block;
}
}
}
```
</section>
## Instructions ## Instructions
<section id="instructions"> Use la técnica de <code>nesting</code> que se muestra arriba para reorganizar las reglas de CSS para ambos elementos del elemento <code>.blog-post</code> . Para propósitos de prueba, el <code>h1</code> debe venir antes del elemento <code>p</code> . </section> <section id="instructions"> Use la técnica de <code>nesting</code> que se muestra arriba para reorganizar las reglas de CSS para ambos elementos del elemento <code>.blog-post</code> . Para propósitos de prueba, el <code>h1</code> debe venir antes del elemento <code>p</code> . </section>