LESS CSS: Guia Completo do Pré-processador (2026)

LESS CSS é um pré-processador que adiciona variáveis, mixins, nesting e operações matemáticas ao CSS. Aprenda a configurar e usar com projeto prático.

Introdução

Se você já se pegou copiando a mesma cor hexadecimal em dez lugares diferentes da sua folha de estilos, o LESS CSS foi feito para você. Ele é um pré-processador CSS que transforma a forma como você escreve estilos, eliminando repetições, organizando o código e tornando a manutenção muito mais fácil em projetos que crescem.

Neste guia completo, você vai entender o que é o LESS CSS, sua história, como configurar tanto no navegador quanto em produção com Node.js, os recursos básicos e avançados que ninguém mais explica, um mini projeto prático para fixar o aprendizado, e quando faz sentido escolher LESS em vez de SASS ou de CSS nativo em 2026.

Para quem ainda está construindo a base, recomendamos primeiro dar uma olhada no nosso guia para aprender HTML e CSS do zero. A partir daqui, vamos direto ao ponto.

Para fazer o download do(s) arquivo(s) utilizados na aula, preencha com o seu e-mail:

Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.

O que é o LESS CSS?

O LESS CSS, sigla para Leaner Style Sheets, é um pré-processador CSS que adiciona funcionalidades poderosas à linguagem original, como variáveis, mixins, operações matemáticas, aninhamento e funções. O arquivo .less é processado por um compilador e convertido em CSS puro, que o navegador entende sem nenhuma dependência adicional.

O nome é uma brincadeira com o significado de CSS, "Cascading Style Sheets". "Leaner" significa "mais enxuto", e a proposta é exatamente essa: escrever menos código repetido com mais organização. O LESS foi criado em 2009 por Alexis Sellier, conhecido como cloudhead, originalmente em Ruby.

Em 2012, o autor passou o projeto para um time de mantenedores e o compilador foi reescrito em JavaScript, o que permitiu rodar tanto no navegador quanto em ambientes Node.js. Você pode conferir a história completa na documentação oficial do LESS.

Uma característica importante: qualquer arquivo CSS válido também é um arquivo LESS válido. Isso é o que a documentação chama de backwards-compatible. Você pode renomear seu .css para .less e ele continua funcionando, e a partir dali você vai introduzindo os recursos do pré-processador aos poucos.

Por que usar um pré-processador CSS?

O CSS puro funciona bem para projetos pequenos, mas à medida que o site cresce, manter consistência vira um pesadelo. Você acaba repetindo cores, reescrevendo os mesmos seletores várias vezes e fazendo alterações em dezenas de lugares quando precisa mudar um único valor.

O LESS resolve esses problemas trazendo o que faltava ao CSS tradicional:

• Variáveis: armazene cores, tamanhos e fontes em um único lugar e reutilize em todo o código.
• Mixins: crie blocos de estilo reutilizáveis e injete em qualquer seletor com uma linha.
• Operações matemáticas: faça cálculos diretos nos valores, sem precisar do calc().
• Nesting: organize os seletores de forma hierárquica, refletindo a estrutura do HTML.

É verdade que o CSS moderno já incorporou parte dessas ideias, com as variáveis nativas do CSS (custom properties) e o nesting nativo. Mas o LESS continua oferecendo recursos como mixins parametricos, guards e loops, que ainda não existem em CSS puro.

Como configurar o LESS no seu projeto

Existem duas formas principais de usar o LESS, e a escolha depende do estágio do seu projeto. Para protótipos e estudo, você pode rodar tudo direto no navegador via CDN. Para produção, o ideal é compilar antes com Node.js e servir só CSS puro.

Configuração rápida com CDN no navegador

A forma mais rápida de começar é adicionar dois elementos no <head> do seu HTML, sem instalar nada. O navegador faz o trabalho de compilar o LESS em tempo real.

Essa abordagem é ótima para aprender e prototipar, mas tem um custo: o navegador precisa baixar o compilador e processar o arquivo .less antes de aplicar os estilos, o que afeta a performance.

