Combinadores em Aninhamento

Este artigo explica sobre os combinadores em aninhamento.

Vamos explicar como usar combinadores em aninhamento com SASS e fornecer exemplos de código para ajudá-lo a entender passo a passo.

YouTube Video

Combinadores em Aninhamento

No SASS, você pode escrever seletores CSS de forma concisa com base em relações de pai e filho, mas precisa de atenção especial para lidar corretamente com combinadores como seletores descendentes e adjacentes.

Noções básicas de Aninhamento

No SASS, ao aninhar seletores filhos dentro de seletores pais, você pode representar relações de pai e filho de forma clara e concisa no CSS.

Exemplo: Aninhamento Básico

1.nav {
2    ul {
3        li {
4            color: blue;
5        }
6    }
7}

CSS Compilado

1.nav ul li {
2    color: blue;
3}

Referência ao Seletor Pai (&)

O & do SASS é usado para referenciar o seletor pai atual.

Combinando Combinadores e &

Ao usar &, você pode criar seletores flexíveis.

Exemplo

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}

Notação abreviada para &

No SASS, quando um combinador é colocado no início de um seletor, o seletor pai é inserido implicitamente, então você pode omitir o &.

Casos em que a omissão é possível

Por exemplo, quando você escreve + .item, o SASS interpreta internamente como & + .item e gera automaticamente a combinação com o seletor pai.

Exemplo

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}

Visão Geral dos Combinadores

Os combinadores CSS definem a relação entre seletores. A seguir, estão os principais tipos de combinadores.

1. Seletor Descendente (espaço) Um seletor descendente seleciona todos os elementos descendentes contidos em um elemento pai. Exemplo: .parent .child

2. Seletor de Filho (> ) Um seletor de filho seleciona apenas os elementos filhos imediatos. Exemplo: .parent > .child

3. Seletor Adjacente (+) Um seletor adjacente seleciona o elemento irmão adjacente imediatamente seguinte. Exemplo: .sibling1 + .sibling2

4. Seletor de Irmãos Gerais (~) O seletor de irmãos gerais seleciona todos os elementos irmãos subsequentes. Exemplo: .sibling1 ~ .sibling2

Como Usar Combinadores no SASS

Seletor Descendente (espaço)

No aninhamento do SASS, o seletor descendente por espaço é aplicado por padrão.

Exemplo

1.container {
2    .header {
3        .title {
4            font-size: 20px;
5        }
6    }
7}

CSS Compilado

1.container .header .title {
2    font-size: 20px;
3}

Seletor de Filho (> )

Se você quiser usar um seletor de filho, escreva explicitamente > no seu código SASS.

Exemplo

1.container {
2    & > .header {
3        & > .title {
4            font-size: 20px;
5        }
6    }
7}

CSS Compilado

1.container > .header > .title {
2    font-size: 20px;
3}

Seletor Adjacente (+)

Para estilizar o elemento irmão imediatamente seguinte, use +.

Exemplo

1.item {
2    & + .item {
3        margin-top: 10px;
4    }
5}

CSS Compilado

1.item + .item {
2    margin-top: 10px;
3}

Seletor de Irmãos Gerais (~)

Para estilizar todos os irmãos subsequentes no mesmo nível, use ~.

Exemplo

1.alert {
2    & ~ .alert {
3        border-top: 1px solid red;
4    }
5}

CSS Compilado

1.alert ~ .alert {
2    border-top: 1px solid red;
3}

Pseudo-classes e Pseudo-elementos com Aninhamento

Pseudo-classes e pseudo-elementos também podem ser facilmente escritos no SASS.

Exemplo

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}

Exemplo Prático

Abaixo está um exemplo de um estilo complexo combinando vários 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}

Resumo

Se você entender corretamente o aninhamento e os combinadores no SASS, poderá escrever CSS mais conciso e legível.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video