<commit_before>---
layout: post
title: Sass - Pré-processador de CSS
categories: [sobre, tutorial, sass, css]
tags: [sobre, tutorial, sass, css, pré-processador]
description: Agilizando sua escrita e manutenção de CSS
---

#####Hail!


Cá estou novamente para apresentar um tema <span class="small">*<s>nem tão</s>*</span> recente a vocês.  

Se você é desenvolvedor front-end e já participou de agum projeto de médio ou grande porte deve saber que dar manutenção em códigos CSS é difícil. Muitas vezes você se vê copiando, colando e/ou repetindo dezenas de regras, isto obviamente vai na contra-mão da produtividade e dos princípios de Lean Code.  

Certo, mas como *<s class="small">diabos</s>* fugir disso nessa linguagem ingrata que é o CSS? E a resposta é **pré-processadores** de CSS!  
Além do [Sass](http://sass-lang.com) temos o [Less](http://lesscss.org), porém o objetivo deste não é compará-los e sim mostrar um pouco de como funciona o **Sass**.  

Vamos lá!

#[![Sass]({{ site.url }}/assets/media/sass-logo.png)](http://sass-lang.com)  

###O que é?

> Sass é uma extensão do CSS que adicionar poder e elegância a linguagem básica. Ele permite que você use variáveis, aninhamentos, heranças, importações em linha, e mais, tudo com uma síntaxe completamente compatível com CSS. Sass ajuda a manter grandes arquivos CSS bem organizados [...]

Olhando para esta definição já fica óbvio o porque da popularização do Sass.  
Utilizar variáveis dentro do CSS é algo realmente magnífico. Imagine-se trocando manualmente o esquema de cores de um projeto, isso poderia ser feito alterando apenas o valor de algumas variáveis se estiver utilizando Sass.

###Instalando

Para começar a utilizar Sass é muito simples, ainda mais simples se você estiver utilizando um Mac, já que para rodar o Sass precisamos ter o Ruby instalado na máquina (nativo no Mac 😌).  
Partirei do pressuposto que você já o possui.  

Tendo Ruby instalado basta digitar no seu terminal o seguinte: `$ sudo gem install sass` que o Ruby cuidará de toda a instalação desta *gem* para você.

Uma vez instalado você poderá acessá-lo através do seu terminal (ou prompt no Windows).  
Para testar a instalação digite `sass -v` no terminal, deve ter uma saída parecida com a seguine: `Sass 3.4.1 (Selective Steve)`  
Caso você não obtenha o resultado acima sugiro que siga o [tutorial de instalação no site oficial](http://sass-lang.com/install).

###Usando

Vamos à pratica: crie um arquivo style.scss no diretório do seu projeto.  
Nele vamos definir uma regra para determinado parágrafo em determinada div, então, insira o seguinte código no arquivo:

{% highlight CSS %}
$gray: #383838;

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    -o-border-radius: $radius;
    border-radius: $radius;
}

div.div-teste {
    height: 100px;
    width: 100px;
    border: 1px black solid;
    @include border-radius(3px);
    p {
        color: $gray;
    }	
}

div.div-dois {
    border: 1px black solid;
    @include border-radius(3px);
}
{% endhighlight %}

Neste exemplo estamos usando pelo menos três vantagens que o Sass nos dá sobre o CSS puro:

- Variáveis
- Mixins
- Aninhamento

Executando o comando `$ sass style.scss style.css` no terminal o Sass fará o processamento do arquivo gerando o arquivo style.css como saída. 

> **Dica 1:** Utilizando o comando: `$ sass --watch style.scss:style.css` fará com que o Sass fique observando o arquivo de origem (style.scss) e cada vez que você salvar uma alteração processará este arquivo gerando o arquivo de saída automaticamente.  
**Dica 2:** As versões mais recentes das IDEs mais populares do mercado já vêem com a possibilidade de configurar seu projeto para processar automaticamente seus arquivos Sass.

Neste arquivo de saída deve conter o seguinte:

{% highlight CSS %}
div.div-teste {
    height: 100px;
    width: 100px;
    border: 1px black solid;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px; 
}

div.div-teste p {
    color: #383838; 
}

div.div-dois {
    border: 1px black solid;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px; 
}
{% endhighlight %}
<p class="small">Não assim organizado, mas basicamente isto.</p>

Como podemos observar tivemos de digitar o código refente a regra da "borda" somente uma vez, depois de definida esta regra não será necessário replicar este bloco novamente, basta utilizar comando **@include nome_da_regra(parametros)** que fará a inserção deste bloco no seletor que quisermos.  

Além disso vimos o exemplo de uso de variáveis para definir a cor do texto, por exemplo. Poderíamos usar variáveis para definir o tamanho da borda, qual fonte usar, altura e largura das divs, etc.  

Sass nos permite ainda utilizar IFs, FORs, EACHs, WHILEs e FUNCTIONs. Para aprender a utilizar estas diretivas recomendo a leitura da [documentação oficial](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#control_directives__expressions).

###Concluindo

A questão levantada é: **vale a pena aprender a utilizar o Sass?**  
A resposta é simples e clara: **sim**.

Porém há algumas divergências quanto a resposta para a questão de **quando** utilizar, particularmente penso que a curva de aprendizado desta ferramenta é simples para desenvolvedores de todos os níveis, a sintaxe é praticamente idêntica ao CSS e sempre, indiferente do tamanho, auxiliará no desenvolvimento do seu projeto.

> **Dica 3:** Podemos ainda minificar nosso CSS de saída utilizando o comando `$ sass -–style compressed style.scss style.css` ou se você quiser usar o --watch `sass --style compressed --watch style.scss:style.css`.<commit_msg>Typo fix in Tip 3<commit_after>---
layout: post
title: Sass - Pré-processador de CSS
categories: [sobre, tutorial, sass, css]
tags: [sobre, tutorial, sass, css, pré-processador]
description: Agilizando sua escrita e manutenção de CSS
---

#####Hail!


Cá estou novamente para apresentar um tema <span class="small">*<s>nem tão</s>*</span> recente a vocês.  

Se você é desenvolvedor front-end e já participou de agum projeto de médio ou grande porte deve saber que dar manutenção em códigos CSS é difícil. Muitas vezes você se vê copiando, colando e/ou repetindo dezenas de regras, isto obviamente vai na contra-mão da produtividade e dos princípios de Lean Code.  

Certo, mas como *<s class="small">diabos</s>* fugir disso nessa linguagem ingrata que é o CSS? E a resposta é **pré-processadores** de CSS!  
Além do [Sass](http://sass-lang.com) temos o [Less](http://lesscss.org), porém o objetivo deste não é compará-los e sim mostrar um pouco de como funciona o **Sass**.  

Vamos lá!

#[![Sass]({{ site.url }}/assets/media/sass-logo.png)](http://sass-lang.com)  

###O que é?

> Sass é uma extensão do CSS que adicionar poder e elegância a linguagem básica. Ele permite que você use variáveis, aninhamentos, heranças, importações em linha, e mais, tudo com uma síntaxe completamente compatível com CSS. Sass ajuda a manter grandes arquivos CSS bem organizados [...]

Olhando para esta definição já fica óbvio o porque da popularização do Sass.  
Utilizar variáveis dentro do CSS é algo realmente magnífico. Imagine-se trocando manualmente o esquema de cores de um projeto, isso poderia ser feito alterando apenas o valor de algumas variáveis se estiver utilizando Sass.

###Instalando

Para começar a utilizar Sass é muito simples, ainda mais simples se você estiver utilizando um Mac, já que para rodar o Sass precisamos ter o Ruby instalado na máquina (nativo no Mac 😌).  
Partirei do pressuposto que você já o possui.  

Tendo Ruby instalado basta digitar no seu terminal o seguinte: `$ sudo gem install sass` que o Ruby cuidará de toda a instalação desta *gem* para você.

Uma vez instalado você poderá acessá-lo através do seu terminal (ou prompt no Windows).  
Para testar a instalação digite `sass -v` no terminal, deve ter uma saída parecida com a seguine: `Sass 3.4.1 (Selective Steve)`  
Caso você não obtenha o resultado acima sugiro que siga o [tutorial de instalação no site oficial](http://sass-lang.com/install).

###Usando

Vamos à pratica: crie um arquivo style.scss no diretório do seu projeto.  
Nele vamos definir uma regra para determinado parágrafo em determinada div, então, insira o seguinte código no arquivo:

{% highlight CSS %}
$gray: #383838;

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    -o-border-radius: $radius;
    border-radius: $radius;
}

div.div-teste {
    height: 100px;
    width: 100px;
    border: 1px black solid;
    @include border-radius(3px);
    p {
        color: $gray;
    }	
}

div.div-dois {
    border: 1px black solid;
    @include border-radius(3px);
}
{% endhighlight %}

Neste exemplo estamos usando pelo menos três vantagens que o Sass nos dá sobre o CSS puro:

- Variáveis
- Mixins
- Aninhamento

Executando o comando `$ sass style.scss style.css` no terminal o Sass fará o processamento do arquivo gerando o arquivo style.css como saída. 

> **Dica 1:** Utilizando o comando: `$ sass --watch style.scss:style.css` fará com que o Sass fique observando o arquivo de origem (style.scss) e cada vez que você salvar uma alteração processará este arquivo gerando o arquivo de saída automaticamente.  
**Dica 2:** As versões mais recentes das IDEs mais populares do mercado já vêem com a possibilidade de configurar seu projeto para processar automaticamente seus arquivos Sass.

Neste arquivo de saída deve conter o seguinte:

{% highlight CSS %}
div.div-teste {
    height: 100px;
    width: 100px;
    border: 1px black solid;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px; 
}

div.div-teste p {
    color: #383838; 
}

div.div-dois {
    border: 1px black solid;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px; 
}
{% endhighlight %}
<p class="small">Não assim organizado, mas basicamente isto.</p>

Como podemos observar tivemos de digitar o código refente a regra da "borda" somente uma vez, depois de definida esta regra não será necessário replicar este bloco novamente, basta utilizar comando **@include nome_da_regra(parametros)** que fará a inserção deste bloco no seletor que quisermos.  

Além disso vimos o exemplo de uso de variáveis para definir a cor do texto, por exemplo. Poderíamos usar variáveis para definir o tamanho da borda, qual fonte usar, altura e largura das divs, etc.  

Sass nos permite ainda utilizar IFs, FORs, EACHs, WHILEs e FUNCTIONs. Para aprender a utilizar estas diretivas recomendo a leitura da [documentação oficial](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#control_directives__expressions).

###Concluindo

A questão levantada é: **vale a pena aprender a utilizar o Sass?**  
A resposta é simples e clara: **sim**.

Porém há algumas divergências quanto a resposta para a questão de **quando** utilizar, particularmente penso que a curva de aprendizado desta ferramenta é simples para desenvolvedores de todos os níveis, a sintaxe é praticamente idêntica ao CSS e sempre, indiferente do tamanho, auxiliará no desenvolvimento do seu projeto.

> **Dica 3:** Podemos ainda minificar nosso CSS de saída utilizando o comando `$ sass -–style compressed style.scss style.css` ou se você quiser usar o --watch `$ sass --style compressed --watch style.scss:style.css`.
{'fraction_non_alphanumeric': 0.08330485304169515, 'fraction_numerical': 0.007946001367054, 'mean_word_length': 4.006415739948674, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 25, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3275211', 'n_tokens_mistral': 4196, 'n_tokens_neox': 4028, 'n_words': 1571}