Compilação em produção com Node.js

Em produção, o caminho recomendado é compilar o LESS antes do deploy e servir apenas o .css final. Para isso, você instala o pacote oficial via npm:

npm install -g less

Depois, basta usar o compilador lessc:

lessc styles.less styles.css

Para projetos reais, você normalmente instala como dependência local com npm install --save-dev less e configura um script no package.json.

Builders modernos como Vite, webpack e Parcel já vêm com loaders prontos para LESS, o que automatiza a compilação durante o desenvolvimento e o build de produção. Tudo isso está documentado no pacote less no npm.

A vantagem dessa abordagem é dupla: o site fica mais rápido porque o navegador recebe CSS já pronto, e você ganha recursos extras como source maps, minificação e watch mode automático. do cliente. Confira a documentação oficial do LESS para a configuração completa com Node.js.

Full Stack Impressionador

Essa é uma trilha de especialização que vai te tornar um verdadeiro Desenvolvedor Web Full Stack, dominando todas as principais tecnologias usadas tanto para o Front End quanto para o Backend e ainda para Mobile, construindo projetos práticos e exercícios aplicados à realidade das empresas. Tudo o que você precisa para se tornar um Desenvolvedor Full Stack em um único lugar.

Começar agora

Recursos do LESS CSS na prática

Agora que o ambiente está configurado, vamos aos quatro recursos que cobrem 90% do uso do LESS no dia a dia. Todos os exemplos abaixo são compatíveis com o LESS 4.x e podem ser executados tanto no navegador quanto via Node.js.

Variáveis: centralize cores e valores reutilizáveis

No LESS, variáveis são declaradas com o símbolo @. A sintaxe é mais direta do que em CSS nativo, onde você precisa declarar --variavel no :root e depois chamar com var(--variavel).

// Variáveis
@cor-fundo: #f1f1f1;
@cor-fonte: #333;
@font-stack: "Montserrat", sans-serif;

body {
  background-color: @cor-fundo;
  color: @cor-fonte;
  font-family: @font-stack;
}

Se você precisar mudar a cor de fundo do projeto inteiro, basta alterar @cor-fundo em um único lugar, e todos os elementos que usam essa variável são atualizados automaticamente.

Existe um detalhe interessante chamado lazy loading: no LESS, a variável pode ser usada antes de ser declarada no arquivo. O compilador resolve o valor final na hora de gerar o CSS, sempre escolhendo a última atribuição dentro do escopo. Isso é útil para sobrescrever valores em arquivos importados sem precisar reorganizar o código.

Há também o conceito de escopo: variáveis declaradas dentro de um seletor só valem dentro daquele bloco. Isso evita conflitos em projetos grandes e ajuda a manter o código modular.

Mixins: reutilize blocos de estilo com um comando

Mixins funcionam como funções para o seu CSS. Você define um bloco de estilos uma vez e o reutiliza em qualquer seletor com uma única linha. No LESS, basta chamar o nome da classe ou ID seguido de parênteses.

.borda-cima-baixo {
  border-top: 2px solid red;
  border-bottom: 2px solid red;
  border-left: none;
  border-right: none;
}

.botao {
  padding: 10px 32px;
  border-radius: 15px;
  font-weight: 700;
  background-color: @cor-fonte;
  color: @cor-fundo;
  .borda-cima-baixo(); // aplica o mixin aqui
}

E aqui entra um recurso que poucos artigos cobrem: os parametric mixins, ou mixins com parâmetros. Eles funcionam como funções de verdade, aceitam argumentos e podem ter valores default.

.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

#header { .border-radius(4px); }
.button { .border-radius(); } // usa o default 5px

Existe ainda a variável especial @arguments dentro de um mixin, que contém todos os argumentos passados na chamada, útil para propriedades como box-shadow que recebem múltiplos valores juntos.

Operações matemáticas: calcule sem usar calc()

O LESS permite somar, subtrair, multiplicar e dividir valores diretamente nas propriedades CSS, incluindo a mistura de unidades diferentes, algo que o CSS puro só consegue com calc().

