Nesting

Cuando generamos un archivo CSS como el siguiente:

.content{
      border: 1px solid #ccc;
      padding: 20px;
      h2{
            font-size: 3em;
            margin: 20px 0; 
      }
      
      p{
            font-size: 1.5em;
            margin: 15px 0;
      }
}

Estamos estableciendo unas propiedades para la clase .content, y para los elementos dentro de un elemento con la clase .content que sean párrafo o h2 internos. De modo, que dentro de la indentación de la clase .content, se han establecido los estilos para los párrafos y h2 con las propiedades de clase .content.

Otra de las posibilidades que tenemos de anidamiento (nesting) es:

.btn{
    text: {
        decoration: underline;
        transform: lowercase;
    }
}

En este caso, tenemos nuestro text-decoration y text-underline para la clase .btn, del mismo modo que si hubiéramos hecho:

Otra de las características de nesting es el &, donde hace referencia al selector padre, veamos un ejemplo:

.content{
      border: 1px solid #ccc;
      padding: 20px;
      
      .callout{
            border-color: red;
      }
      
      &.callout{ 
            /* referencia a .content, es un selector compuesto: .content.callout */
            border-color: green;
      }
}

Por tanto, usar “parent selector” es muy útil en casos donde tenemos una pseudoclase y pseudoelementos como son los enlaces. Por ejemplo:

a{
      color: #999;

      &:hover{
            color: #777;
      }
      
      &:active{
            color: #888;
      }
}

Los selectores pueden ser también añadidos antes de la referencia del &. Por ejemplo:

.sidebar{
      float: right;
      width: 300px;
      
      .users & {  //El & referencia a sidebar
            width: 400px;
      }
}

Como podemos ver nesting es bastante sencillo, pero puede resultar peligroso.

.content{
      background: #ccc;
      
      .cell{
            h2{
                  a{
                        &:hover{
                              color: red;
                        }
                  }
            }
      }
}

Por tanto, como consejo, intenta limitar tu nesting en 3 o 4 niveles y considera refactorizar tu código.

<< @import, use Variables >>