A diferença as linguagens de programação CSS e SASS ainda é uma dúvida de muitos desenvolvedores Front- End que estão dando seus primeiros passos no mercado.
Neste artigo, vamos apresentar em detalhes o que é CSS, o que é SASS e as principais diferenças em variáveis, compatibilidade, hierarquia e modularidade. Ficou interessado? Confira a seguir!
O que é CSS
Uma página HTML possui diversos elementos, como h1, h2, p, div, button etc, que não foram concebidos para ter a aparência modificada.
Ou seja, normalmente, não é possível escolher cor, tamanho, fonte, fundo, posição na tela, margens ou o que acontece quando o usuário passa o mouse por cima de um elemento, por exemplo.
O CSS (Cascading Style Sheets ou Folhas de Estilo em Cascata) existe para resolver esse problema. Basicamente, ele é uma extensão com um conjunto de regras que permite a estilização visual dos elementos HTML na tela.
Vamos tomar como exemplo o elemento “botão” (button) para deixar a explicação mais clara.
Com o CSS, você pode determinar:
- Cor do fundo;
- Estilo da borda;
- Tamanho da fonte;
- Cor do texto;
- Medidas das margens internas e externas.
Na prática, funciona assim: você escreve uma palavra que identifica o elemento a que quer aplicar as regras – neste caso, vamos usar o próprio nome “button”.
Depois, dentro de um par de chaves ({}), vem a propriedade a que se quer estabelecer um valor (por exemplo, cor do fundo) e, em seguida, o valor.
Se você quiser que a cor de fundo do botão seja azul, deve escrever “background-color: blue” (ou qualquer uma das outras maneiras de expressar uma cor, por hexadecimal (#0000FF), rgb (0, 0, 255), hsl (240, 100%, 50%)), terminando com ponto e vírgula.
Veja um exemplo:
botão {
cor de fundo: azul;
}
É possível também atribuir mais de uma customização de propriedade ao mesmo elemento. Por exemplo, se você quiser que esse botão também tenha texto de tamanho 20 pixels (px) e cor branca (white), o código fica assim:
botão {
cor de fundo: azul;
tamanho da fonte: 20px;
cor branca;
No exemplo acima, “button” é o que chamamos de seletor – ou seja, ele seleciona o elemento do tipo “botão” para aplicar tais regras.
Um elemento HTML pode ser selecionado por qualquer atributo que ele tenha, como nome, id, classe etc.
Entretanto, o problema do CSS é que é muito difícil de mantê-lo à medida que o tamanho do código aumenta. Por isso, se você quiser repetir uma cor em várias partes de seu código, por exemplo, tem de copiá-la e colá-la em todas as partes que ela deve aparecer.
Veja uma pequena amostra do que estamos falando abaixo: a mesma cor repete-se em três propriedades em diferentes regras.
botão {
cor de fundo: rgb (128, 128, 0);
}
.classe-a {
cor da borda: rgb (128, 128, 0);
}
#cardápio {
cor: rgb (128, 128, 0);
}
Em códigos complexos, há ainda combinações entre inúmeros seletores. Mais que isso: cada elemento HTML pode ter vários seletores, todos eles compartilhando alguns atributos e se diferenciando em outros.
Só o conceito já parece complicado, certo? Imagina desenvolver um projeto consideravelmente grande dessa maneira.
O documento se torna extenso demais e vira um caos. Fica bem difícil encontrar partes específicas do código e modificar qualquer coisa. É aí que entra o SASS.
O que é SASS?
Segundo sua própria página, a sigla SASS significa “Syntactically Awesome Style Sheets” – ou seja, Folhas de Estilo com Sintaxe Espetacular.
A ideia é manter a mesma lógica do CSS (seletores, regras etc), mas de uma maneira mais organizada, intuitiva e com trechos de código facilmente reutilizáveis.
Com o SASS, é muito mais fácil desenvolver um projeto grande e não se perder no meio de tanto código.
Diferenças entre CSS e SASS
Veja abaixo algumas diferenças básicas entre CSS e SASS e o que você ganha escrevendo suas folhas de estilo com essa outra linguagem.
Variáveis
Variáveis são uma maneira de armazenar informações para reutilizá-las ao longo do código. Você pode guardar cores, nomes de fontes, medidas de margens ou qualquer valor que desejar.
Digamos que sua página tenha 300 propriedades que usam a mesma cor – por exemplo, amarelo (#dddd00).
Se, por algum motivo, fosse preciso trocar essa cor para roxo, o processo com o CSS seria uma tremenda dor de cabeça. Você precisaria simplesmente digitar a nova cor em todas as 300 propriedades.
Imagina, então, se você tivesse de alterar o tamanho de margem padrão de um site inteiro. Em resumo, no CSS, qualquer modificação pode ser um verdadeiro tormento.
Já com o SASS, é possível definir uma variável e repeti-la por todo o código. Para declarar uma variável, basta digitar o caractere “$”, seguido do nome da variável, como por exemplo “$cor-padrao”.
Se você quiser atribuir a cor amarela a “$cor-padrao”, é só escrever:
$cor-padrao: #dddd00;
Aí, toda vez que quiser usar a cor padrão em uma propriedade, basta escrever o nome dessa variável no lugar do valor, como no exemplo abaixo:
botão {
background-color: $cor-padrao;
}
Até aqui, a lógica é a mesma do CSS. Seleciona-se um tipo de elemento (seletor “button”) e atribui-se propriedades a ele (background-color: $cor-padrao).
Mas a grande vantagem de usar variável é que, se você tiver de mudar a cor padrão (como no nosso exemplo, de amarelo para roxo), precisará somente trocar o valor de $cor-padrao no início do documento.
Assim, todas as referências a essa variável no código receberão o novo valor (e a nova cor) automaticamente. Parece magia, não é mesmo?
Organização da hierarquia
Lembra que comentamos como é complicado fazer combinações de seletores no CSS e que o documento pode se tornar um caos?
No SASS, essas combinações são feitas de forma muito mais intuitiva, com uma espécie de organização hierárquica do código.
O procedimento é simples: basta colocar um “tab” à direita para cada nível hierárquico. No exemplo abaixo, há uma imagem dentro de um botão integrando o cabeçalho da página:
.cabecalho
.botao
.imagem
Com esse esquema, você consegue entender que “.imagem” faz parte de “.botao”, que, por sua vez, faz parte de “.cabecalho”, certo?
Desse jeito, fica fácil determinar as relações entre os elementos da página e, consequentemente, aplicar regras com simplicidade e clareza.
Além disso, o código escrito reduz bastante em tamanho, o que ajuda a agilizar a execução do projeto.
Modularidade
No CSS, geralmente todas as regras estão contidas em um único documento – por isso, os códigos têm muitas linhas e são enormes. É complicado dar manutenção (corrigir erros) ou mesmo fazer modificações neles.
Já no SASS, é possível importar um documento dentro de outro e gerar pequenos arquivos de texto com regras referentes apenas a determinados elementos.
Você pode criar, por exemplo, um documento que contenha só as regras dos botões, outro que possua as regras para os títulos, um terceiro relativo somente ao cabeçalho, e assim por diante.
Depois, é só importar todos esses arquivos dentro de um arquivo mestre e todas as regras serão adicionadas ao documento final.
Vamos ver um exemplo. Imagine que você tenha os seguintes arquivos dentro de uma mesma pasta:
- main.sass (arquivo principal, que agregará os demais)
- _buttons.sass (regras referentes aos botões)
- _header.sass (regras referentes ao cabeçalho)
- _titles.sass (regras referentes aos títulos)
No documento mestre (main.sass), você pode usar o comando @import e agregar os arquivos da seguinte maneira:
@import ‘./_button.sass’;
@import ‘./_header.sass’;
@import ‘./_titles.sass’;
Simples.
Assim, os códigos ficam organizados e é mais fácil fazer qualquer modificação neles. Se você tiver de mudar algum título, por exemplo, sabe que deve mexer no arquivo titles.sass.
O SASS tem muitas outras vantagens comparado ao CSS – como as extensões (comando @extend) e os mixins (@mixin), com os quais você pode criar conjuntos de regras básicas e aplicá-las a diversos elementos.
Compatibilidade com navegadores
Usar o SASS pode facilitar bastante sua vida, mas a verdade é que os navegadores entendem somente uma linguagem: o CSS.
SASS e similares (como SCSS e LESS) são linguagens “pré-processadas” – ou seja, depois de escrever o código com elas, você precisa utilizar outro programa para interpretá-lo e “traduzi-lo” para CSS.
Esse programa irá, então, gerar um arquivo final com a extensão .css, que é o arquivo que você irá adicionar a sua página HTML.
Existem várias outras opções de pré-processadores na web, e você pode escolher quais usar. Alternativas não faltam.
Nossa dica é que você visite o site oficial do SASS e descubra tudo o que essa linguagem tem a oferecer.
Mercado para quem domina CSS e SASS
Desenvolvedores Front-end estão em alta no mercado. No Brasil, os profissionais de tecnologia têm remuneração acima da média. Mas isso não quer dizer que todas as atividades e serviços nesse campo ofereçam salários no mesmo nível.
Por isso, se você ainda está definindo para qual lado se encaminha na área, é interessante analisar a situação atual dos salários dos profissionais de acordo com sua atuação.
No estudo Panorama de salários em tecnologia em 2018, a Revelo descobriu que os desenvolvedores de software são os profissionais com maior salário. Eles lideram o ranking com R$ 6,4 mil mensais em média O relatório reuniu dados reais de 9 mil ofertas de emprego e 100 mil candidatos.
Gostou da notícia? Então vale a pena dar uma olhada no estudo e baixar o e-book com todas as informações sobre o assunto.
Entendeu melhor as diferenças entre CSS e SASS? Compartilhe o artigo nas redes sociais.
