Fala, pessoal. Tudo bem? Neste artigo, nós vamos abordar alguns conceitos e informações sobre Sass, uma tecnologia muito útil para pessoas que desenvolvem front-end. Vamos lá?
O que é Sass?
Para começar, o que é Sass? Segundo o próprio site da linguagem, ela é uma espécie de “CSS com superpoderes” ou um CSS melhorado.
A sigla Sass significa Sintactically Awesome Style Sheets, ou folhas de estilo sintaticamente maravilhosas, em uma tradução livre. Basicamente, consiste em uma linguagem para criação de folhas de estilo que posteriormente será transformada em CSS puro.
Para que você possa entender melhor, nós podemos fazer um paralelo entre Sass e Typescript, já que ambos oferecem funcionalidades novas com relação à tecnologia alvo (no caso do Sass, o CSS e do Typescript, o Javascript).
No entanto, estes arquivos não são interpretados pelo browser, sendo necessária uma compilação ou transformação do código original para o código na linguagem alvo.
Este pré-processador de CSS também costuma facilitar o processo de criação de folhas de estilo, já que diferentemente do CSS, Sass implementa funcionalidades como regras aninhadas, funções e variáveis.
Atualmente, também é possível criarmos variáveis dentro do CSS, no entanto, esse recurso é relativamente recente e não é tão poderoso quanto é no pré-processador. Você pode clicar aqui para ver como as variáveis do CSS funcionam e depois fazer a comparação com as variáveis do pré-processador.
Instalando Sass
Existem algumas maneiras diferentes de trabalharmos com este pré-processador. É possível instalá-lo com ferramentas de linha de comando interfaces gráficas ou inseri-lo diretamente no seu projeto.
Para não nos perdermos demais no assunto, neste artigo vou fazer a instalação do pré-processador globalmente utilizando o npm: npm install -g sass
Regras do Sass
Bom, neste exemplo, pode não ter ficado tão claro como que este pré-processador pode ajudar no desenvolvimento da sua aplicação já que ambos os códigos ficaram muito parecidos. No entanto, conforme a sua aplicação cresce e mais regras são necessárias, o uso desta tecnologia pode fazer muita diferença.
Declaração de variáveis
Declarar variáveis em Sass é muito simples. Você só precisa definir algo como a sintaxe abaixo, de preferência no início do seu arquivo para manter a organização do mesmo.
$nomeDaVariavel: valor
Depois, para utilizar essa variável, você pode só utilizar $nomeDaVariavel como valor para alguma propriedade CSS da sua formatação, o que é uma sintaxe muito mais prática do que a utilização de variáveis no CSS por exemplo.
Aninhamento
Também temos uma sintaxe para o aninhamento de seletores disponível no pré-processador. Então, ao invés do código abaixo:
div {
/*formatações*/
}
div nav {
/*formatações*/
}
div nav h1{
/*formatações*/
}
div nav ul{
/*formatações*/
}
div nav ul li {
/*formatações*/
}
Você pode utilizar algo como o código abaixo, o que deixa o seu código mais legível, mais organizado, e assim, mais fácil de manter:
div
/*formatações*/
nav
/*formatações*/
h1
/*formatações*/
ul
/*formatações*/
li
/*formatações*/
Usando Sass
Para utilizar o Sass, primeiramente, você deve criar um arquivo .sass ou .scss. Os dois formatos são aceitos, no entanto, possuem algumas mudanças de sintaxe como o uso ou não de chaves e ponto e vírgula.
Como exemplo, vou usar um arquivo HTML com o código abaixo e criar uma formatação para ele utilizando pré-processador.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Desafio Menu</title>
<link href="./estilo.css" rel="stylesheet">
</head>
<body>
<main>
<h1>Lista:</h1>
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ol>
</main>
</body>
</html>
Note que no meu arquivo HTML, eu estou inserindo uma folha de estilo .css e não .sass. Isso acontece porque, como eu disse anteriormente, o arquivo .sass precisa passar por uma transformação e se tornar um arquivo CSS para realmente ter algum efeito no seu projeto.
Sendo assim, criei um arquivo chamado estilo.sass e inseri a formatação abaixo:
$fundo : aliceblue
body
background-color: $fundo
width: 100vw
height: 100vh
display: flex
flex-direction: column
justify-content: center
align-items: center
ol
color: white
margin: auto
li
font-weight: bold
color: gray
No entanto, esses estilos ainda não serão aplicados ao seu HTML, porque o arquivo .css ainda não existe. Para criá-lo, vamos precisar rodar o comando sass --watch para que ele monitore o arquivo estilo.sass e gere o arquivo estilo.css quando o arquivo .sass for atualizado.
Esse comando watch pode ser utilizado de duas formas diferentes: a primeira é em um único arquivo onde ele tem a sintaxe sass --watch arquivoFonte.sass arquivoDestino.css e a segunda é fazendo o monitoramento de uma pasta e todos os seus arquivos, quando se utiliza sass --watch pastaFonte:pastaDestino.
Já que chamei ambos os arquivos de estilo, é preciso rodar o comando sass --watch estilo.sass estilo.css o que irá fazer a compilação do arquivo sass e gerar o css correspondente. Você pode ver uma comparação dos dois na imagem abaixo:
Depois que o arquivo CSS foi gerado, podemos abrir a página e temos a aparência o esperada:
Considerações finais
Neste artigo, conhecemos o Sass e como ele pode ajudar no desenvolvimento do seu código. No entanto, o Sass tem muito mais funcionalidades que podem te auxiliar no desenvolvimento de código. No entanto, deixaremos esse assunto pra um outro artigo.
Como a sintaxe do pré-processador se baseia muito no CSS normal, você ainda poderá utilizar muitos dos conceitos aprendidos para lidar com o CSS no pré-processador como seletores e pseudo-classes e pseudo-elementos.
Bons estudos!!
