Combinadores en anidamiento
Este artículo explica sobre los combinadores en el anidamiento.
Explicaremos cómo utilizar los combinadores en el anidamiento con SASS y proporcionaremos código de ejemplo para ayudarte a entenderlo paso a paso.
YouTube Video
Combinadores en anidamiento
En SASS, puedes escribir selectores de CSS de manera concisa basados en relaciones padre-hijo, pero se requiere especial atención para manejar correctamente los combinadores como los selectores de descendiente y adyacente.
Fundamentos del anidamiento
En SASS, al anidar selectores hijos dentro de selectores padres, puedes representar de manera clara y concisa las relaciones padre-hijo en CSS.
Ejemplo: Anidamiento básico
1.nav {
2 ul {
3 li {
4 color: blue;
5 }
6 }
7}CSS compilado
1.nav ul li {
2 color: blue;
3}Referencia al selector padre (&)
El & de SASS se utiliza para referirse al selector padre actual.
Combinando combinadores y &
Usando &, puedes crear selectores flexibles.
Ejemplo
1.card {
2 & > .title {
3 font-weight: bold;
4 }
5 & + .card {
6 margin-top: 20px;
7 }
8}CSS compilado
1.card > .title {
2 font-weight: bold;
3}
4.card + .card {
5 margin-top: 20px;
6}Notación abreviada para &
En SASS, cuando un combinador se coloca al comienzo de un selector, el selector padre se inserta implícitamente, por lo que se puede omitir el &.
Casos en los que se puede omitir
Por ejemplo, cuando escribes + .item, SASS lo interpreta internamente como & + .item y genera automáticamente la combinación con el selector padre.
Ejemplo
1.item {
2 + .item {
3 margin-top: 10px;
4 }
5 &--hover {
6 background-color: red;
7 }
8}CSS compilado
1.item + .item {
2 margin-top: 10px;
3}
4.item--hover {
5 background-color: red;
6}Visión general de los combinadores
Los combinadores de CSS definen la relación entre los selectores. Los siguientes son los principales tipos de combinadores.
-
Selector de descendiente (espacio) Un selector de descendiente selecciona todos los elementos descendientes contenidos dentro de un elemento padre. Ejemplo:
.parent .child -
Selector de hijo directo (
>) Un selector de hijo directo selecciona solo los elementos hijos inmediatos. Ejemplo:.parent > .child -
Selector adyacente (
+) Un selector adyacente selecciona el elemento hermano que sigue inmediatamente. Ejemplo:.sibling1 + .sibling2 -
Selector de hermanos generales (
~) El selector de hermanos generales selecciona todos los elementos hermanos que siguen. Ejemplo:.sibling1 ~ .sibling2
Cómo usar combinadores en SASS
Selector de descendiente (espacio)
En el anidamiento de SASS, el selector de descendiente mediante espacio se aplica por defecto.
Ejemplo
1.container {
2 .header {
3 .title {
4 font-size: 20px;
5 }
6 }
7}CSS compilado
1.container .header .title {
2 font-size: 20px;
3}Selector de hijo directo (> )
Si quieres usar un selector de hijo directo, escribe explícitamente > en tu código SASS.
Ejemplo
1.container {
2 & > .header {
3 & > .title {
4 font-size: 20px;
5 }
6 }
7}CSS compilado
1.container > .header > .title {
2 font-size: 20px;
3}Selector adyacente (+)
Para dar estilo al elemento hermano que sigue inmediatamente, utiliza +.
Ejemplo
1.item {
2 & + .item {
3 margin-top: 10px;
4 }
5}CSS compilado
1.item + .item {
2 margin-top: 10px;
3}Selector de hermanos generales (~)
Para dar estilo a todos los hermanos siguientes al mismo nivel, utiliza ~.
Ejemplo
1.alert {
2 & ~ .alert {
3 border-top: 1px solid red;
4 }
5}CSS compilado
1.alert ~ .alert {
2 border-top: 1px solid red;
3}Pseudoclases y pseudo-elementos con anidamiento
Las pseudoclases y pseudo-elementos también se pueden escribir fácilmente en SASS.
Ejemplo
1.button {
2 &:hover {
3 background-color: blue;
4 }
5 &::after {
6 content: '';
7 display: block;
8 }
9}CSS compilado
1.button:hover {
2 background-color: blue;
3}
4.button::after {
5 content: '';
6 display: block;
7}Ejemplo práctico
A continuación se muestra un ejemplo de un estilo complejo que combina varios combinadores.
Código SASS
1.menu {
2 .menu-item {
3 & > .submenu {
4 display: none;
5
6 & > .submenu-item {
7 font-size: 14px;
8 }
9 }
10 & + .menu-item {
11 margin-left: 15px;
12 }
13 }
14}CSS compilado
1.menu .menu-item > .submenu {
2 display: none;
3}
4.menu .menu-item > .submenu > .submenu-item {
5 font-size: 14px;
6}
7.menu .menu-item + .menu-item {
8 margin-left: 15px;
9}Resumen
Si entiendes correctamente el anidamiento y los combinadores en SASS, puedes escribir CSS más conciso y legible.
Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.