0

SASS - Pré-Processador de CSS

Eduardo Cupertino
Eduardo Cupertino

Para entender o que é SASS e por que você pode precisar da linguagem, primeiro você deve entender o CSS. O SASS torna tudo um pouco mais sofisticado e simplifica muito o trabalho de criação de um design.


Todos os navegadores modernos podem exibir CSS sem erros, mas esse não é necessariamente o caso do SASS (que está em uso há mais de 10 anos) ou outras linguagens de folha de estilo estendidas. Por este motivo, o SASS é considerado um pré-processador. O código no documento SASS é primeiro convertido em CSS antes que o código-fonte, ou seja, o site, seja entregue ao sistema.


Por que você precisa do SASS?


A princípio, não parece haver nenhuma razão para que o SASS seja necessário. Afinal, o CSS tornou possível desenvolver páginas técnicas e com um design atraente por décadas. Mesmo se você quiser trabalhar com SASS de agora em diante, não pode evitar CSS. A linguagem da folha de estilo antiquada continuará a ser no futuro como a base da apresentação. SASS e outras linguagens simplesmente se baseiam no esqueleto do CSS.


Claro, com SASS você tem algumas opções que não são oferecidas apenas pelo CSS:


   Variáveis: Com o SASS, você pode salvar informações em variáveis ​​para serem usadas novamente mais tarde. Portanto, é possível, por exemplo, armazenar centralmente um valor de cor em uma variável catchier.

Funções matemáticas: no SASS, você também pode usar operações matemáticas como +, -, *, / ou%. Isso permite que você influencie as especificações de tamanho, por exemplo.

Funções: Outras funções também facilitam o trabalho no design. Eles permitem que você modifique os valores das cores ou analise listas, entre outras coisas.

Loops: Outra vantagem do SASS é a capacidade de configurar loops. Eles são repetidos até atingirem um status definido por você.

Distinções de maiúsculas e minúsculas: têm uma função semelhante às instruções condicionais "if" e "else". Os comandos fornecidos são executados apenas se condições específicas forem atendidas.

Mixins: Mixins, simplesmente, são modelos. Você pode criá-los você mesmo ou simplesmente integrá-los em seu próprio código ao usar uma estrutura.

Recuos: O SASS original (em oposição ao SCSS) trabalha com recuos e quebras de linha para estruturar o código. Você não precisa de parênteses para exibir o aninhamento ou ponto-e-vírgulas para marcar as extremidades da linha.

Aninhamento: CSS não permite que você trabalhe com aninhamento no código. O SASS, entretanto, oferece aos usuários a opção de apresentar dependências visualmente para reduzir redundâncias e simplificar o processo de escrita.

Heranças: é possível herdar propriedades de um seletor para outro. Isso economiza algum esforço de escrita e mantém o código mais enxuto.

Arquivos parciais: para integrar elementos de código em um arquivo SASS, você também pode usar parciais. Esses são arquivos que devem conter apenas algumas linhas de CSS e são importados para um arquivo SASS por comando.

Veja mais em https://sass-lang.com/guide


Além do SASS, o LESS também se estabeleceu como pré-processador de css mas este comparativo vamos deixar pra outro capítulo.


Fontes: https://www.zup.com.br/blog/o-que-sao-pre-processadores-css

https://www.ionos.com/digitalguide/websites/web-development/sass/


0
0

Comentários (3)

1
Ana Franca

Ana Franca

21/09/2021 23:03

Muito bacana, aprendi SASS recentemente e adorei as opções que ele fornece, nunca pensei que poderia usar lógica de programação com CSS.

0
Eduardo Cupertino

Eduardo Cupertino

22/09/2021 08:43

Dá até vergonha admitir que eu descobri SASS acompanhando o video de um gringo que faz a transição do Design UI/UX ao Ecommerce - https://www.youtube.com/watch?v=cLhnubqavDg Faz parecer simples mas o video tem mais de 8 horas!

1
Daniel Araújo

Daniel Araújo

21/09/2021 18:34

Muito legal

No SASS permite utilizar lógica de programação juntamente com CSS

De FrontEnd para FullStack - Em busca de QA .NET C# e muito mais

Brasil