Guia básico do Sass. Um overview deste pré-processador
Conteúdo produzido pelo olister Antonio Braz
Se Css fosse pessoas, Sass seria o The Flash!
Exagero? Não, mas deixa eu complementar um pouco mais, Sass é um pré-processador de Css, que auxilia na criação de arquivos de estilo com inúmeras funcionalidades, deixando o desenvolvimento muito mais fluido e ágil. Neste artigo, irei focar no Sass, pois venho usando já á alguns anos, e espero muito que outros devs criem o mesmo apego que eu tenho por ele.
Inicialmente, sugiro que instale o Sass. É bem simples e rápido. Deixarei o link aqui de como fazer isso: Como instalar? Clique aqui
Após isto, venho apresentar as principais funcionalidades que mais acho úteis, algumas dicas e observações que aprendi durante esses anos.
Primeira observação, extensões de arquivos .sass e .scss?
É possível fazer em ambas, porém cada uma terá sua sintaxe.
Os arquivos .sass, não fazem uso de “{“, “}” e “;”. Sendo muito parecidos com Python, fazendo o uso de indentação para separar os blocos.
p
font-size: 1emsection.dark
margin-bottom: 30pxJá os arquivos .scss se assemelham ao bom e velho .css, exigindo o uso das “{“, “}” e “;”.
p {
font-size: 1em;
}section.dark {
margin-bottom: 30px;
}Acredito que a sintaxe .scss seja de mais fácil compreensão, então seguirei por esta linha.
Ok, mas como compilar?
Para compilar os arquivos .sass ou .scss, basta abrir algum terminal, e digitar : sass + nomearquivo.scss/.sass + nomearquivo.css
Caso os arquivos estejam em outro diretório, acessar normalmente com “./”, “../” ou “../<dir>/<…>”
Comandos no terminal:
// Exemplos de como compilar um arquivo.scss# sass nome_arquivo.scss arquivo.css# sass ../nome_arquivo.scss ../../dist/css/arquivo.css# sass nome_arquivo.scss ../css/arquivo.css
// compilar um arquivo.sass# sass nome_arquivo.sass arquivo.cssCaso queira apenas testar e ver um live code, pode usar o Sass Meister, que é uma ferramenta online para ver a edição na prática.
Vamos acelerar?! Estruturando a folha de estilo
Se segurem firme, que aqui a velocidade aumenta!
Ao se criar cascatas de estilo em Css, perdemos muito tempo gerenciando as hierarquias de classes, principalmente quando se chega a níveis mais fundos, ainda mais quando se trabalha com as Pseudo-classes (:hover, :nth-of-type, …) e Pseudo-Elementos (::before, ::after, ::first-letter, …). E fazer uma manutenção posterior? Pode ser bem trabalhoso.
Como mencionado a pouco, a estrutura de hierarquias no Sass ocorre pelo nível de chaves que você está (arquivos .scss) ou pelo número de indentações dos blocos (arquivos .sass)
Analisando em uma micro-escala para compreendermos como a estruturação ocorre em tags, classes, pseudo-classes e pseudo-elementos, subclasses e condicionais. Repare também na utilização aparição do elemento “&” no código.
- O “&” serve para agrupar classes, pseudo-elementos, pseudo-classes e até mesmo um complemento da classe (criando uma nova), como é visto com o “& — full-h”, gerando uma classe nova, “section.dark — full-h”. Mas tudo isto em relação ao nível de cima dele.
Analise bem esse código abaixo, e busque as semelhanças no código abaixo dele, que é o resultado do Css compilado:
Código no Sass:
section.dark {
margin-bottom: 30px;
&--full-h {
min-height: 100vh;
}
.paragraph{
margin-bottom: 5px;
}
.item {
opacity: 0;
margin-bottom: 5px;
&::after {
content: "+";
padding-left: 2px;
}
&:last-of-type {
margin-bottom: 0;
}
&:hover {
opacity: 1;
}
span {
text-transform: uppercase;
}
&+.item {
margin-top: 5px;
}
}
}Código compilado em Css:
section.dark {
margin-bottom: 30px;
}
section.dark--full-h {
min-height: 100vh;
}
section.dark .paragraph {
margin-bottom: 5px;
}
section.dark .item {
opacity: 0;
margin-bottom: 5px;
}
section.dark .item::after {
content: "+";
padding-left: 2px;
}
section.dark .item:last-of-type {
margin-bottom: 0;
}
section.dark .item:hover {
opacity: 1;
}
section.dark .item span {
text-transform: uppercase;
}
section.dark .item + .item {
margin-top: 5px;
}Note que, caso seja necessário alterarmos a classe .dark, muita coisa precisaria ser ajustada em uma folha de estilo do Css, já em um arquivo do Sass bastaria alterar a primeira linha desse trecho e recompilar. Bem mais rápido, não?
Se é pra manutenção, por que não Variáveis e Comentários?
Sim! Variáveis! Sabe aquela margin-bottom: 30px que você fica replicando e replicando, ou aquela cor padrão, que quando você precisa alterar posteriormente, e sempre vem a dúvida: será que eu alterei todas? Fora o fato de poder comentar sessões de Css, nas quais não passem para o usuário final.
No Sass isto é possível, e bem simples:
Código no Sass:
// Isso é um comentário do Sass
// Ele não vai parecer no Css/*Este é padrão do Css, e vai aparecer*/// Criando variáveis$corText:#333;
$corDark: $corText;
$marginDefault: 30px;// Aplicando as variáveis
p {
color: $corText;
}
section.dark {
background-color: $corDark;
margin-bottom: $marginDefault;
}Código compilado em Css:
/*Este é padrão do Css, e vai aparecer*/p {
color: #333;
}section.dark {
background-color: #333;
margin-bottom: 30px;
}Operadores
E porque não? :D
Podemos até mesmo pegar as porcentagem dos resultados das operações.
Código em Sass:
div {
width: 600px / 960px * 100%;
}
aside {
width: 300px / 960px * 100%;
}Código compilado em Css:
article {
width: 62.5%;
}aside {
width: 31.25%;}Include & Placeholder Extend
O Include (@mixin) e o Placeholder Extend (@extend) são duas das principais vantagens de se utilizar um pré-processador. Ambas as funções podem replicar trechos de código. Porém há uma peculiaridade. Veja o Include (@mixin) como uma função na qual você pode ou não passar um atributo.
Código em Sass:
// Criando um placehold
// Os placeholders nunca são compilados pois não são entendidos pelo CSS, ficando apenas nos arquivos .scss$corTexto: #333;%font-config {
line-height: 1;
color: $corTexto;
}//Aplicandop {
@extend %font-config;
}.text {
@extend %font-config;
}Código compilado em Css:
.text, p {
line-height: 1;
color: #333;
}Include (@mixin)
A vantagem de criar um @mixin é o fato de que você pode ter mais controle sobre o que quer replicar. Como mencionado anteriormente, faço uma analogia a uma função, na qual você possui os parâmetros de entrada, e dentro do corpo dela é possível fazer o uso deles.
Código em Sass:
@mixin flex($divisor){
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex: $divisor
}.area1 {
@include flex("1 1 auto");
}.area2 {
@include flex("2 2 auto");
}Código compilado em Css:
.area1 {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex: "1 1 auto";
}.area2 {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex: "2 2 auto";
}E caso necessite, ainda podemos juntar os dois, @mixin e @extend.
- Ok, estamos criando um monstro! ^^’
Gerenciando arquivos de estilo
Se lembra daqueles milhões de arquivos no dentro head da página em html importando os arquivos de .css? Esqueça, gerencie eles pelo Sass!
Imagine 5 novos arquivos:
- style.scss
- _constants.scss
- _extends_mixins.scss
- _forms.scss
- _geral.scss
Note que apenas o arquivo style.scss não possui um “_” no início. O underline no início serve apenas para o Sass saber que os arquivos css deles não devem ser gerados.
Para usá-lo, podemos por exemplo, subdividir os arquivos em subpastas (ou não), e fazendo o chamado deles através do @import em outros arquivos .scss compiláveis (sem o “_” inicial). Assim, conseguimos ter um projeto mais organizado e de fácil manutenção.
// Arquivo style.scss@import "./_constants.scss";
@import "./_extends_mixins.scss";
@import "./_forms.scss";
@import "./_geral.scss";No final, precisamos apenas compilar o arquivo style.scss. E todo o conteúdo existente em cada um deles irá ser adicionado ao style.css.
Mas atenção! A ordem dos imports pode ser importante! Caso esteja utilizando as constantes em alguns arquivos, elas devem ser importadas antes deles, como é visto acima (no meu caso, fiz questão de ser o primeiro arquivo a ser importado).
Gostou? Quer saber mais?
Veja a Documentação Oficial
