Como aninhar regras e propriedades em sass?

Sass sigla para folha de estilo sintaticamente impressionante é um pré-processador e extensão de CSS que funciona bem com todas as versões do CSS. É bem conhecido por sua sintaxe limpa e bem estruturada que, como resultado, aumenta a capacidade da linguagem básica. A SASS facilita seus usuários, apoiando o uso de variáveis, nidificação, mixins, herança, etc. O assunto em discussão neste artigo está nidificando em Sass. Aqui vamos demonstrar como você pode aninhar regras e propriedades em SASS.

Como ninho regras em sass

O ninho é considerado como o procedimento de combinar várias regras. Sass permite que seus usuários ninhem regras, impedindo de escrever seletores externos repetidamente, tornando o código claro e mais legível que o CSS básico.

Exemplo
O exemplo demonstrado abaixo mostra como o ninho de Sass é feito.

Html

• Lar
>

• Serviços


• Sobre nós


• Contate-nos

No código acima, estamos criando uma barra lateral fazendo um recipiente de div e aninhando uma lista não ordenada dentro dela. Além disso, também fornecemos o link do arquivo CSS gerado após compilar nosso arquivo SASS ao atributo href da tag.

Sass

div
flutuar: esquerda;
largura: 25%;
Background-Color: Rosybrown;
preenchimento: 25px 15px;
ul
Tipo no estilo de lista: nenhum;
margem: 0;
preenchimento: 0;

li
preenchimento: 8px;
Margin-Bottom: 15px;
Background-Color: Plum;
cor branca;

Agora você notará que no arquivo SASS estamos primeiro estilizando nosso contêiner div e depois aninhando nossos seletores Ul, e Li dentro do seletor da div. No entanto, o mesmo código acima no CSS padrão seria algo assim.

CSS

div
flutuar: esquerda;
largura: 25%;
Background-Color: Rosybrown;
preenchimento: 25px 15px;

div ul
Tipo no estilo de lista: nenhum;
margem: 0;
preenchimento: 0;

div li
preenchimento: 8px;
Margin-Bottom: 15px;
Background-Color: Plum;
cor branca;

No código acima, você verá que precisamos usar o seletor da div com qualquer outro seletor para estilizar nossos vários elementos. No CSS, você não pode ninho seletores/regras dentro um do outro, em vez de precisar defini -los um por um.

Essa é a vantagem que o SASS tem sobre o CSS que impede que seus usuários repetam seletores redundantes, tornando o código claro e mais legível. A saída do exemplo acima é mostrada abaixo.

Saída

Uma barra lateral foi gerada e estilizada usando o ninho em sass.

Como nivinhar propriedades em sass

Outra vantagem do SASS é que ele também permite o ninho de propriedades. Você deve ter notado que o prefixo de várias propriedades CSS é o mesmo que, tamanho de fonte, família de fontes, peso-fonte, etc. A fonte prefixo é a mesma nessas propriedades.

Agora, para evitar usar este prefixo repetidamente em sua folha de estilo, você pode aninhar essas propriedades em SASS. Você deve estar se perguntando como fazer isso. Consulte o exemplo abaixo.

Exemplo
Este exemplo mostra como aninhar propriedades em sass.

Html

Este é um parágrafo.

No código acima, simplesmente criamos um parágrafo.

Sass

corpo
fundo:

Cor: rosa;
anexo: fixo;


P
Fonte:

Família: Verdana;
Tamanho: 20px;
Peso: negrito;

Agora você notará no código acima que, ao denominar nossos elementos com várias propriedades CSS, escrevemos o prefixo uma vez e depois aninhou as propriedades relacionadas a esse prefixo dentro do seletor. Dessa forma, evitamos escrever o mesmo prefixo repetidamente.

CSS

Esta é a saída CSS de Transpilado.

Saída

Os elementos foram estilizados com sucesso usando o ninho em Sass.

Conclusão

Para fins de nidificar as regras em SASS, você só precisa escrever o seletor externo uma vez e aninhar o restante dos seletores dentro dele. Enquanto isso, as propriedades de nidificação em Sass permite que você escreva o prefixo de propriedades uma vez e aninhe as propriedades relacionadas dentro dele. Regras e propriedades de nidificação em SASS impede que você escreva valores redundantes de CSS repetidamente, tornando seu código claro e mais legível. Este artigo o orienta sobre como aninhar regras e propriedades em sass.