Sass (Syntactically Awesome Style Sheets) é uma linguagem de extensão para CSS que adiciona recursos avançados como variáveis, aninhamento, mixins e funções, permitindo escrever estilos de forma mais limpa, modular e fácil de manter. Sua maturidade e compatibilidade com todas as versões de CSS o tornam a escolha de desenvolvedores que buscam produtividade sem abrir mão da estabilidade em produção.

Por que usar Sass?

• Maior legibilidade e organização: com aninhamento de seletores, fica mais fácil entender a hierarquia e a estrutura dos estilos.
• Reutilização de código: variáveis centralizam valores (cores, espaçamentos, fontes) e mixins encapsulam trechos de CSS repetidos.
• Manutenção simplificada: alterar uma cor primária em um único lugar reduz riscos de inconsistências.

Instalando Sass

Recomendamos usar o Dart Sass. Exemplo com npm:

npm install -D sass

Para verificar a versão instalada:

npx sass --version

1. Variáveis

Variáveis ($nome-da-variavel) armazenam valores reutilizáveis:

    $primary-color: #1e90ff;
    $spacing-unit: 1rem;

    .button {
        background-color: $primary-color;
        padding: $spacing-unit;
    }
                        

2. Aninhamento

Estruture seletores de forma hierárquica usando aninhamento e o operador &:

    .nav {
        ul {
            list-style: none;
            li {
            display: inline-block;
                &.active a {
                    font-weight: bold;
                }
            }
        }
    }
                        

3. Partials e @use

Separe o CSS em arquivos menores (partials iniciados com _) e importe-os no principal:

    // _variables.scss
    $font-stack: Helvetica, sans-serif;

    // _mixins.scss
    @mixin center {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    // main.scss
    @use 'variables';
    @use 'mixins';

    body {
        font-family: variables.$font-stack;
    }

    .container {
        @include mixins.center;
    }
                        

4. Mixins e Funções

Mixins com @mixin e @include e funções com @function retornam valores calculados:

    // Mixin para box-shadow
    @mixin box-shadow($x, $y, $blur, $color) {
        -webkit-box-shadow: $x $y $blur $color;
                box-shadow: $x $y $blur $color;
    }

    .card {
        @include box-shadow(0px, 2px, 4px, rgba(0, 0, 0, .1));
    }

    // Função para rem
    @function rem($pixels) {
        @return $pixels / 16 * 1rem;
    }

    h1 {
        font-size: rem(32); // 2rem
    }
                        

Boas Práticas

• Estrutura modular: organize em pastas base/, components/, layout/, themes/ e utils/.
• Nomenclatura consistente: use BEM ou convenções semelhantes.
• Linting: integre stylelint com stylelint-scss para garantir padrões.
• Documentação: mantenha um guia de estilo atualizado.
• Limite de aninhamento: evite profundidade maior que três níveis.

Integração com Build Tools

• Webpack: use sass-loader junto com css-loader e style-loader.
• Gulp/Grunt: incorpore gulp-sass.
• Vite/Rollup: adicione @rollup/plugin-sass ou configure no Vite.

Conclusão

Sass é essencial para desenvolvedores front-end que querem CSS limpo, organizado e de fácil manutenção. Experimente variáveis, mixins, funções e aninhamento para transformar seus estilos e acelerar o desenvolvimento!