Desenvolvimento Web / CSS e CSS3

Desenvolvimento ágil de alta produtividade com SASS: Dê aqui os seus primeiros passos

Aprenda os principais gatilhos do SASS para desenvolver de forma otimizada e entregar o código que o navegador quer ler! Simples, leve e intuitivo.

Por Gustavo Web

Publicado por Gustavo Web
em 08/02/2019 às 10h00

Lista VIP UpInside

Entre para nossa lista VIP e receba vídeo aulas, artigos e tutoriais exclusivos e com prioridade

  QUERO ENTRAR

Aula exclusiva UpInside Play

Acessar aula no Play

Compartilhe:

Salve salve moqueridos, Gustavo Web aqui e hoje o assunto vai ser sobre SASS! Trabalhando com pré-processador no CSS.

Por mais que sejamos resistentes a novas tecnologias e fugir do trivial parece não ser uma boa ideia, quando você começa a estudar algo que não está no seu dia a dia e você vê que não é um bicho de sete cabeças e ainda pode somar para sua produtividade, acaba ficando mais tranquilo o processo de transição do que era comum no seu dia a dia para a nova tecnologia.

Com o SASS não vai ser diferente! Pensa só, você está acostumado a desenvolver o seu CSS, criar suas classes, executar ou não o reflow, ter reescrita de propriedades, e quando dá tempo você minifica... Agora imagina ter a possibilidade de ter um código mais limpo, mais coeso, organizado, evitando o reflow, podendo usar variáveis, segmentar dobras do seu site em arquivos distintos e ainda minificar o arquivo final parece ser muita coisa para aprender em 30 muninutos, certo?

Então acompanha essa aula comigo, que eu tenho certeza que você vai se surpreender como é fácil de se trabalhar e como isso pode somar nas suas skills!

Sintaxe

A sintaxe em si, é bastante simples e fácil de se adaptar! Num primeiro momento, basta que você deixe de trabalhar com as chaves e o ponto e vírgula no final de cada propriedade! Por exemplo:

<!-- Código em CSS -->

.main_section {
width: 100%;
background-color: #ccc;
}

<!-- Código em SASS -->
.main_section
width: 100%
background-color: #ccc

Se fizer isso com todo o seu código provavelmente você já consegue trabalhar com o SASS (mesmo que não use todos os recursos), e gradualmente você vai lapidando o seu código para trabalhar cada vez mais de forma otimizada. Lembrando que isso é válido para um projeto existente que você fará a migração... Se for projeto novo, é vida nova e não precisa se preocupar muito além disso!

Variáveis

Quando você tem a possibilidade de usar o SASS no projeto, algumas portas começam a se abrir! Pensa você desenvolver alguns layouts para servir como base para seus clientes e poder personalizar toda a parte visual somente sobrescrevendo os valores de algumas variáveis?

Esse recurso está disponível e é facilmente adaptado a sua folha de estilos. Dá uma olhada em como fica a aplicação!

$back-color-primary: #f90

.main_section
background-color: $back-color-primary

.main_blog
background-color: $back-color-primary

Com isso, agora se você quiser mudar o tom do laranja (#f90) ou até mesmo colocar outra cor, basta substituir o valor da variável back-color-primary e pronto! Tudo já estará obedecendo as novas diretrizes.

É claro! Você pode usar isso com o CSS normal (com o root, var()...) mas aqui fica muito mais simples de se escrever o código e muito mais intuitivo.

Split em Arquivos

Ter somente um arquivo com todo o seu CSS pode acabar dificultando o processo de manutenção do seu código! Imagina que toda a estilização da sua página está concentrada num único arquivo... Realmente vai ser muita coisa.

Um ponto legal dentro do SASS, é que você pode quebrar esse único arquivo em vários e ter um específico para cada dobra ou até mesmo página.

<!-- Arquivo: _reset.sass -->
*
padding: 0
margin: 0
box-sizing: border-box

<!-- Arquivo: _header.sass -->
.main_header
width: 100%
margin: 20px 0

<!-- Arquivo: app.sass -->
@import reset
@import header

O resultado disso será um arquivo app.css com o conteúdo do reset e header! Basicamente você deve seguir a nomeclatura do arquivo iniciando com underline (_) e tendo a extensão .sass.

No arquivo principal, basta você ter o comando import e chamar o nome do arquivo sem o prefixo underline e sem extensão que o SASS fará o resto.

Lembrando que a ordem do import pode influenciar no comportamento do elemento.

Herança

Aqui a sua reescrita de código começa a baixar consideravelmente! Muito provavelmente você já passou por aqueles elementos que precisam ter as mesmas propriedades com um ou outro atributo com outro valor. O que for comum entre eles, você pode colocar dentro de um único bloco e extender dentro de qualquer elemento.

%heading-title
border-bottom: 3px solid #ccc
padding: 10px

.main_header h1
font-size: 2em
@extend %heading-title

.main_header p
text-align: center
@extend %heading-title

O resultado disso será dois seletores com as mesmas propriedades e o que é específico de cada um fica separado, gerando um código mais "limpo" para o navegador.

Isso sem contar que se você quiser, você pode trabalhar com a escrita um pouco diferente:

%heading-title
border-bottom: 3px solid #ccc
padding: 10px

.main_header
h1
font-size: 2em
@extend %heading-title

p
text-align: center
@extend %heading-title

<!-- O resultado será: -->
.main_header p, .main_header h1 {
border-bottom: 3px solid #ccc;
padding: 10px;
}
.main_header h1 {
font-size: 2em;
}
.main_header p {
text-align: center;
}

Note que eu defini a classe main_header uma única vez! E o que está "dentro" do nó acaba sendo concatenado no seletor.

Minificação

O pré-processamento pode ser invocado com o uso de alguns atributos a mais, e o mais comum de se trabalhar é o seguinte:

sass _cdn/css/source/app.sass _cdn/css/build/app.css

Isso vai fazer com que o SASS gere o arquivo final no diretório build e esse que deve ser incorporado no seu documento!

Mas a cada mudança na estrutura do arquivo, seria necessário você rodar esse comando novamente! Você tem basicamente duas formas de contornar isso: Adaptando sua IDE para trabalhar com o SASS e ela ficará responsável por esse trabalho, ou, informar um parâmetro a mais nessa chamada.

sass --watch _cdn/css/source/app.sass _cdn/css/build/app.css

O resultado é o mesmo, mas agora o processo não morre após a conclusão! Ele vai ficar "assistindo" o arquivo e a cada nova modificação ele gera um build novo sem você precisar se preocupar.

Ainda nessa pegada de invocar o serviço, você pode chamada o --style que será capaz de minificar/comprimir o arquivo resultante. Para isso, só adicionar a tag no final com o formato desejado.

sass --watch _cdn/css/source/app.sass _cdn/css/build/app.css --style=compressed

Todos os pontos que vimos aqui, é claro que você consegue fazer com o CSS nativamente sem precisar de um pré-processador! Mas é inegável a facilidade que isso nos dá enquanto estamos concentrados em resolver o problema do cliente e não se prender a sintaxes.

Feedback

Espero que você tenha gostado desse conteúdo e que nessa aula de um pouco mais de meia hora, tenha somando de forma positiva para sua carreira, no seu dia a dia como desenvolvedor e que você possa colocar isso em prática nos seus projetos.

Me conta aqui abaixo nos comentários o que você achou dessa aula e o nível de dificuldade que você dá para o SASS :P

Compartilhe:

Em Desenvolvimento Web:

Deixe seu comentário: