Tempo de leitura: 14 minutos
Cascading Style Sheets, que também é conhecido como CSS, é uma linguagem que tem como objetivo gerar folhas de estilos e seu principal benefício é criar uma divisão entre o conteúdo e sua organização visual, sendo este usado para personalizar/colorir documentos criados em linguagens de marcação como HTML e XML.
Através de uma sintaxe simples o CSS se tornou um padrão, mas toda essa simplicidade tem custos elevados quando abordamos grandes aplicações, olhando para este problema vieram à luz os pré-processadores css com a finalidade de facilitar o desenvolvimento de estilos mais complexos.
Este artigo tem como finalidade mostrar os pré-processadores com seus recursos e funcionalidades.
O que iremos aprender sobre os pré-processadores CSS?
// O que são pré-processadores CSS?
// Os pré-processadores CSS mais populares
O que são pré-processadores CSS?
De acordo com o site do Mozilla para Desenvolvedores um pré–processador CSS é um programa que permite gerar CSS a partir da própria sintaxe exclusiva do pré-processador.
Há muitos pré-processadores CSS para escolher, no entanto, a maioria deles adicionará alguns recursos que não existem em CSS puro, como mixin, seletor de aninhamento, seletor de herança e assim por diante.
Esses recursos tornam o Framework CSS mais limpo e mais fácil de manter.
Para usar um pré-processador CSS, você deve instalar um compilador CSS em seu servidor web.
Vamos entender melhor…
Você escreverá código na sintaxe do pré-processador de sua preferência e, através de alguns processos de conversão, ele transforma (ou compila) essa sintaxe específica e própria em código CSS, ao que todos já estamos familiarizados.
Caso contrário, não se teria nenhuma estilização, já que, para este fim, os navegadores precisam de arquivos .CSS
Input -> Magic -> Output.
No caso específico dos pré-processadores de CSS, o Input é o código do pré-processador
que você estiver usando e, o Output, o bom e velho CSS às vezes, chamado de CSS puro.
Neste momento, se você ainda não tinha ouvido falar (ou lido) sobre pré-processadores CSS, isso pode parecer exótico e/ou desnecessário.
Afinal, para que incluir mais uma etapa no processo de escrita de CSS se já se pode escrever diretamente, como sempre se fez?
É justamente ao responder essa questão que o poder dos pré-processadores se mostra!
Se não houvesse quaisquer vantagens em utilizá-los, certamente milhares de desenvolvedores pelo mundo não o usariam.
Eles fazem-no pelo simples motivo de que os pré-processadores CSS contam com features que extrapolam as capacidades nativas do CSS!
Algumas possibilidades com pré-processadores são:
• Usar variáveis;
• Usar funções;
• Aninhamento de regras;
• Operações aritméticas;
• Estender regras a partir de regras pré-existentes.
Através dessas e muitas outras facilidades que os pré-processadores oferecem, muitos desenvolvedores ao redor do mundo estão adotando-os para melhorar seus fluxos de criação de estilo e organização de projetos.
Continue lendo para também fazer parte dessa galera!
Os pré-processadores CSS mais populares
Agora que já entendemos que essa história toda de pré-processadores resume-se a escrever um pseudo-CSS que, por meio de processos específicos, será transformado em CSS de fato; saiba que, dentre os pré-processadores existentes atualmente, três deles são mais utilizados:
• Sass
• Less
• Stylus
Em função do uso global, o Stylus consta como menção honrosa.
Nas rodinhas de boteco de programadores e noites do pijama para maratonas de Senhor dos Anéis, quando o assunto for pré-processadores, certamente se falará sobre Sass e Less.
Este capítulo vou me deter a explicar e demonstrar apenas as principais características de pré-processadores CSS.
Para instruções sobre como instalá-los em seu sistema, configurá-los e as maneiras possíveis de se compilar o código, consulte os respectivos sites oficiais, pois é um material bem especifico e único.
Basicamente, Sass e Less fornecem quase o mesmo acervo de funcionalidades.
Há várias controvérsias e discussões acalouradas entre os adeptos de um e outro, mas a verdade é que, nessa quase conversão de características, ao optar por usar Sass ou Less, você estará bem servido e conseguirá melhorar muito a organização e workflow de desenvolvimento de estilos!
Pequena observação sobre a sintaxe Sass.
Vou me deter mais no Sass nesse artigo; todos os exemplos de códigos e features que serão mostrados a seguir serão feitos com código dessa sintaxe.
Como eu acabei de explicar, Less também provê as maneiras de se fazer da mesma forma, de modo que não haverá nenhum prejuízo no seu entendimento.
A pequena observação é que Sass oferece 2 sintaxes diferentes para se trabalhar:
• SCSS
• Sass
SCSS (Sassy CSS) que tem extensão de arquivos .scss pode ser considerada como uma extensão de CSS, valendo-se da mesma sintaxe-base e, praticamente, a mesma forma de escrever regras.
Basicamente, se você abrir um arquivo .scss e escrever CSS puro ali, será um arquivo Sass válido. A sintaxe Sass com o mesmo nome do pré-processador, cuja extensão dos arquivos é .sass, já é bem diferente do CSS com que a maioria dos desenvolvedores estão acostumados, primando pela concisão e rapidez na escrita.
Demora-se um pouco mais para aprender a escrevê-la, mas alguns garantem que, uma vez que se domina, é difícil voltar atrás.
Este capítulo irá lhe apresentar a linguagem. Portanto, a sintaxe SCSS será usada por ser mais parecida com CSS puro, facilitando a assimilação e fixação dos conceitos.
Aninhamento de regras
Logo no primeiro dia de estudos de HTML, é fácil constatar que se trata de uma linguagem que usa elementos aninhados para funcionar: o aninhamento confere estrutura e organização hierárquica ao documento. CSS, por sua vez, não possui tal característica.
O poder de Sass começa a se mostrar já aqui: é possível aninhar regras CSS para escrever um código mais conciso e menor, conferindo hierarquia visual às regras e facilitando da leitura!
Por exemplo, veja este trecho de CSS:
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline–block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
Em SCSS, é possível escrever assim:
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline–block;
}
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
Não é incrível? Agora você pode aninhar regras de estilos e, ao compilar o código, será gerado o mesmo CSS mostrado anteriormente.
A questão é que você poupou escrita e a declaração está visualmente mais inteligível, evidenciando, em um só golpe de vista, a hierarquia intrínseca das regras.
Referência ao ascendente
Em algumas situações, é preciso fazer referência ao ascendente para se montar uma regra apropriadamente. Por exemplo, dentro do aninhamento permitido por Sass, como seria para colocar uma regra com :hover?
Se tentar algo como:
.selector {
:hover {
}
}
O CSS compilado será .selector :hover {} (note o espaço), o que não é o necessário.
Para esses casos, Sass provê uma característica muito interessante, tornando possível fazer referência ao elemento ascendente imediatamente superior: o caractere &.
Neste exemplo do hover, o código correto seria:
.selector {
&:hover {
}
}
Isso geraria o CSS: .selector:hover {}, exatamente o que está se buscando.
Sempre que, em Sass, você deparar-se com &, já sabe que a intenção é repetir o seletor ascendente imediato na regra, independente de que parte dela esteja. Veja:
.selector {
.parent-selector–modified & {
}
}
Isso vai compilar para:
.parent-selector–modified .selector {}
O seguinte código:
#custom-checkbox {
& + label {
}
&:checked + label {
}
}
compilará o CSS:
#custom-checkbox {
}
#custom-checkbox + label {
}
#custom-checkbox:checked + label {
}
Variáveis
Se o poder dos pré-processadores de CSS limitasse-se somente a permitir o uso de variáveis, ainda assim seriam tão famosos e usados como são atualmente! Poder usar variáveis é, simplesmente, um incrível avanço na organização e manutenibilidade de um conjunto de folhas de estilo!
Variáveis em Sass são como variáveis em qualquer linguagem de programação: referências nominais capazes de armazenar valores que podem ser chamadas em trechos de código subsequentes para resgatar e usá-los conforme necessário.
Para declarar uma variável, basta dar um nome qualquer (sem espaços e/ou caracteres especiais) precedido de $, usar : e dar o valor que se queira, como em:
$mainColor: #c0ffee;
Isso feito, basta usar a variável à vontade! Por exemplo:
$mainColor: #c0ffee;
header {
background-color: $mainColor;
}
a {
color: $mainColor;
}
footer .highlight {
border: 2px solid $mainColor;
}
que compilaria:
header {
background-color: #c0ffee;
}
a {
color: #c0ffee;
}
footer .highlight {
border: 2px solid #c0ffee;
}
A imensa vantagem é poder substituir absolutamente todas as referências aquela cor, alterando somente uma linha de código.
Mesmo nesse exemplo com somente 3 regras, já seria muito bom. Imagine em projetos do mundo real, em que não é raro precisar de alterações dessa natureza em dezenas de regras!
Variáveis podem conter quaisquer valores usados em CSS, como em:
$font-stack: Helvetica, sans-serif;
$width: 5em;
Quando não são declaradas fora de regras como em todos os exemplos mostrados até agora, a variável fica disponível em todo o código. Mas também é possível limitar seu escopo de atuação ao declará-la dentro de uma
regra:
.l-main {
$width: 5em;
width: $width;
}
Se tentássemos usar $width em qualquer outro lugar fora de .l-main, isso resultaria em erro.
A não ser que seja usado o modificador !global, que faz com que ela esteja disponível também em qualquer ponto do código. Nesse caso, seria possível algo como:
.l-main {
$width: 5em !global;
width: $width;
}
.l-sidebar {
width: $width;
}
Que seria compilado para:
.l-main {
width: 5em;
}
.l-sidebar {
width: 5em;
}
Interpolação de variáveis
Sass permite que seja possível interpolar variáveis. Em termos simples, seria como juntar o valor de variáveis com outras variáveis ou valores.
Para se fazer isso, referencia-se a variável usando #{VARIAVEL} e, automaticamente, a interpolação acontece.
Para ficar mais claro, veja o exemplo:
$vert: top;
$horz: left;
$radius: 5px;
.rounded-#{$vert}–#{$horz} {
border-#{$vert}–#{$horz}-radius: $radius;
}
que gera o CSS:
.rounded-top-left {
border-top–left-radius: 5px;
}
Mixins
Mixins permitem que se façam agrupamentos de declarações CSS para serem reusados onde se queira. Certamente, são uma das features mais poderosas de Sass! Se você já brincou com programação, mixins lembram bastante funções.
Para se trabalhar com eles, o par @mixin/ @include sempre estará presente.
O primeiro para definir o mixin, em si; o segundo, para indicar em qual ponto do código se quer usá-lo.
Veja este trecho de código Sass com um mixin para arredondamento de bordas sendo definido e usado:
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box {
@include border-radius(10px);
}
Isso gerará o seguinte CSS:
.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
Com 6 linhas de código, você agora pode arredondar bordas em qualquer regra que quiser, apenas usando um @include!
Como plus, ainda consegue especificar qual será o raio na própria chamada ao mixin!
Essa possibilidade de passar o valor que se quer para atuar em mixins (argumentos) certamente faz deles mais poderosos. É possível passar quantos quiser, que nem as funções em linguagens de programação. Caso se passe um argumento já especifcando um valor, este será o valor padrão usado desde que ele seja omitido ao se usar o @include. Veja:
@mixin rounded($vert, $horz, $radius: 10px) {
-webkit-border-#{$vert}–#{$horz}-radius: $radius;
-moz-border-radius-#{$vert}#{$horz}: $radius;
border-#{$vert}–#{$horz}-radius: $radius;
}
.l-footer {
@include rounded(top, left, 5px);
}
.l-sidebar {
@include rounded(top, left, 8px);
}
.navbar li {
@include rounded(top, left);
}
Isso compila para:
.l-footer {
-webkit-border-top–left-radius: 5px;
-moz-border-radius-topleft: 5px;
border-top–left-radius: 5px;
}
.l-sidebar {
-webkit-border-top–left-radius: 8px;
-moz-border-radius-topleft: 8px;
border-top–left-radius: 8px;
}
.navbar li {
-webkit-border-top–left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top–left-radius: 10px;
}
Extensão/Herança
Extensão/ Herança é uma das principais características de pré-processadores CSS!
No caso específico de Sass, é possível usar @extend para compartilhar uma série de propriedades/valores de várias regras diferentes em uma mesma regra! Isso mantém o código dentro do princípio da não repetição (DRY), faz com que seja preciso escrever bem menos código e, de quebra, ainda garante que o CSS compilado seja mais lógico e eficiente!
Como exemplo, vamos supor que você tenha esta regra:
.default-box {
background-color: #efefef;
border: 1px solid #000;
color: #333;
}
Caso seja preciso criar variações disso com Sass, uma das maneiras possíveis seria estendê-la em outra regra! Assim:
.alert-box {
@extend .default-box;
font-size: 2em;
}
o que compilaria para:
.default-box, .alert-box {
background-color: #efefef;
border: 1px solid #000;
color: #333;
}
.alert-box {
font-size: 2em;
}
Percebe o poder que isso oferece? Vamos ver agora como funciona a importação.
Importação
Levando em conta o que se aprendeu as vantagens do Sass ao permitir Extensão/ Herança, não surpreenderia se você já tivesse chegado à conclusão de que, em projetos mais profissionais, é preciso que se tenha diversos arquivos diferentes, cada um com seu propósito e contendo suas respectivas regras de estilo.
Para essas ocasiões, o Sass oferece um recurso de importação, usando
@import.
Em uma demonstração simples, 2 arquivos:
Logo no início do arquivo style.scss, bastaria colocar:
@import ‘generics’;
Tudo o que está dentro de _generics.scss poderia ser acessado.
Não é preciso colocar o _ nem .scss na sintaxe de importação. Também é possível e, quase sempre, necessário importar vários arquivos, separando-os por vírgula na declaração do @import.
Neste ponto, cabem duas observações importantes.
A primeira é que se deve ter atenção ao nome do arquivo que foi importado, que começa com um subtraço (underline). Dentro da dinâmica do Sass, isso é chamado de partial e significa que, na compilação, somente será gerado um arquivo CSS de style.scss. Em outras palavras, na compilação, partials não geram sua contraparte .css.
A segunda é que é importante não confundir esse @import com a importação de arquivos que já existe em CSS puro. Esta faz uma requisição extra no servidor, chamando um arquivo à parte, aquela junta todos os arquivos importados no importador, garantindo a geração de um arquivo único com todas as regras. Por padrão, Sass não permite importar arquivos .css diretamente.
Para finalizar, é possível a importação de arquivos em subdiretórios. Em um projeto com estrutura Sass, por exemplo, poderia haver um arquivo único que importasse todos os partials necessários:
No início do arquivo style.scss, colocaríamos:
@import
‘base/base’,
‘base/fonts’,
‘base/forms’,
‘base/generics’,
‘layout/content’,
‘layout/footer’,
‘layout/header’,
‘layout/menu’,
‘module/button’,
‘module/pagination’,
‘module/search’
;
Cada arquivo importado poderia também ter declarações de @import, o que causaria um efeito bola de neve de importação e, como o esperado, ainda continuaria compilando somente o arquivo style.css.
Conclusão
Chegamos ao final de mais um Guia Definitivo, para lhe deixar super familiarizado com os pre-processadores css.
Se você quiser ver mais conteúdos como esse e se aprofundar ainda mais, temos o nosso Curso de Front-End Completo, onde vemos em projetos reais como utilizar cada elemento. São mais de 500 aulas de puro conteúdo e 35 projetos práticos desenvolvidos!
