Texto de: Letícia Garcez
Introdução
Neste artigo apresentaremos alguns conceitos e informações sobre Sass, uma tecnologia muito útil para o desenvolvimento de folhas de estilo de aplicações.
O que é Sass?
Segundo o próprio site da linguagem, Sass é 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. Essa tecnologia basicamente consiste em uma linguagem para criação de folhas de estilo que posteriormente será transformada em CSS puro.
O Sass facilita a criação de folhas de estilo, já que contém funcionalidades como regras aninhadas, funções e variáveis, que permitem um maior reuso do código e facilitam a manutenção do mesmo. Atualmente, algumas dessas funcionalidades também estão disponíveis no CSS sendo suportadas por versões mais atuais dos navegadores, porém essas funcionalidades do CSS acabam não funcionando corretamente em versões mais antigas de navegadores. Isso não é um problema com o Sass, já que todo código Sass será transformado para código CSS sem essas funcionalidades, posteriormente.
Podemos fazer um paralelo entre Sass e TypeScript, já que ambas tecnologias oferecem funcionalidades novas com relação a uma tecnologia base e precisam ser transpilados para essa tecnologia já que não são interpretados pelo navegador.
Instalando Sass
Existem algumas maneiras diferentes de trabalharmos com Sass, como a instalação de ferramentas de linha de comando, interfaces gráficas, ou até mesmo a inserção de uma dependência no seu projeto de desenvolvimento. Para este artigo vou fazer a instalação do Sass através do npm: npm install -g sass
Escrita de código Sass
O código Sass deve ser escrito em um arquivo .sass e segue uma sintaxe muito parecida com a do CSS, mas eliminando chaves e o caractere ponto-e-vírgula. Um exemplo de código CSS e Sass lado a lado pode ser visto na imagem abaixo:
Neste exemplo de código, ainda não abordamos as funcionalidades do Sass, mas já dá para ter uma ideia da comparação entre essas duas tecnologias.
Declaração de variáveis
A declaração de variáveis em Sass é muito simples, e pode ser feita em qualquer lugar do código. O nome de uma variável deve começar com o caractere “$” e o valor é atribuído a essa variável através do caractere dois pontos, como no exemplo abaixo.
$nomeDaVariavel: valor
Para utilizar essa variável, basta atribuir o nome da variável como valor para alguma propriedade CSS da sua formatação. Um exemplo pode ser visto abaixo:
$corFundo: #FAFAFA
body
background-color: $corFundo
Aninhamento
O Sass também fornece uma sintaxe para o aninhamento de seletores, 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*/
}
É possível utilizar algo como o código abaixo, o que deixa o seu código mais legível, mais organizado e também mais fácil de manter:
div
/*formatações*/
nav
/*formatações*/
h1
/*formatações*/
ul
/*formatações*/
li
/*formatações*/
Usando Sass
Neste exemplo, utilizaremos o Sass para fazer a formatação do código abaixo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Desafio Menu</title>
</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>
O próximo passo, é definir o código Sass. Então, criei um arquivo chamado estilo.sass e inseri a formatação abaixo:
$cor-de-fundo: #f0f0f0
$cor-do-texto: #333
$tamanho-do-texto: 24px
body
background-color: $cor-de-fundo
color: $cor-do-texto
display: flex
align-items: center
justify-content: center
height: 100vh
ol
list-style-type: decimal
padding-left: 20px
li
margin-bottom: 10px
font-size: $tamanho-do-texto
Depois disso, será necessário incluir no arquivo HTML o arquivo que contém o estilo para a página. Esse arquivo que contém o estilo, não é o arquivo Sass em si, mas sim o arquivo CSS que é gerado a partir do arquivo Sass, já que, como mencionei anteriormente, o Sass não é suportado pelo navegador.
Como no momento não temos nenhum arquivo CSS gerado, precisaremos fazer a transpilação do arquivo Sass para gerar esse arquivo. Para fazer a transpilação, vamos precisar rodar o comando sass --watch estilo.sass estilo.css que irá iniciar um processo onde o arquivo “estilo.sass” será monitorado e a partir das informações desse arquivo, será gerado o arquivo estilo.css
Na imagem abaixo, você pode ser as duas versões do código que estou usando, a versão em Sass e a versão transpilada para CSS.
Agora, uma vez que o arquivo esteja incluído na página HTML, podemos abrir a página e temos a aparência esperada:
Considerações finais
Neste artigo conhecemos o Sass e alguns recursos básicos dessa tecnologia que podem auxiliar no desenvolvimento dos seus projetos. É importante lembrar que este é um artigo introdutório, o que significa que várias outras funcionalidades interessantes do Sass acabam fugindo do escopo desse artigo.
Bons estudos!!
