Programação Web 2

Pré-processadores CSS

Prof. Me. Danilo Bueno

O Problema

• As folhas de estilo estão ficando maiores, mais complexas e mais difíceis de manter.
• É aqui que um pré-processador pode ajudar.

O que são?

Os pré-processadores permitem o uso de recursos avançados que não existem* nativamente no CSS padrão:

• Variáveis
• Aninhamento (Nesting)
• Mixins
• Herança
• Operadores

Os mais famosos

Atualmente, as ferramentas mais utilizadas no mercado são:

1. Sass (SCSS)
2. Less
3. Stylus

Como funciona?

• O navegador não entende arquivos de pré-processadores diretamente.
• É necessário um Compilador.

Arquivo .scss ➔ Compilador ➔ Arquivo .css

Como usar?

Variáveis

• as variáveis são uma forma de se armazenar informações para serem reutilizadas em seu CSS;
• você pode armazenar cores, tipos de fontes, etc;

$primary-color: #000;
$secondary-color: #babaca;

body {
  background-color: $secondary-color;
  color: $primary-color;
}

/* CSS GERADO */
body {
  background-color: #babaca;
  color: #000;
}

Variáveis no CSS nativo

O CSS também possui variáveis:

• As variáveis CSS são definidas dentro do seletor :root e devem ser referenciadas usando a função var().
• As variáveis CSS são processadas pelo navegador em tempo de execução, enquanto as variáveis do Sass são resolvidas durante a compilação.

Variáveis no CSS nativo

:root {
  --primary-color: #000;
  --secondary-color: #babaca;
}

body {
  background-color: var(--secondary-color);
  color: var(--primary-color);
}

Nesting (Aninhamento)

O Sass permite aninhar seletores dentro de outros, o que torna o código mais organizado e fácil de ler;

header {
  font-size: 40px;
  button {
    background: red;
    &:hover {
      background: green;
    }
  }
}

/* CSS GERADO */
header {
  font-size: 40px;
} 
header button {
  background: red;
}
header button:hover {
  background: green;
}

Nesting (Aninhamento)

• O seletor header button gerado é chamado de Seletor Descendente
• Isso significa que o estilo só será aplicado a todos os button que estiverem dentro de um header.
• O & é um placeholder que representa o seletor pai, permitindo criar pseudo-classes ou outros seletores relacionados.

Nesting nativo no CSS

• O CSS atualmente também suporta aninhamento

header {
    background: red;
    button {
        background: blue;
        &:hover {
            background: green;
        }
    }
}

Partials e Import

• Criar arquivos parciais que contêm pequenos trechos de CSS que podem ser incluídos em outros arquivos;
• Uma ótima maneira de modularizar seu CSS;
• Nomenclatura recomendada: sublinhado à esquerda (informa ao SASS que o arquivo é apenas um arquivo parcial e que não deve ser gerado um arquivo CSS único);

Partials e Import

// _variables.scss
$primary-color: #000;
$secondary-color: #babaca;
$font-stack: 'Helvetica', sans-serif;
$border-radius: 5px;
$spacing-unit: 10px;

// main.scss
@import 'variables';  
body {
  background-color: $secondary-color;
  color: $primary-color;
}

body {
  background-color: #babaca;
  color: #000;
}

Import nativo no CSS

• O CSS também possui a regra @import, mas é importante destacar que ela não é equivalente à do Sass.
• A regra @import do CSS é processada pelo navegador em tempo de execução, enquanto a do Sass é resolvida durante a compilação, resultando em um único arquivo CSS otimizado.

@import 'variables.css';
body {
  background-color: var(--secondary-color);
  color: var(--primary-color);
}

Mixins

Permitem criar grupos de declarações CSS reutilizáveis, funcionando como funções que aceitam parâmetros.

• Declaração: @mixin nome-do-mixin
• Uso: @include nome-do-mixin

Mixins

@mixin theme($color: #babaca) {
  background: $color;
  box-shadow: 0 0 1px rgba($color, .25);
  color: #fff;
}

.info {
  @include theme();
}
.alert {
  @include theme(darkred);
}
.success {
  @include theme(darkgreen);
}

.info {
  background: #babaca;
  box-shadow: 0 0 1px rgba(186, 186, 202, 0.25);
  color: #fff;
}

.alert {
  background: darkred;
  box-shadow: 0 0 1px rgba(139, 0, 0, 0.25);
  color: #fff;
}

.success {
  background: darkgreen;
  box-shadow: 0 0 1px rgba(0, 100, 0, 0.25);
  color: #fff;
}

Extend / Inheritance

O @extend permite que um seletor herde as propriedades de outro, evitando a repetição de código

%btn {
  padding: 10px;
  background: red;
}

.btn-primary {
  @extend %btn;
  background: blue;
}

@mixin vs @extend

• O @mixin é mais flexível, permitindo a passagem de parâmetros e a inclusão de código condicional
• O @extend é mais simples e direto, mas pode levar a um CSS mais complexo se usado em excesso.

Exemplo @extend

%message-shared {
    border: 1px solid #ccc;
    padding: 10px;
    color: #333;
}
.success {
    @extend %message-shared;
    border-color: #006400;
}
.error {
    @extend %message-shared;
    border-color: #8B0000;
}
.warning {
    @extend %message-shared;
    border-color: #ffcc00;
}

.warning, .error, .success {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
.success {
  border-color: #006400;
}
.error {
  border-color: #8B0000;
}
.warning {
  border-color: #ffcc00;
}

Exemplo @mixin

@mixin message-shared() {
    border: 1px solid #ccc;
    padding: 10px;
    color: #333;
}
.success {
    @include message-shared();
    border-color: #006400;
}
.error {
    @include message-shared();
    border-color: #8B0000;
}
.warning {
    @include message-shared();
    border-color: #ffcc00;
}

.success {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
  border-color: #006400;
}

.error {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
  border-color: #8B0000;
}

.warning {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
  border-color: #ffcc00;
}

Operadores

• É possível realizar cálculos matemáticos no código;
• É possível usar nativamente no CSS com a função calc(), mas o valor final é processado pelo navegador do usuário e não gerado durante a compilação.

main {
  width: 100% - 20px;
}

main {
  width: calc(100% - 20px);
}

Recursos Avançados

O Sass ainda oferece:

• Controle de Fluxo: @if, @else, @each, @for e @while.
• Módulos Prontos: Operações com cores, matemática e strings.
• Prefixos Automáticos: Auxilia na compatibilidade entre navegadores.

Utilização

• Bootstrap - Estrutura de arquivos do Bootstrap utilizando Sass para modularização e reutilização de código.
• Foundation - Framework CSS que utiliza Sass para personalização e modularidade.
• Bulma - Framework CSS que utiliza Sass para personalização e modularidade.

Para saber mais

• Sass-lang Documentation - Documentação oficial do Sass, com guias, referências e exemplos.
• MDN Web Docs - Documentação oficial do CSS, com guias, referências e exemplos.

Obrigado!

[email protected] · website · github