@base: 16px;

.intro {
  font-size: @base + 2;     // 18px
  padding: @base * 1.5;     // 24px
  margin: (@base / 2);      // 8px
}

A partir do LESS 4.0, o math mode padrão é "parens-division", o que significa que a divisão com / só é avaliada dentro de parênteses, para evitar conflitos com a sintaxe de font: 16px/1.5. Para divisões fora de parênteses, basta envolver a expressão com parênteses normais.

Nesting: escreva CSS hierárquico e mais limpo

O nesting, ou aninhamento, organiza os seletores de forma hierárquica, refletindo a estrutura do HTML. Sem nesting, você repetiria .container em cada linha; com ele, tudo fica agrupado em um único bloco.

.container {
  padding: 24px;

  &:hover {
    padding: 32px;
  }

  h1 {
    font-weight: 900;
    line-height: 0.9;
  }

  p:hover {
    color: red;
  }
}

O & referencia o seletor pai diretamente: &:hover vira .container:hover. Sem o &, o LESS insere um espaço, gerando .container h1.

Vale mencionar que o CSS nativo já suporta nesting, mas de acordo com o Can I Use, ainda não está amplamente disponível em todos os navegadores antigos, o que mantém os pré-processadores relevantes para compatibilidade.

Se você quer ir além e dominar seletores avançados, vale conferir nosso artigo sobre as novas pseudo-classes do CSS.

Recursos avançados do LESS que você precisa conhecer

Os recursos básicos cobrem a maior parte das necessidades, mas o que diferencia um dev que sabe LESS de verdade é o domínio dos recursos avançados. Eles permitem escrever lógica condicional, gerar classes dinamicamente e reduzir o tamanho do CSS final.

Mixin guards e loops para lógica condicional

O LESS não tem if/else tradicional, mas implementa lógica condicional através de guards. Um guard é uma expressão associada a um mixin que decide se ele será aplicado ou não.

.text-color(@bg) when (lightness(@bg) >= 50%) {
  color: black;
}

.text-color(@bg) when (lightness(@bg) < 50%) {
  color: white;
}

