Componentes aninhados

<div class='article-link'>
  <div class='vote-box'>
    ...
  </div>
  <h3 class='title'>...</h3>
  <p class='meta'>...</p>
</div>

Às vezes é necessário aninhar componentes. Aqui estão algumas diretrizes para fazer isso.

Variantes

Um componente precisa parecer de certa forma quando aninhados em outro componente. Evite modificar o componente aninhado utilizando o componente que o contém.

.article-header {
  > .vote-box > .up { /* ✗ avoid this */ }
}

Ao invés disso prefira adicionar um variante ao componente aninhado e aplique do componente que o contém.

<div class='article-header'>
  <div class='vote-box -highlight'>
    ...
  </div>
  ...
</div>

.vote-box {
  &.-highlight > .up { /* ... */ }
}

Simplificando componentes aninhados

às vezes quando aninha componentes, seu markup pode ficar sujo:

<div class='search-form'>
  <input class='input' type='text'>
  <button class='search-button -red -large'></button>
</div>

Você pode simplificá-lo utilizando seu mecanismo de preprocessamento CSS @extend:

<div class='search-form'>
  <input class='input' type='text'>
  <button class='submit'></button>
</div>

.search-form {
  > .submit {
    @extend .search-button;
    @extend .search-button.-red;
    @extend .search-button.-large;
  }
}

Que tal repetir elementos como em uma lista? Aprenda sobre Layouts. Continue →