tiagobarreto

Simplificando o CSS com LESS e SASS

Introdução

tiagobarreto

Analista de Sistemas residente em Fortaleza com mais de 10 anos de experiência profissional na área de Tecnologia da Informação atuando em pesquisa & desenvolvimento, inovação e consultoria.




RECENTES

Descobrindo as features do Elixir e Phoenix 04th February, 2016

Vamos criar uma simples aplicação em Angular JS 11th May, 2014

Front-end

Simplificando o CSS com LESS e SASS

25 de agosto de 2013.

Os pré-processadores CSS, como SASS e LESS, estavam mudando a forma como desenvolvedores estilizam páginas da web. Esses pré-processadores permitem escrever código CSS de maneira mais organizada, reutilizável e fácil de manter, introduzindo conceitos como variáveis, funções e mixins.

Neste artigo, exploraremos as diferenças entre SASS e LESS, seus benefícios e apresentaremos exemplos práticos para que você comece a utilizá-los em seus projetos.

O que são pré-processadores CSS?

Pré-processadores CSS são ferramentas que estendem as funcionalidades do CSS, permitindo o uso de recursos avançados que não estão disponíveis no CSS puro. O código escrito em um pré-processador é compilado para CSS padrão, que pode ser lido pelos navegadores.

Benefícios dos pré-processadores CSS:

  • Reutilização de código: Uso de variáveis, mixins e funções para evitar repetição.
  • Manutenção facilitada: Estrutura modular e hierárquica.
  • Maior produtividade: Redução do tempo gasto em tarefas repetitivas.

Diferenças entre SASS e LESS

RecursoSASSLESS
Extensão.scss ou .sass.less
Linguagem baseRubyJavaScript
CompilaçãoNecessita de Ruby ou Node.jsNode.js ou ferramentas como Less.js
PopularidadeMuito utilizado em grandes projetosIdeal para projetos menores e front-end

Configurando o ambiente

Antes de começar, você precisará configurar um compilador para SASS ou LESS.

Instalando o SASS

Certifique-se de ter o Node.js instalado. Instale o SASS globalmente com o comando:

$ npm install -g sass

Instalando o LESS

Instale o LESS globalmente com o comando:

$ npm install -g less

Exemplos práticos

Usando SASS

  1. Crie um arquivo chamado styles.scss com o seguinte conteúdo:
// Variáveis
$primary-color: #3498db;
$font-stack: 'Arial', sans-serif;

// Mixins
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

// Estilos
body {
  font-family: $font-stack;
  background-color: $primary-color;

  h1 {
    color: darken($primary-color, 10%);
    @include border-radius(10px);
  }
}
  1. Compile o arquivo para CSS:
$ sass styles.scss styles.css
  1. O arquivo gerado styles.css será:
body {
  font-family: 'Arial', sans-serif;
  background-color: #3498db;
}

body h1 {
  color: #2a80b9;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

Usando LESS

  1. Crie um arquivo chamado styles.less com o seguinte conteúdo:
// Variáveis
@primary-color: #e74c3c;
@font-stack: 'Verdana', sans-serif;

// Mixins
.border-radius(@radius) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

// Estilos
body {
  font-family: @font-stack;
  background-color: @primary-color;

  h1 {
    color: lighten(@primary-color, 10%);
    .border-radius(10px);
  }
}
  1. Compile o arquivo para CSS:
$ lessc styles.less styles.css
  1. O arquivo gerado styles.css será:
body {
  font-family: 'Verdana', sans-serif;
  background-color: #e74c3c;
}

body h1 {
  color: #f06b61;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

Quando usar SASS ou LESS?

  • Use SASS se você trabalha em projetos grandes ou utiliza frameworks como Bootstrap (que adotou SASS em versões posteriores).
  • Use LESS se você precisa de uma configuração mais simples ou já utiliza ferramentas baseadas em JavaScript.

Conclusão

SASS e LESS são ferramentas indispensáveis para qualquer desenvolvedor que deseja escrever CSS de forma eficiente e organizada. Escolha o pré-processador que melhor se adapta ao seu projeto e comece a simplificar seu fluxo de trabalho hoje mesmo.

comments powered by Disqus