Sintaxe SASS e Sintaxe SCSS

Este artigo explica a sintaxe do SASS e do SCSS.

Vamos explicar em detalhe as diferenças entre as sintaxes SASS e SCSS, e fornecer exemplos concretos para aprofundar sua compreensão.

YouTube Video

Sintaxe SASS e Sintaxe SCSS

SASS é uma linguagem de folha de estilos projetada para expandir as capacidades do CSS. SASS possui duas sintaxes. São elas a sintaxe SASS e a sintaxe SCSS.

Visão geral do SASS e do SCSS

Sintaxe SASS

A sintaxe do SASS é escrita da seguinte forma:.

 1$primary-color: #3498db
 2$secondary-color: #2ecc71
 3
 4body
 5    font-family: Arial, sans-serif
 6    color: $primary-color
 7
 8h1
 9    font-size: 2rem
10    color: $secondary-color
11
12    &:hover
13        text-decoration: underline

• Uma sintaxe baseada em indentação, que não utiliza chaves {} nem ponto e vírgula ;.
• É projetada para escrever códigos concisos e de fácil leitura.
• A extensão do arquivo é .sass.

Sintaxe SCSS

A sintaxe do SCSS é escrita da seguinte forma:.

 1$primary-color: #3498db;
 2$secondary-color: #2ecc71;
 3
 4body {
 5    font-family: Arial, sans-serif;
 6    color: $primary-color;
 7}
 8
 9h1 {
10    font-size: 2rem;
11    color: $secondary-color;
12
13    &:hover {
14        text-decoration: underline;
15    }
16}

• Uma sintaxe parecida com o CSS, utilizando chaves {} e ponto e vírgula ;.
• Altamente compatível com códigos CSS existentes, permitindo converter CSS diretamente em um arquivo SCSS.
• A extensão do arquivo é .scss.

Principais diferenças entre SASS e SCSS

Critérios de escolha

Qual utilizar depende das necessidades do projeto e da equipe.

• Quando escolher a sintaxe SASS

  • A sintaxe SASS permite escrever um código conciso e limpo.
  • Se toda a equipe está familiarizada com a sintaxe SASS, esta é uma escolha adequada.

• Quando escolher a sintaxe SCSS

  • Se a compatibilidade com CSS é importante e muitos membros da equipe conhecem CSS, a sintaxe SCSS é mais adequada.

Vantagens do SASS e do SCSS

A seguir estão as vantagens comuns das sintaxes SASS e SCSS:.

1. Uso de variáveis

1$font-stack: Helvetica, sans-serif;
2$primary-color: #333;
3
4body {
5    font: 100% $font-stack;
6    color: $primary-color;
7}

• Ao usar variáveis, você pode definir um estilo em um só lugar e reutilizá-lo em vários locais. As alterações de design podem ser aplicadas em toda a folha simplesmente mudando os valores das variáveis, melhorando a manutenção.

2. Mixins

1@mixin border-radius($radius) {
2    -webkit-border-radius: $radius;
3    -moz-border-radius: $radius;
4    border-radius: $radius;
5}
6
7button {
8    @include border-radius(10px);
9}

• Mixins permitem agrupar estilos ou códigos com prefixo de fornecedor que são usados repetidamente em vários lugares, podendo aplicá-los de forma flexível usando argumentos. Isso reduz a duplicação de código e melhora a manutenção.

3. Regras aninhadas

 1nav {
 2    ul {
 3        margin: 0;
 4        padding: 0;
 5        list-style: none;
 6    }
 7
 8    li { display: inline-block; }
 9    a { text-decoration: none; }
10}

• Ao usar aninhamento, você pode escrever estilos de forma hierárquica, seguindo a estrutura do HTML, facilitando o agrupamento de regras relacionadas. Isso melhora tanto a legibilidade quanto a manutenção do código.

4. Herança

 1%button-style {
 2    display: inline-block;
 3    padding: 10px 20px;
 4    font-size: 16px;
 5}
 6
 7.btn-primary {
 8    @extend %button-style;
 9    background-color: blue;
10    color: white;
11}
12
13.btn-secondary {
14    @extend %button-style;
15    background-color: gray;
16    color: black;
17}

• Ao usar herança, você pode agrupar e reutilizar estilos comuns. Isso reduz a duplicação de código e mantém um design consistente.

Conclusão

A escolha entre SASS e SCSS depende das preferências do desenvolvedor e dos requisitos do projeto.

A sintaxe SASS enfatiza a simplicidade, enquanto a sintaxe SCSS valoriza a compatibilidade com CSS. Ambas as sintaxes são poderosas e podem aumentar significativamente a produtividade com CSS.

Escolher a opção mais adequada para o seu projeto permite uma gestão eficiente das folhas de estilo.

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