Cómo anidar estilos CSS con el preprocesador Sass

CSS / Sass

Si todavía no sabes lo que es Sass o cómo usarlo, en este post explico lo necesario para que puedas empezar a trabajar con él. Anidar estilos CSS es algo que no proporciona por defecto CSS3, pero si preprocesadores de CSS como Sass. En este post explicaré además de anidar estilos CSS con Sass, la referencia a selectores padre y combinadores de selectores.

Anidar estilos CSS con Sass

Cuando escribirnos una hoja de estilos, se repiten selectores para asignar reglas a elementos que están bajo algunos elementos. Por ejemplo, un caso muy común es el de un artículo/post.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
.articulo h1 {
     font-weight: bold;
     color:blue;
}
 
.articulo p {
     line-height: 1.5em;
}
 
.articulo img {
     max-width: 150px;
}

Como podemos ver, el elemento de la clase .articulo, está en 3 reglas diferentes. Tanto h1, como p e img son hijos de .articulo y en Sass podemos evitar la repetición de código en casos como este. Por tanto, la versión anidada que usaríamos en Sass sería la siguiente.

LESS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.articulo
     h1 {
          font-weight: bold;
          color:blue;
     }
 
     p {
          line-height: 1.5em;
     }
 
     img {
          max-width: 150px;
     }
}

Además de eliminar redundancia en el código, queda mucho más legible. Como puedes observar, para anidar elementos basta con que las reglas de elementos hijo estén dentro del selector padre dando como resultado el CSS que acabamos de ver.

Pero supongamos que .articulo tiene sus propias reglas, como por ejemplo un border y un padding. Podriamos agregarlos de la siguiente forma

LESS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.articulo{
     border: 2px solid blue;
     padding: 15px
 
     h1 {
          font-weight: bold;
          color:blue;
     }
 
     p {
          line-height: 1.5em;
     }
 
     img {
          max-width: 150px;
     }
}

De esta forma damos estilo tanto al elemento padre como a los hijos.

Otra opción que tenemos, es agregar grupos de selectores. Por ejemplo

LESS
1
2
3
4
5
6
7
8
.articulo{
     border: 2px solid blue;
     padding: 15px
 
     h1, h2, h3{
          font-weight:bold;
     }
}

Dando como resultado en el CSS

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.articulo {
     border: 2px solid blue;
     padding: 15px
}
 
.articulo h1 {
     font-weight:bold;
}
 
.articulo h2 {
     font-weight:bold;
}
 
.articulo h3 {
     font-weight:bold;
}

Cómo seleccionar el elemento padre en CSS

En Sass tenemos un selector para ello y es el «&». Cuando anidamos estilos como acabamos de ver, es posible que queremos hacer referencia al selector padre. Un caso que se puede dar perfectamente es que queremos escribir el estilo cuando un elemento esté en «hover» o incluso «active». En esos casos podemos hacer referencia al elemento padre empleando el &.

LESS
1
2
3
4
5
6
7
8
9
10
11
12
a {
     text-decoration:none;
    
     &:hover {
          text-decoration:underline;
          color:blue;      
    }
 
     &:active{
          font-weight:bold;
    }
}

Una vez compilado, el CSS resultante sería el siguiente

CSS
1
2
3
4
5
6
7
8
9
10
11
12
a {
     text-decoration:none;
}    
 
a:hover {
     text-decoration:underline;
     color:blue;      
}
 
a:active{
     font-weight:bold;
}

Además, el selector & no se limita un nivel de profundidad en concreto, podríamos emplearlo en cualquiera.

LESS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#principal{
     font-size:1em;
    
     #contenedor{
          background:#CCC;
          
          a{
            text-decoration:none;
 
            &:hover{
                 border:1px solid #000;
            }
          }
     }
}

En este caso el selector & hace referencia al link que está dentro de un elemento llamado «contenedor» y que a su vez está dentro de «principal».

Dando como resultado

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
#principal {
  font-size: 1em;
}
#principal #contenedor {
  background: #CCC;
}
 
#principal #contenedor a {
  text-decoration: none;
}
 
#principal #contenedor a:hover {
  border: 1px solid #000;
}

Usar combinadores en Sass

En uno del os post que escribí, hablé de los distintos selectores. Entre ellos hable de los selectores combinadores que son «+», «>» y el «~».

El selector > que es conocido como el combinador de hijos, se usa para seleccionar el hijo inmediato del padre. Por ejemplo, podemos seleccionar los span que estén dentro de los párrafos de un articulo.

LESS
1
2
3
4
5
.articulo{
     p > span{
          font-style:italic;
     }
}

También podríamos seleccionar el siguiente elemento del mismo nivel con el «+».

1
2
3
4
5
.articulo{
     h1 + p{
          color:blue;
     }
}

De esta forma, el párrafo que esté justo después de un h1, será de color azul

Y para finalizar el selector ~, que nos permite seleccionar todos los elementos que vayan después de un elmento

LESS
1
2
3
4
5
.articulo{
     p.inicio ~ p{
          color:red;
     }
}

Todos los párrafos a partir del párrafo con clase inicio, serán de color rojo.

Y hasta aquí anidar estilos CSS con Sass, espero que os haya gustado. A seguir picando 🙂