--- id: 587d7dbd367417b2b2512bb5 title: Nest CSS with Sass required: - src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js' raw: true challengeType: 0 videoUrl: '' localeTitle: Nest CSS con Sass --- ## Description

Sass permite nesting 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í:

nav {
color de fondo: rojo;
}

nav ul {
estilo de lista: ninguno;
}

nav ul li {
pantalla: bloque en línea;
}

Para un proyecto grande, el archivo CSS tendrá muchas líneas y reglas. Aquí es donde el nesting puede ayudar a organizar su código al colocar reglas de estilo secundarias dentro de los elementos principales respectivos:

nav {
color de fondo: rojo;

ul {
estilo de lista: ninguno;

li {
pantalla: bloque en línea;
}
}
}

## Instructions

Use la técnica de nesting que se muestra arriba para reorganizar las reglas de CSS para ambos elementos del elemento .blog-post . Para propósitos de prueba, el h1 debe venir antes del elemento p .

## Tests

```yml tests: - text: Su código debe reorganizar las reglas CSS para que h1 y p estén anidadas en el elemento principal .blog-post . testString: 'assert(code.match(/\.blog-post\s*?{\s*?h1\s*?{\s*?text-align:\s*?center;\s*?color:\s*?blue;\s*?}\s*?p\s*?{\s*?font-size:\s*?20px;\s*?}\s*?}/gi), "Your code should re-organize the CSS rules so the h1 and p are nested in the .blog-post parent element.");' ```

## Challenge Seed

```html

Blog Title

This is a paragraph

```

## Solution

```js // solution required ```