Começando com Sass

| #frontend #sass #pre-processadores

Você já deve ter ouvido falar sobre pré-processadores CSS e como eles aumentam sua produtividade. O Sass foi o primeiro pré-processador que conheci e desde então tenho usado ele em todos os meus projetos.

Logo - Sass

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

Nesse post, ensinarei como instalá-lo em sua máquina e algumas features desse íncrivel pré-processador. Então chega de delongas e vamos lá!

Instalação

Para instalar o Sass, você precisa ter instalado em sua máquina o Ruby. No site do Sass, tem dois métodos de instalação.

Para esse tutorial, escolhi instalar usando o terminal. Então abra seu terminal e digite o comando:

gem install sass

Se você receber uma mensagem de erro, provavelmente terá que usar o comando sudo. Então ficará assim:

sudo gem install sass

Para conferir se o Sass foi instalado com sucesso, digite:

sass -v

Se ele retornar a versão do Sass, parabéns! O Sass foi instalado com sucesso.

Usando o Sass

Com a Sass instalado, vamos testá-lo. Para isso, crie uma pasta para executarmos o nosso teste.

Dentro da pasta, crie um arquivo chamado style.scss. Nele digite:

$cor-principal: #00abd7;

h1 {
   color: $cor-principal;
}

Primeiro, criamos uma variável chamada $cor-principal e passamos para ela o hexadecimal da cor azul #00abd7. E depois passamos ela como valor da cor do elemento h1.

Agora, precisamos compilar o Sass. Para isso, acesse o diretório do nosso arquivo .scss e digite o comando:

sass --watch style.scss:style.css

Pronto! Nosso arquivo foi compilado e foi gerado na nossa pasta, o arquivo style.css. Ele deve estar assim:

h1 {
  color: #00abd7; }

Esse foi um exemplo básico do que o Sass é capaz de fazer. Vamos aprender agora algumas features!

Variáveis

Como vimos no exemplo anterior, o Sass permite o uso de variáveis para guardar informações como cores, fontes ou qualquer valor CSS que você queira reutilizar em seu código. Para declarar uma variável, use o símbolo $ antes do nome da variável.

Exemplo:

$fonte-legal: Arial, Verdana, sans-serif;
$cor-1: #000000;

h1 {
   font-family: $fonte-legal;
   color: $cor-1;
}

CSS compilado:

h1 {
  font-family: Arial, Verdana, sans-serif;
  color: #000000; }

Operadores Matemáticos

Também é possível fazer matemática em seu CSS. O Sass tem operadores matemáticos padrão, como: +,-,*,/ e %.

Exemplo:

.container {
   width: 100%;
}

.main {
   float: right;
   width: 600px / 960px * 100%;
}

.sidebar {
   float: left;
   width: 300px / 960px * 100%;
}

CSS compilado:

.container {
  width: 100%; }

.main {
  float: right;
  width: 62.5%; }

.sidebar {
  float: left;
  width: 31.25%; }

Mixins

Quem nunca precisou reutilizar aquele trecho de código diversas vezes em um projeto? Para alterar uma declaração, teria que alterar em vários lugares. No Sass, é possível reutilizar esse trecho em vários lugares com o @mixin, facilitando a manutenção do código.

Para criar um mixin, você usa a diretiva @mixin seguido do nome à sua escolha. Depois de criado, bastar usar a diretiva @include para importar o mixin.

Exemplo:

@mixin sombra {
   -webkit-filter: drop-shadow(20px 20px 20px black);
   filter: drop-shadow(20px 20px 20px black);
}

img {
   @include sombra;
   max-width: 100%;
}

CSS compilado:

img {
  -webkit-filter: drop-shadow(20px 20px 20px black);
  filter: drop-shadow(20px 20px 20px black);
  max-width: 100%; }

Só existem essas features?

Não! O Sass conta com várias outras features, para aprender a usá-las, acesse a documentação do Sass.

Conclusão

Realmente usar um pré-processador como o Sass, ajuda bastante e aumenta sua produtividade. Mas cuidado, use-os com sabedoria, pois assim como eles ajudam bastante, podem te atrapalhar bastante também. Estude bem as documentações para evitar cometer erros, e para aprender a usá-los bem. Assim você evita que seu projeto vire um pesadelo.


Mateus Medeiros - Desenvolvedor Front End

Autor

Mateus Medeiros

Desenvolvedor Front End apaixonado por novas tecnologias.

Comentários