¿Cómo crear un selector de niños combinado en SASS?

Introducción: Hablemos primero de los diversos tipos de Combinadores disponibles en CSS.

Combinador : Un combinador es algo que explica la relación entre los selectores. Un selector CSS puede contener más de un selector simple. Entre los selectores simples, podemos incluir un combinador.

Hay cuatro combinadores diferentes en CSS:

• Selector de descendientes (espacio)
• Selector de niños (>)
• Selector de hermanos adyacentes (+)
• Selector general de hermanos (~)

1. Selector de descendientes: el selector de descendientes coincide con todos los elementos que son descendientes de un elemento específico.

   El siguiente ejemplo selecciona todos los elementos <p> dentro de los elementos <div>:

   div p {
    background-color: red;
   }
   

2. Selector de niños: El selector de niños selecciona todos los elementos que son los niños de un elemento específico.

   El siguiente ejemplo selecciona todos los elementos <p> que son hijos de un elemento <div>:

   div > p {
    background-color: red;
   }
   

3. Selector de hermanos adyacentes: el selector de hermanos adyacentes selecciona todos los elementos que son hermanos adyacentes de un elemento específico. Los elementos hermanos deben tener el mismo elemento principal, y «adyacente» significa «inmediatamente después».

   El siguiente ejemplo selecciona todos los elementos <p> que se colocan inmediatamente después de los elementos <div>:

   div + p {
    background-color: red;
   }
   

4. Selector de hermanos general: El selector de hermanos general selecciona todos los elementos que son hermanos de un elemento específico.

   El siguiente ejemplo selecciona todos los elementos <p> que son hermanos de los elementos <div>:

   div ~ p {
    background-color: red;
   }
   

Ahora hablemos sobre la creación de un selector de niños combinado en SASS.

Hay varias formas de crear un selector secundario combinado en SASS.

Vea los ejemplos que se dan a continuación.

Sin el selector de niños combinado, probablemente haría algo como esto:

card {
 outer {
   inner {
     color: red;
   }
 }
}

Si desea producir la misma sintaxis con >, puede hacer esto:

card {
 > outer {
   > inner {
     color: red;
   }
 }
}

Producción:

El código anterior compila el código dado en CSS:

card > outer > inner {
 color: red;
}

O en SASS, compila a:

card
 > outer
   > inner
     color: red