freeCodeCamp

2.3 KiB

Raw Blame History

title

required

challengeType

videoUrl

localeTitle

587d7dbd367417b2b2512bb5

Nest CSS with Sass

src	raw
https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js	true

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

tests:
  - text: Su código debe reorganizar las reglas CSS para que <code>h1</code> y <code>p</code> estén anidadas en el elemento principal <code>.blog-post</code> .
    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 <code>h1</code> and <code>p</code> are nested in the <code>.blog-post</code> parent element.");'

Challenge Seed

<style type='text/sass'>
  .blog-post {

  }
  h1 {
    text-align: center;
    color: blue;
  }
  p {
    font-size: 20px;
  }
</style>

<div class="blog-post">
  <h1>Blog Title</h1>
  <p>This is a paragraph</p>
</div>

Solution

// solution required

2.3 KiB Raw Blame History