freeCodeCamp

2.4 KiB

Raw Blame History

title

localeTitle

required

challengeType

587d7dbd367417b2b2512bb5

Nest CSS with Sass

Nest CSS con Sass

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

Description

Sass permite nesting reglas CSS, lo 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 {
  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 elementos principales respectivos:

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