sass
Anidamiento

Nido basico

Cada vez que declara una nueva regla dentro de otra regla, se denomina anidar. Con el anidamiento básico, como se muestra a continuación, el selector anidado se compilará como un nuevo selector de CSS con todos sus padres precedidos, separados por un espacio.

// SCSS
.parent {
  margin: 1rem;

  .child {
    float: left;
  }
}

// CSS output
.parent {
  margin: 1rem;
}

.parent .child {
  float: left;
}

Profundidad de nidificación

La anidación es una característica muy poderosa, pero debe usarse con precaución. Puede suceder con bastante facilidad y rapidez, que empiece a anidar y continúe incluyendo a todos los niños en un nido, de un nido, de un nido. Déjame demostrar:

// SCSS
header {
  // [css-rules]

  .holder {
    // [css-rules]

    .dropdown-list {
      // [css-rules]

      ul {
        // [css-rules]

        li {
          margin: 1rem 0 0 1rem;
        }
      }
    }
  }
}

// CSS output of the last rule
header .holder .dropdown-list ul li {
  margin: 1rem 0 0 1rem;
}

Problemas

Especificidad

El li del ejemplo anterior tiene un margin establecido. Digamos que queremos anular esto más adelante en una consulta de medios.

@media (max-width: 480) {

  // will not work
  .dropdown-list ul li {
    margin: 0;
  }

  // will work
  header .holder .dropdown-list ul li {
    margin: 0;
  }
}

Por lo tanto, al anidar demasiado profundamente, tendrá que anidar de nuevo cada vez que desee sobrescribir un determinado valor. Peor aún, aquí es a menudo donde la regla es !important de usar.

@media (max-width: 480) {

  // BIG NO-NO, don't do this
  .dropdown-list ul li {
    margin: 0 !important;
  }

¿Por qué es la !important -rule es una mala idea

Debería escribir su SCSS de una buena manera que estas soluciones no son necesarias en primer lugar. !important Usar !important en un tema tan menor ya te llevará por un agujero de conejo!

Reusabilidad

Esto es bastante similar al problema de especificidad, pero vale la pena señalarlo por separado. Si diseña algo como un botón o incluso un menú desplegable, es posible que desee reutilizar esos estilos en otro lugar de su página.

Al anidar demasiado profundamente, sus estilos solo están vinculados a los elementos que se encuentran dentro del elemento más externo (el elemento en la parte superior de su SCSS). Esto te lleva a copiar estilos y pegarlos de nuevo en otro lugar. Posiblemente en otra regla anidada.

Sus hojas de estilo serán cada vez más grandes y más difíciles de mantener.

¿Qué tan profundo debe anidar?

La mayoría de las guías de estilo establecen la profundidad máxima en 2. Este es un buen consejo en general, ya que hay muy pocas ocasiones en las que querrá anidar más profundamente. La mayoría de las veces, 2 es suficiente.

Anidando con @ at-root

El agrupamiento probablemente se usa con más frecuencia para crear selectores más específicos, pero también se puede usar simplemente para la organización de códigos. Usando la directiva @at-root , puede 'saltar' desde donde la anida en su Sass, devolviéndolo al nivel superior. Hacer esto le permite mantener los estilos agrupados sin crear más especificidad de la que necesita.

Por ejemplo, podrías hacer algo como esto:

.item {
    color: #333;

    @at-root {
        .item-wrapper {
            color: #666;

            img {
                width: 100%;
            }
        }
    }
    
    .item-child {
        background-color: #555;
    }
}

Eso compilaría a esto:

.item {
  color: #333;
}
.item-wrapper {
  color: #666;
}
.item-wrapper img {
  width: 100%;
}
.item .item-child {
  background-color: #555;
}

Al hacer esto, todos nuestros estilos relacionados con la clase .item están juntos en el SCSS, pero no necesariamente necesitamos esa clase en cada selector.

Excluyendo contextos

Por defecto, las declaraciones dentro de @at-root aparecerán en cualquier contexto. Esto significa que las reglas dentro de un bloque @media , por ejemplo, permanecerán allí.

@media print {
  .item-wrapper {
    @at-root {
      .item {
        background: white;
      }
    }
  }
}

// Will compile to
@media print {
  .item {
    background: white;
  }
}

Este no es siempre el comportamiento deseado, por lo que puede excluir el contexto de los medios, pasando los media a la opción without de la directiva @at-root .

@at-root (without: media) {..

Para más información, consulte la documentación oficial.

El selector padre (&)

El agrupamiento es ideal para mantener juntos los selectores relacionados para facilitar que los futuros desarrolladores entiendan su código. El selector principal, representado por un signo ("&") puede ayudar a hacerlo en situaciones más complejas. Hay varias formas en que se puede utilizar.

Cree un nuevo selector que requiera tanto el selector principal como otro en el mismo elemento colocando el nuevo selector directamente después de un selector principal.

// SCSS
.parent {

  &.skin {
    background: pink;
  }
}

// CSS output
.parent.skin {
  background: pink;
}

Haga que el padre aparezca después de un selector anidado en el CSS compilado colocando el selector padre después del selector anidado.

// SCSS
.parent {

  .wrapper & {
    border: 1px solid black;
  }
}

// CSS output
.wrapper .parent {
  border: 1px solid black;
}

Estados y pseudo-elementos.

Además de usar el agrupamiento para clases e hijos, el agrupamiento con el selector principal también se usa comúnmente para combinar los estados de :active :hover y :focus para enlaces.

// SCSS
a {
  color: blue;

  &:active,
  &:focus {
    color: red;
  }

  &:visited {
    color: purple;
  }
}

// CSS output
a {
  color: blue;
}

a:active,
a:focus {
  color: red;
}

a:visited {
  color: purple;
}

De forma similar, puede diseñar pseudo-elementos anidando con el selector principal.

// SCSS
.parent {

  &::after {
    display: table;
    clear: both;
    content: '';
  }

  &::only-child {
    font-weight: bold;
  }
}

// CSS output
.parent::after {
  display: table;
  clear: both;
  content: '';
}

.parent::only-child {
  font-weight: bold;
}

Propiedades de anidación

Algunas propiedades de CSS pertenecen a un espacio de nombres, por ejemplo border-right pertenece al espacio de nombres de border . Para escribir menos, podemos utilizar el anidamiento de propiedades y omitir estos prefijos, incluso en múltiples niveles.

Si necesitáramos crear un borde a la derecha e izquierda de una clase llamada .borders , podríamos escribir esto:

 //SCSS
 .borders {
    border: 2px dashed blue;
    border: {
        left: 1px solid black;
        right: 1px solid red;
    }
  }

 // CSS output 
 .borders {
    border: 2px dashed blue;  
    border-left: 1px solid black;
    border-right: 1px solid red;
  }
 

Esto nos ahorra tener que escribir el border-right y el border-left , sin embargo, todavía estamos escribiendo código repetitivo con las líneas 1px solid black y 1px solid red . Podemos escribir aún menos CSS repetitivo con el siguiente:

// SCSS
.borders {
  border: 2px dashed blue {
    left: 1px solid black;
    right: {
      color: red;
    }
  }
}

// CSS output
.borders {
   border: 2px dashed blue;
   border-left: 1px solid black;
   border-right-color: red;
}