freeCodeCamp

2.1 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d7dbd367417b2b2512bb5	Nest CSS with Sass	0		Nest CSS con Sass

Description

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

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 nesting puede ayudar a organizar su código al colocar reglas de estilo secundarias dentro de los respectivos elementos principales:

nav {
  background-color: red;
  ul {
    list-style: none;
    li {
      display: inline-block;
    }
  }
}

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.1 KiB Raw Blame History