1 min de leitura ·

3 features incríveis do SASS 👓

Segundo a página oficial da linguagem, SASS se descreve como "CSS com super poderes", vamos analisar alguns desses poderes que podemos utilizar com ele e descobrir como isso pode nos ajudar a criar CSS melhores.

👓 Nested:

SASS permite aninhar seletores CSS. Isso significa que você pode criar estilos para elementos aninhados dentro de outros elementos. Isso simplifica a estrutura do código e facilita a leitura e manutenção.

👓 Mixin:

Imagine poder reutilizar blocos inteiros de código CSS em vários lugares sem copiar e colar. Isso é o que os Mixins no SASS permitem. Defina um conjunto de estilos uma vez e use-o em todo o seu projeto. Economize tempo e torne seu código mais limpo e organizado.

👓 Parent selector (&):

Com o seletor &, você pode referenciar o elemento pai de um seletor, o que pode ser uma grande ajuda em situações complexas de estilo.

SASS é uma ferramenta incrível, que torna o CSS mais eficiente e escalável.

Voce utiliza SASS em seus projetos? O que você mais gosta? Coloca aqui nos comentários e vamos bater um papo.

whyyousmile

10 meses atrás

Curto muito a função de loops. Já montei vários design systems com essas funções. Realmente elevam o nível do CSS normal. Apesar de agora termos o nesting nativo, acho que o sass segue sendo muito relevante

D3vlopes

Autor

10 meses atrás

Sim, loops são excelentes quando se tem muitas variações.

uriel

10 meses atrás

O css normal já pode ter nested:

.nav__item {
  & a {
    display: block;
    padding: 1.5rem 1rem;
  }
}

.nav__item {
  a {
    display: block;
    padding: 1.5rem 1rem;
  }
}

.nav__item {
  .link {
    display: block;
    padding: 1.5rem 1rem;
  }
}

mais em > https://ishadeed.com/article/css-nesting?ck_subscriber_id=2125267392&utm_source=pocket_reader