Se você é um desenvolvedor front-end ou já trabalhou com CSS, sabe os problemas que acontecem quando trabalhamos com um monte de classes identadas, arquivos grandes, falta de reaproveitamento de regras, (escreva aqui seus problemas com CSS) e pensou na possibilidade de existir uma forma mais fácil, eficiente e profissional de escrever suas folhas de estilo.
O SASS está aí para acabar com suas dores de cabeça.
O que é SASS?
SASS, que significa Syntactically Awesome Style Sheets, é um pré-processador de CSS que nos permite maior dinamismo, produtividade e profissionalismo ao trabalhar com folhas de estilo. É uma outra forma de se escrever CSS.
Vantagens
Variáveis
Assim como em uma linguagem de programação, podemos criar variáveis para guardar valores como cores, por exemplo. Veja abaixo um exemplo no qual criamos uma variável $branco para guardar a cor branca e $preto para guardar uma cor preta:
Vejamos nosso arquivo SCSS:
$branco: #FFFFFF;
$preto: #000000;
body {
background-color: $preto;
color: $branco;
}
Aqui está o resultado do nosso arquivo depois de processado:
body {
background-color: #000000;
color: #FFFFFF;
}
Classes aninhadas
Com SASS podemos criar uma hierarquia de elementos no CSS de forma bem mais prática. Veja o exemplo abaixo onde demonstramos como fazer isso:
body {
background-color: #000000;
p {
color: #FFFFFF;
span {
color: red;
}
}
}
Agora veja o resultado no CSS:
body {
background-color: #000000;
}
body p {
color: #FFFFFF;
}
body p span {
color: red;
}
Pode falar, é muito mais fácil!
Extensão de regras
Podemos reaproveitar regras já criadas utilizando um extend. Veja no exemplo abaixo onde colocamos regras para a classe mensagem e queremos reutilizar suas regras para as classes mensagemsucesso e mensagemerro:
.mensagem {
background-color: #000;
border: 1px solid #000;
color: #FFF;
font-size: 14px;
}
.mensagemsucesso {
@extend .mensagem;
background-color: green;
border-color: green;
}
.mensagemerro {
@extend .mensagem;
background-color: red;
border-color: red;
}
Agora veja como fica o arquivo acima depois de processado:
.mensagem, .mensagemsucesso, .mensagemerro {
background-color: #000;
border: 1px solid #000;
color: #FFF;
font-size: 14px;
}
.mensagemsucesso {
background-color: green;
border-color: green;
}
.mensagemerro {
background-color: red;
border-color: red;
}
Referenciando elementos
Podemos utilizar & para fazer a referência à própria classe, para evitarmos referenciá-la novamente. Veja o exemplo abaixo:
No nosso arquivo SASS, vamos colocar algumas cores no nosso elemento “a” quando ele estiver sob os estados hover e active:
a {
font-size: 16px;
&:hover {
color: green;
}
&:active {
color: blue;
}
}
Agora veja como esse arquivo fica depois de processado:
a {
font-size: 16px;
}
a:hover {
color: green;
}
a:active {
color: blue;
}
Divisão e importação de arquivos
Sempre fica mais complicado trabalhar em nossa folha de estilos enormes, não é verdade? Para esse caso, podemos dividir este arquivo em outros arquivos menores. Utilizamos uma underline na frente do nome do arquivo para indicarmos que este é parte de um outro arquivo.
Após dividirmos nosso arquivo, podemos usar o recurso import para incluirmos este arquivo no nosso arquivo principal. Veja um exemplo:
Aqui temos um arquivo que criamos para “dar um reset” nas configurações padrão dos elementos no navegador, vamos chamá-lo de “_padronizador.scss:
html, body, ul, li, ol, p {
margin: 0;
padding: 0;
}
Agora incluímos esse arquivo no nosso arquivo principal:
@import 'padronizador';
body {
background-color: #000000;
color: #FFFFFF;
}
Mixins
Podemos fazer reaproveitamento de código utilizando Mixin. Veja como podemos criar um mixin para colocarmos bordas arredondadas de forma mais simples:
@mixin border-radius($pixels) {
border-radius: $pixels;
}
Veja como incluímos essa função em nossa div:
div.alerta {
@include border-radius(5px);
}
E muito mais!
Existem muito mais recursos que você pode utilizar no SASS que facilitarão seu trabalho com folhas de estilo. Não colocamos todos aqui para o artigo não ficar tão extenso.
Dependências
Para utilizarmos o SASS, precisamos ter o Ruby instalado na máquina. Usuários do Mac já o possuem, portanto os usuários de Windows e Linux precisarão instalá-lo. Também é necessário termos a GEM do Ruby referente ao SASS instalada na máquina.
Como instalar
Primeiramente, você precisa ter o Ruby instalado no computador. Se você não o possui, você pode utilizar esse tutorial disponível no próprio site do Ruby para instalá-lo em sua máquina: https://www.ruby-lang.org/pt/documentation/installation/
Quando o Ruby estiver instalado, você precisa baixar a gem do SASS. No Windows usaremos o Prompt de Comando e no Linux usaremos o Terminal.
Digite:
gem install sass
Com esse comando estaremos baixando e instalando o SASS.
Como utilizar
Com o Ruby e a GEM do SASS instalados no computador, já podemos começar a utilizar o SASS.
Vamos utilizar um passo a passo para ensinarmos como usar o SASS através do Prompt de Comando / Terminal:
1 – Dentro da pasta css (ou qualquer outra pasta que você utiliza para guardar as suas folhas de estilo), crie um arquivo com a extensão .scss. Exemplo: estilo.scss.
2 – Entre no Prompt de Comando (usuários do Linux usarão o Terminal), acesse a pasta onde está localizado o seu arquivo SCSS e digite o comando:
sass --watch estilo.scss:estilo.css
Dessa forma, será criado dois arquivos: estilo.css e estilo.css.map. Inclua o arquivo estilo.css na sua página HTML para utilizar o arquivo que foi gerado.
Observe que o Prompt de Comando / Terminal estará verificando se seu arquivo estilo.scss foi alterado para reprocessar e atualizar o arquivo estilo.css. Se você deixá-lo aberto e executando, assim que você salvar o arquivo estilo.scss você terá o estilo.css atualizado. Isso facilita muito o seu trabalho, já que você não precisa executar o comando a cada vez que alterar o seu arquivo SASS.
Podemos, também, utilizar o comando abaixo para verificarmos uma pasta inteira ao invés de um único arquivo:
sass --watch scss:css
Assim, todos os arquivos .scss da pasta “scss” serão processados e colocados na pasta “css”.
E aí? O que está esperando para começar a utilizar SASS?