.botao-claro  { background: #f0f0f0; .text-color(#f0f0f0); }
.botao-escuro { background: #222;    .text-color(#222);    }

A palavra-chave when introduz a condição. Você pode usar operadores >, >=, =, =<, < e combinar condições com and, vírgula (que funciona como or) ou not.

Os loops no LESS são feitos através de mixins recursivos com guards. Um padrão clássico é gerar classes dinâmicas, como uma grade de colunas:

.gera-colunas(@n, @i: 1) when (@i =< @n) {
  .col-@{i} { width: (@i * 100% / @n); }
  .gera-colunas(@n, (@i + 1));
}

.gera-colunas(4); // gera .col-1, .col-2, .col-3, .col-4

Esse padrão é o mesmo que frameworks como o Bootstrap 3 usavam internamente para gerar todo o sistema de grid. Tudo isso e mais detalhes estão no guia oficial de features do LESS.

Extend para reduzir duplicação no CSS final

Mixins copiam o conteúdo do bloco para cada lugar que chamam, o que pode inflar o CSS final. O :extend resolve isso fazendo o seletor que está sendo aplicado entrar na lista do bloco original, sem duplicar as regras.

.botao-base {
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

.botao-primario {
  &:extend(.botao-base);
  background: #2196f3;
  color: white;
}

.botao-secundario {
  &:extend(.botao-base);
  background: #f5f5f5;
}

No CSS final, ao invés de duplicar as propriedades nos dois botões, o LESS gera um seletor combinado: .botao-base, .botao-primario, .botao-secundario. Isso reduz o tamanho do arquivo e mantém a consistência. A regra prática é simples: use mixin quando precisar de parâmetros ou variações, e use extend quando o objetivo é compartilhar exatamente as mesmas declarações.

Mini projeto prático: card de produto com LESS CSS

Para fechar a teoria com a prática, vamos montar um card de produto com 3 variações de tema. Você vai usar variáveis, mixins parametricos, operações, nesting e funções de cor, tudo num projeto que roda direto no navegador.

Passo 1: estrutura de arquivos

Crie uma pasta para o projeto e dentro dela dois arquivos: index.html e styles.less.

Passo 2: monte o HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Card LESS</title>
  <link rel="stylesheet/less" type="text/css" href="styles.less">
  <script src="https://cdn.jsdelivr.net/npm/less" defer></script>
</head>
<body>
  <main>
    <div class="card card--azul">
      <h2>Produto</h2>
      <p>Descrição curta do produto aqui.</p>
      <button>Comprar</button>
    </div>

    <div class="card card--verde">
      <h2>Produto</h2>
      <p>Descrição curta do produto aqui.</p>
      <button>Comprar</button>
    </div>

    <div class="card card--vermelho">
      <h2>Produto</h2>
      <p>Descrição curta do produto aqui.</p>
      <button>Comprar</button>
    </div>
  </main>
</body>
</html>

Repare que o <link> aponta para o arquivo .less direto, e o script do CDN do LESS faz a compilação no navegador.

Passo 3: escreva o LESS

No styles.less, comece com um reset básico para os cards não ficarem colados na tela, e em seguida o código do projeto:

// Reset básico
body {
  margin: 0;
  padding: 40px;
  background: #fafafa;
  font-family: sans-serif;
}

main {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  max-width: 800px;
  margin: 0 auto;
}

.card { flex: 1; min-width: 220px; }

// 1. Variáveis globais
@base-spacing: 16px;
@base-radius: 8px;
@font-stack: "Inter", sans-serif;

// 2. Mixin parametrico para cards temáticos
.card-tema(@cor-base) {
  background: lighten(@cor-base, 40%);
  border: 1px solid @cor-base;
  color: darken(@cor-base, 20%);

  button {
    background: @cor-base;
    color: white;
  }

  &:hover {
    background: lighten(@cor-base, 30%);
    transform: translateY(-2px);
  }
}

// 3. Estilo base com nesting e operações
.card {
  padding: @base-spacing * 1.5;
  border-radius: @base-radius;
  font-family: @font-stack;
  transition: all 0.2s ease;

  h2 {
    margin: 0 0 (@base-spacing / 2);
    font-size: 20px;
  }

  p {
    margin: 0 0 @base-spacing;
    line-height: 1.5;
  }

  button {
    padding: (@base-spacing / 2) @base-spacing;
    border: none;
    border-radius: (@base-radius / 2);
    cursor: pointer;
  }

  // 4. Variações temáticas
  &--azul     { .card-tema(#2196f3); }
  &--verde    { .card-tema(#4caf50); }
  &--vermelho { .card-tema(#f44336); }
}

Passo 4: veja o resultado

Abra o index.html no navegador, de preferência usando a extensão Live Server do VS Code. Você vai ver três cards de produto, um em cada tema, que se reorganizam conforme a largura da janela. Ao passar o mouse sobre eles o fundo fica mais escuro e o card sobe levemente.

O que esse projeto demonstra na prática

• Variáveis centralizam espaçamento, raio e tipografia em três linhas no topo do arquivo.
• Operações matemáticas (@base-spacing * 1.5, @base-spacing / 2) criam uma escala consistente sem precisar decorar pixels.
• Funções nativas do LESS (lighten, darken) geram tons relacionados a partir de uma cor única, mantendo a harmonia visual.
• O mixin parametrico .card-tema() aceita uma cor e devolve um tema completo, com background, borda, hover e cor de botão.
• O nesting espelha a hierarquia HTML, deixando o código fácil de ler.
• O seletor &--azul adota o padrão BEM modifier de forma natural.

Adicionar um quarto tema é literalmente uma linha: &--roxo { .card-tema(#9c27b0); }. Esse é o mesmo padrão que sistemas de design profissionais usam para escalar componentes. Se quiser ver outras técnicas de layout aplicadas em projetos reais, dê uma olhada no nosso conteúdo sobre Flexbox CSS.

LESS CSS vs SASS vs CSS nativo: qual usar em 2026?

A pergunta sobre qual ferramenta escolher mudou bastante nos últimos anos. Em 2014, LESS dominava porque o Bootstrap 3 era construído nele. Em 2018, o Bootstrap 4 migrou para SASS, e o ecossistema seguiu junto. Em 2026, o cenário tem três opções viáveis, e a escolha depende do contexto do projeto.

Algumas considerações para decidir:

• Se você está em um projeto legado que já usa LESS, continue com ele. A migração custa caro e o LESS continua sendo mantido pelo time core, com releases ativos no GitHub do LESS.
• Se está começando um projeto novo do zero e o time não tem preferência forte, o SASS é a aposta segura por causa do ecossistema maior, suporte oficial em frameworks modernos e recursos mais avançados.
• Se o projeto é simples ou você quer evitar build steps, considere CSS nativo com custom properties. Hoje ele já suporta variáveis, nesting (em navegadores recentes), calc() e color-mix(), cobrindo grande parte do que os pré-processadores ofereciam.
• Para projetos modernos baseados em utilitários, vale também olhar o Tailwind CSS, que adota uma filosofia completamente diferente das três opções acima.

A escolha entre LESS, SASS e CSS nativo deixou de ser uma briga de "qual é o melhor" e virou uma decisão contextual. Saber LESS continua sendo um diferencial valioso, principalmente para trabalhar em sistemas legados e para entender os fundamentos comuns a todos os pré-processadores.

Conclusão

O LESS CSS é uma ferramenta sólida para quem quer ir além do CSS puro. Variáveis, mixins (incluindo os parametricos com guards e loops), operações matemáticas, nesting e extend trabalhando juntos transformam a forma como você organiza estilos, especialmente quando o projeto começa a escalar.

Mesmo com o SASS dominando o mercado, entender o LESS continua sendo valioso para trabalhar com bases legadas e para fixar conceitos comuns a todos os pré-processadores.

Se você quer aprender não só pré-processadores, mas todos os fundamentos e técnicas avançadas de HTML e CSS com projetos reais no portfólio, conheça o nosso Curso Completo Fullstack Impressionador e dê o próximo passo na sua carreira como dev front-end.

Além disso, se preferir esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!

FAQ - Perguntas Frequentes sobre LESS CSS

Hashtag Treinamentos

Para acessar publicações de Full Stack, clique aqui!

Posts mais recentes de Full Stack

• 
  LESS CSS: Guia Completo do Pré-processador (2026)8 de maio de 2026
  LESS CSS é um pré-processador que adiciona variáveis, mixins, nesting e operações matemáticas ao CSS. Aprenda a configurar e usar com projeto prático.
• 
  Variáveis no CSS (CSS Variables): Como Usar de Forma Profissional29 de dezembro de 2025
  Você sabe o que são Variáveis no CSS (CSS Variables)? Aprenda como usar técnicas que vão transformar a forma como você escreve variáveis CSS.
• 
  Try Catch no JavaScript: Programação Defensiva na Prática27 de novembro de 2025
  Aprenda a usar try catch no JavaScript e melhore a sua programação defensiva!

Posts mais recentes da Hashtag Treinamentos

• 
  Planilha de Controle de Notas Fiscais no Excel [Grátis]2 de outubro de 2026
  Baixe a planilha de controle de notas fiscais no Excel grátis: calcule ISS e retenções, veja o que está em aberto e gere a cobrança de cada nota de serviço.
• 
  Qual IA usar na empresa: ChatGPT, Claude ou Perplexity?2 de outubro de 2026
  Qual IA usar na empresa: veja as diferenças entre ChatGPT, Claude e Perplexity e quando cada um rende mais em cada área da sua equipe.
• 
  Apostilas Gratuitas em PDF: Excel, Power BI, Python e IA30 de setembro de 2026
  Baixe apostilas gratuitas em PDF de Excel, Power BI, Python, Claude e agentes de IA, com exercícios e gabarito. Escolha a sua e comece hoje.