Aninhamento no SASS

Este artigo explica o aninhamento no SASS.

Vamos explicar o aninhamento em SASS passo a passo, incluindo código de exemplo para aprofundar sua compreensão.

YouTube Video

Aninhamento no SASS

SASS é uma linguagem de folhas de estilo estendida para CSS que oferece muitos recursos para uma estilização eficiente. Entre esses recursos, o aninhamento é especialmente útil para representar visualmente a estrutura hierárquica do CSS.

Noções básicas sobre aninhamento

No SASS, você pode organizar seu código visualmente escrevendo seletores CSS em uma estrutura hierárquica. Por exemplo, vamos ver como você pode reescrever o seguinte código CSS usando aninhamento.

 1/* CSS */
 2.nav {
 3    background-color: #333;
 4}
 5.nav ul {
 6    margin: 0;
 7    padding: 0;
 8}
 9.nav ul li {
10    list-style: none;
11}
12.nav ul li a {
13    color: #fff;
14    text-decoration: none;
15}

Usando SASS, você pode escrever esse código de forma concisa com aninhamento, conforme mostrado abaixo.

 1/* SASS */
 2.nav {
 3    background-color: #333;
 4
 5    ul {
 6        margin: 0;
 7        padding: 0;
 8
 9        li {
10            list-style: none;
11
12            a {
13                color: #fff;
14                text-decoration: none;
15            }
16        }
17    }
18}

• Este código utiliza o recurso de aninhamento do SASS para descrever os estilos do menu de navegação de forma concisa e hierárquica. Ao usar o aninhamento, as relações de pai e filho ficam visualmente claras e a legibilidade melhora.

Referência aos seletores pai (&)

Quando precisar referenciar o seletor pai dentro de estilos aninhados, use &. Isso permite criar seletores com estados ou modificadores específicos.

 1.button {
 2    background-color: #007bff;
 3    color: #fff;
 4
 5    &:hover {
 6        background-color: #0056b3;
 7    }
 8
 9    &:active {
10        background-color: #003f7f;
11    }
12}

• Este código usa & no SCSS para definir os estados :hover e :active para o seletor pai .button.

CSS gerado

 1.button {
 2    background-color: #007bff;
 3    color: #fff;
 4}
 5.button:hover {
 6    background-color: #0056b3;
 7}
 8.button:active {
 9    background-color: #003f7f;
10}

Aninhando Media Queries

No SASS, você também pode aninhar media queries. Isso permite implementar design responsivo mantendo a relevância dos seus estilos.

 1.container {
 2    width: 100%;
 3
 4    @media (min-width: 768px) {
 5        width: 750px;
 6    }
 7
 8    @media (min-width: 1024px) {
 9        width: 970px;
10    }
11}

• Este código aninha uma media query dentro da classe .container, permitindo um design responsivo que altera a largura com base no tamanho da tela.

CSS gerado

 1.container {
 2    width: 100%;
 3}
 4@media (min-width: 768px) {
 5    .container {
 6        width: 750px;
 7    }
 8}
 9@media (min-width: 1024px) {
10    .container {
11        width: 970px;
12    }
13}

Pontos a observar sobre aninhamento

Usar aninhamento excessivo pode tornar seu código muito complexo e reduzir sua manutenibilidade. Você deve evitar o aninhamento profundo como no exemplo abaixo.

 1.header {
 2    .nav {
 3        ul {
 4            li {
 5                a {
 6                    color: red;
 7                }
 8            }
 9        }
10    }
11}

Este tipo de código está muito aninhado, portanto pode ser refatorado da seguinte forma.

1.header .nav ul li a {
2    color: red;
3}

Exemplo prático: Barra de navegação

Abaixo está um exemplo de estilização de barra de navegação usando aninhamento SASS.

 1.navbar {
 2    background-color: #222;
 3    color: #fff;
 4
 5    ul {
 6        display: flex;
 7        list-style: none;
 8        margin: 0;
 9        padding: 0;
10
11        li {
12            margin-right: 15px;
13
14            a {
15                color: #fff;
16                text-decoration: none;
17
18                &:hover {
19                    text-decoration: underline;
20                }
21            }
22        }
23    }
24}

• Este código organiza e define os estilos para listas e links dentro da barra de navegação, incluindo efeitos hover, usando aninhamento SASS.

CSS gerado

 1.navbar {
 2    background-color: #222;
 3    color: #fff;
 4}
 5.navbar ul {
 6    display: flex;
 7    list-style: none;
 8    margin: 0;
 9    padding: 0;
10}
11.navbar ul li {
12    margin-right: 15px;
13}
14.navbar ul li a {
15    color: #fff;
16    text-decoration: none;
17}
18.navbar ul li a:hover {
19    text-decoration: underline;
20}

Resumo

O recurso de aninhamento no SASS é uma ferramenta poderosa para descrever de forma concisa a estrutura hierárquica do CSS e melhorar a legibilidade. No entanto, é importante evitar o aninhamento excessivo e organizar seu código adequadamente.

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