Как создать комбинированный дочерний селектор в SASS?

Введение: давайте сначала поговорим о различных типах комбинаторов, доступных в CSS.

Комбинатор : Комбинатор - это то, что объясняет взаимосвязь между селекторами. Селектор CSS может содержать более одного простого селектора. Между простыми селекторами мы можем включить комбинатор.

There are four different combinators in CSS:

• Descendant selector (space)
• Child selector (>)
• Adjacent sibling selector (+)
• General sibling selector (~)

1. Descendant Selector: The descendant selector matches all elements that are descendants of a specified element.

   The following example selects all <p> elements inside <div> elements:

   div p {
    background-color: red;
   }
   

2. Child Selector: The child selector selects all elements that are the children of a specified element.

   The following example selects all <p> elements that are children of a <div> element:

   div > p {
    background-color: red;
   }
   

3. Adjacent Sibling Selector: The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element. Sibling elements must have the same parent element, and “adjacent” means “immediately following”.

   The following example selects all <p> elements that are placed immediately after <div> elements:

   div + p {
    background-color: red;
   }
   

4. General Sibling Selector: The general sibling selector selects all elements that are siblings of a specified element.

   The following example selects all <p> elements that are siblings of <div> elements:

   div ~ p {
    background-color: red;
   }
   

Now let’s talk about creating a combined child selector in SASS.

There are several ways to create a combined child selector in SASS.

See the examples given below.

Without the combined child selector you would probably do something like this:

If you want to produce the same syntax with >, you can do this:

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

Output:

The above code compiles to the given code in CSS:

card > outer > inner {
 color: red;
}

Or in SASS, it compiles to:

card
 > outer
   > inner
     color: red