English 中文 العربية 日本語 Português

Bootstrap: Personalização Sass

Última atualização: 2026-08-26

1. Introdução à Lição

(1) Pré-requisitos

(2) 🎯 O que você vai aprender

(3) O Problema

A cor de marca da empresa do Bob é roxa (não o azul padrão do Bootstrap), e todos os botões, links e bordas precisam ser alterados para a cor de marca. Usando o método CDN, os estilos predefinidos do Bootstrap não podem ser modificados, exigindo sobrescrita manual de uma grande quantidade de CSS toda vez.

(4) A Solução

As 19 lições anteriores usaram o método CDN para incluir o Bootstrap, com todos os estilos sendo predefinições. Esta lição inicia a Fase 5—personalização profunda do Bootstrap via Sass, dando a você controle total sobre tudo, de cores e espaçamento a estilos de componentes. Com a sobrescrita de variáveis Sass, você só precisa alterar uma linha: $primary: purple;.

Entendendo a Abordagem: Método CDN = comer fast food (rápido mas sem escolha). Personalização Sass = cozinhar sua própria refeição (mais lento mas com gosto ajustável). Variáveis Sass são como uma receita de temperos—mudar uma variável atualiza automaticamente todos os componentes relacionados.

(5) Benefícios

Bob só precisa modificar algumas variáveis Sass, e todos os botões, links e bordas mudarão automaticamente para a cor de marca roxa. Ajustes futuros de cor de marca exigem mudar apenas um lugar para efeito global, reduzindo significativamente os custos de manutenção.

2. Configuração do Ambiente

Você precisa de um ambiente Node.js e npm:

BASH 
# Criar projeto
mkdir meu-projeto-bootstrap
cd meu-projeto-bootstrap

# Inicializar
npm init -y

# Instalar Bootstrap e suas dependências
npm install bootstrap@5.3.3
npm install -D sass

Estrutura de diretórios do projeto:

TEXT 📖 Somente leitura 
meu-projeto-bootstrap/
  scss/
    custom.scss    # Seu arquivo Sass customizado
  dist/
    style.css      # CSS compilado
  index.html
  package.json

3. Sobrescrita Básica de Variáveis

▶ Exemplo: Demonstração de Sobrescrita Básica de Variáveis

scss/custom.scss:

SCSS 
// 1. Sobrescrever variáveis do Bootstrap (deve ser antes de importar bootstrap)
$primary: #6f42c1;        // Cor de marca roxa
$success: #20c997;        // Teal
$font-family-sans-serif: 'Inter', system-ui, -apple-system, sans-serif;
$border-radius: 0.5rem;   // Cantos arredondados de 8px
$enable-shadows: true;    // Habilitar utilitários de sombra

// 2. Importar Bootstrap completo
@import "../node_modules/bootstrap/scss/bootstrap";

// 3. Estilos customizados
.custom-hero {
  background: linear-gradient(135deg, $primary, darken($primary, 15%));
}
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default. Comando de compilação:

BASH 
npx sass scss/custom.scss:dist/style.css --style compressed

index.html:

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Sass Customizado</title>
  <link rel="stylesheet" href="dist/style.css">
</head>
<body>
  <div class="container py-5">
    <button class="btn btn-primary">Primário (Roxo)</button>
    <button class="btn btn-success">Sucesso (Teal)</button>
    <div class="card shadow-sm mt-3 p-4" style="max-width: 400px;">
      <h5>Card Customizado</h5>
      <p class="text-body-secondary">Border-radius é 0.5rem, sombras habilitadas.</p>
    </div>
  </div>
</body>
</html>
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

4. Principais Variáveis Sobrescritíveis

(1) Cores

SCSS 
// Cores de marca
$primary:       #6f42c1;
$secondary:     #6c757d;
$success:       #20c997;
$info:          #0dcaf0;
$warning:       #ffc107;
$danger:        #dc3545;
$light:         #f8f9fa;
$dark:          #212529;

// Cores customizadas
$custom-color:  #ff6b6b;
$theme-colors: map-merge($theme-colors, (
  "custom": $custom-color,
));
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default. Após adicionar uma cor customizada, você pode usar btn-custom, text-custom, bg-custom.

(2) Espaçamento

SCSS 
$spacer: 1rem;           // Espaçador base (padrão 1rem = 16px)
$spacers: (
  0: 0,
  1: $spacer * 0.25,     // 4px
  2: $spacer * 0.5,      // 8px
  3: $spacer,            // 16px
  4: $spacer * 1.5,      // 24px
  5: $spacer * 3,        // 48px
  6: $spacer * 4,        // 64px (custom)
  7: $spacer * 5,        // 80px (custom)
);
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

(3) Tipografia

SCSS 
$font-family-sans-serif: 'Inter', system-ui, -apple-system, sans-serif;
$font-size-base: 1rem;         // 16px
$h1-font-size: $font-size-base * 2.5;  // 40px
$headings-font-weight: 600;
$line-height-base: 1.7;        // Mais legível
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

(4) Componentes

SCSS 
$border-radius: 0.5rem;
$border-radius-lg: 0.75rem;
$border-radius-sm: 0.25rem;

$btn-border-radius: $border-radius;
$card-border-radius: $border-radius-lg;
$card-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

5. Importação Seletiva de Componentes

O CSS completo do Bootstrap tem aproximadamente 250KB (não minificado). Se você usa apenas alguns componentes, pode importar somente os módulos necessários:

SCSS 
// Requerido
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/variables-dark";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// Opcional - escolha o que precisa
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/forms";
@import "../node_modules/bootstrap/scss/buttons";
@import "../node_modules/bootstrap/scss/card";
@import "../node_modules/bootstrap/scss/navbar";
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/helpers";

// Utilities API (requerido se usar utilitários)
@import "../node_modules/bootstrap/scss/utilities/api";
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

6. Extensão de Classes Utilitárias

SCSS 
// Adicionar utilitários customizados
$utilities: map-merge(
  $utilities, (
    "cursor": map-merge(
      map-get($utilities, "cursor"),
      (
        values: map-merge(
          map-get(map-get($utilities, "cursor"), "values"),
          (pointer: pointer, grab: grab)
        ),
      ),
    ),
  )
);
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

7. Exemplos Práticos Abrangentes

▶ Exemplo: Tema Customizado Completo

SCSS 
// scss/custom-theme.scss — Tema customizado completo
// ==========================================

// 1. Cores de Marca
$primary: #e83e8c;        // Rosa
$secondary: #6c757d;       // Cinza
$success: #28a745;         // Verde
$info: #17a2b8;            // Teal
$warning: #ffc107;         // Amarelo
$danger: #dc3545;          // Vermelho

// 2. Tipografia
$font-family-sans-serif: 'Inter', system-ui, -apple-system, sans-serif;
$font-size-base: 0.9375rem; // 15px
$headings-font-weight: 700;
$line-height-base: 1.7;

// 3. Espaçamento
$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * 0.25,
  2: $spacer * 0.5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
  6: $spacer * 4,
  7: $spacer * 5,
);

// 4. Borda e Sombra
$border-radius: 0.375rem;
$border-radius-lg: 0.5rem;
$border-radius-sm: 0.25rem;
$enable-shadows: true;

// 5. Ajustes de Componentes
$btn-border-radius: 50rem;    // Botões pílula
$card-border-color: rgba(0,0,0,0.08);
$card-box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075);
$navbar-dark-color: rgba(255,255,255,0.9);

// 6. Importar Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";

// 7. Extensões Customizadas
.custom-gradient-bg {
  background: linear-gradient(135deg, $primary, darken($primary, 15%));
}
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Tema Customizado</title>
  <link rel="stylesheet" href="dist/style.css">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
      <a class="navbar-brand fw-bold" href="#">Marca</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="nav">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link active" href="#">Início</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Sobre</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Preços</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="container py-5">
    <h1>Tema Customizado do Bootstrap</h1>
    <p class="lead">Cor de marca: <span class="text-primary fw-bold">Rosa (#e83e8c)</span></p>

    <div class="d-flex gap-2 mb-4 flex-wrap">
      <button class="btn btn-primary">Primário</button>
      <button class="btn btn-secondary">Secundário</button>
      <button class="btn btn-success">Sucesso</button>
      <button class="btn btn-danger">Perigo</button>
      <button class="btn btn-warning">Aviso</button>
      <button class="btn btn-info">Informação</button>
    </div>

    <div class="row g-4">
      <div class="col-md-4">
        <div class="card p-4 shadow-sm">
          <h5>Card Customizado</h5>
          <p class="text-body-secondary">Border-radius: 0.5rem, botões pílula acima.</p>
          <button class="btn btn-primary rounded-pill">Botão Pílula</button>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card p-4 shadow-sm">
          <h5>Teste de Espaçamento</h5>
          <p class="text-body-secondary">Espaçadores customizados p-6 e p-7 disponíveis.</p>
          <div class="bg-light p-6 rounded">p-6 (4rem padding)</div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card p-4 shadow-sm bg-primary text-white">
          <h5>Fundo Gradiente</h5>
          <p class="text-white-50">Usando a classe custom-gradient-bg.</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

▶ Exemplo: Extensão de Classes Utilitárias

SCSS 
// scss/utilities-extend.scss
// ==========================================

$primary: #6f42c1;

@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// Estender utilitários
$utilities: map-merge(
  $utilities, (
    // Adicionar utilitários de cursor
    "cursor": map-merge(
      map-get($utilities, "cursor"),
      (values: map-merge(
        map-get(map-get($utilities, "cursor"), "values"),
        (pointer: pointer, grab: grab, zoom: zoom-in)
      ))
    ),
    // Adicionar utilitários de opacidade
    "opacity": (
      property: opacity,
      values: (0: 0, 25: 0.25, 50: 0.5, 75: 0.75, 100: 1),
    ),
    // Passos de largura customizados
    "width": map-merge(
      map-get($utilities, "width"),
      (values: map-merge(
        map-get(map-get($utilities, "width"), "values"),
        (15: 15%, 35: 35%, 65: 65%)
      ))
    ),
  )
);

@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/utilities/api";
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Utilitários Estendidos</title>
  <link rel="stylesheet" href="dist/utilities-extend.css">
</head>
<body>
  <div class="container py-4">
    <h5>Utilitários de Cursor Customizados</h5>
    <div class="d-flex gap-3 mb-4">
      <div class="border p-3 cursor-pointer">cursor-pointer</div>
      <div class="border p-3 cursor-grab">cursor-grab</div>
      <div class="border p-3 cursor-zoom">cursor-zoom</div>
    </div>

    <h5>Passos de Largura Customizados</h5>
    <div class="w-15 bg-primary text-white p-2 mb-1 rounded">w-15</div>
    <div class="w-35 bg-success text-white p-2 mb-1 rounded">w-35</div>
    <div class="w-65 bg-info text-white p-2 mb-1 rounded">w-65</div>

    <h5>Utilitários de Opacidade</h5>
    <div class="d-flex gap-2">
      <div class="bg-primary text-white p-3 opacity-100 rounded">100%</div>
      <div class="bg-primary text-white p-3 opacity-75 rounded">75%</div>
      <div class="bg-primary text-white p-3 opacity-50 rounded">50%</div>
      <div class="bg-primary text-white p-3 opacity-25 rounded">25%</div>
    </div>
  </div>
</body>
</html>
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

▶ Exemplo: Modo Escuro Sass

SCSS 
// scss/dark-theme.scss
// ==========================================

$enable-dark-mode: true;

// Sobrescritas de cor clara
$primary: #0d6efd;
$body-bg: #ffffff;
$body-color: #212529;

// Sobrescritas do modo escuro
$dark-bg: #0d1117;
$dark-surface: #161b22;
$dark-border: #30363d;
$primary-dark: #58a6ff;

@import "../node_modules/bootstrap/scss/bootstrap";

// Estilos customizados do tema escuro
[data-bs-theme="dark"] {
  --bs-body-bg: #{$dark-bg};
  --bs-body-color: #c9d1d9;
  --bs-card-bg: #{$dark-surface};
  --bs-border-color: #{$dark-border};
}
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Modo Escuro Sass</title>
  <link rel="stylesheet" href="dist/dark-theme.css">
</head>
<body>
  <div class="container py-4">
    <div class="d-flex justify-content-between mb-4">
      <h5>Demonstração do Modo Escuro Sass</h5>
      <button class="btn btn-outline-primary btn-sm" onclick="toggleTheme()">
        <i class="bi bi-moon"></i> Alternar
      </button>
    </div>
    <div class="row g-3">
      <div class="col-md-4">
        <div class="card p-4">
          <h5>Título do Card</h5>
          <p>Este card se adapta ao tema atual.</p>
          <button class="btn btn-primary">Botão</button>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card p-4">
          <h5>Superfície Escura</h5>
          <p>Variáveis escuras customizadas aplicadas via Sass.</p>
          <div class="alert alert-info">Alerta de informação</div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card p-4">
          <h5>Cores de Borda</h5>
          <p>O card usa a borda customizada $dark-border.</p>
          <div class="border p-2 rounded">Caixa com borda</div>
        </div>
      </div>
    </div>
  </div>
  <script>
    function toggleTheme() {
      const html = document.documentElement;
      const next = html.getAttribute('data-bs-theme') === 'dark' ? 'light' : 'dark';
      html.setAttribute('data-bs-theme', next);
    }
  </script>
</body>
</html>
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

▶ Exemplo: Personalização de Componentes

SCSS 
// scss/component-custom.scss
// ==========================================

$primary: #6f42c1;
$border-radius: 0.5rem;

// Personalização de card
$card-border-radius: 0.75rem;
$card-cap-bg: transparent;
$card-box-shadow: 0 0.5rem 1.5rem rgba(106, 13, 173, 0.1);
$card-border-color: rgba(106, 13, 173, 0.15);

// Personalização de botão
$btn-padding-y-lg: 0.75rem;
$btn-padding-x-lg: 2rem;
$btn-font-weight: 600;

// Personalização de navbar
$navbar-padding-y: 1rem;
$navbar-brand-font-size: 1.5rem;

// Personalização de formulário
$input-border-radius: 0.5rem;
$input-focus-border-color: $primary;
$input-focus-box-shadow: 0 0 0 0.25rem rgba(106, 13, 173, 0.25);

@import "../node_modules/bootstrap/scss/bootstrap";
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Personalização de Componentes</title>
  <link rel="stylesheet" href="dist/component-custom.css">
</head>
<body>
  <div class="container py-4">
    <h5>Cards Customizados</h5>
    <div class="row g-4 mb-5">
      <div class="col-md-4">
        <div class="card p-4">
          <div class="card-body">
            <h5 class="card-title">Card Tema Roxo</h5>
            <p class="card-text">Arredondado 0.75rem, borda roxa, sombra customizada.</p>
            <a href="#" class="btn btn-primary">Ler Mais</a>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card p-4">
          <div class="card-body text-center">
            <h5 class="card-title">Card Centralizado</h5>
            <p class="card-text">Fundo de card-cap customizado removido.</p>
            <a href="#" class="btn btn-outline-primary">Detalhes</a>
          </div>
        </div>
      </div>
    </div>

    <h5>Botões Customizados</h5>
    <div class="d-flex gap-2 mb-4">
      <button class="btn btn-primary btn-lg">Grande Customizado</button>
      <button class="btn btn-primary">Padrão</button>
      <button class="btn btn-primary btn-sm">Pequeno</button>
    </div>

    <h5>Formulários Customizados</h5>
    <div class="row">
      <div class="col-md-6">
        <input type="text" class="form-control mb-2" placeholder="Foco de input customizado...">
        <select class="form-select">
          <option>Opção 1</option>
          <option>Opção 2</option>
        </select>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

(1) Fluxo de Compilação Sass

100% 
graph LR
    A[custom.scss<br/>Sobrescrita de variáveis + estilos customizados] --> B[Compilador Sass]
    C[bootstrap/scss/] --> B
    B --> D[style.css<br/>Compilação completa]
    D --> E[PurgeCSS]
    E --> F[style.min.css<br/>Apenas classes usadas permanecem]
    F --> G[Carregamento no navegador]

    H[modo --watch] -.-> B
    I[--style compressed] -.-> D

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

(2) Tabela de Referência de Variáveis Principais

Nome da Variável Valor Padrão Propósito Escopo de Impacto
$primary #0d6efd Cor primária do tema Botões, links, fundos, bordas
$font-size-base 1rem Tamanho base da fonte Tamanho global do texto do corpo
$spacer 1rem Valor base de espaçamento Todo espaçamento p-* m-* gap-*
$border-radius 0.375rem border-radius base Botões, cards, inputs
$enable-shadows true Habilitar sombras classes utilitárias shadow-*
$enable-dark-mode true Suporte ao modo escuro suporte a data-bs-theme
$font-family-sans-serif Pilha de fontes do sistema Família de fonte Fonte global do corpo

(3) Tabela de Prefixo de Variáveis de Componentes

Componente Prefixo de Variável Exemplo de Variáveis
Botão $btn-* $btn-border-radius $btn-padding-y
Card $card-* $card-border-radius $card-box-shadow
Navbar $navbar-* $navbar-padding-y $navbar-dark-color
Formulário $input-* $input-border-radius $input-focus-box-shadow
Modal $modal-* $modal-backdrop-bg $modal-content-border-radius
Tabela $table-* $table-bg $table-striped-order
Alerta $alert-* $alert-border-radius $alert-link-font-weight

(4) Tabela de Comparação de Ferramentas de Build

Ferramenta Propósito Dificuldade de Configuração Compatibilidade Bootstrap Cenário Recomendado
sass (Dart Sass) Compilar SCSS para CSS ⭐ Recomendado oficialmente Projetos simples, apenas Sass
Webpack Bundling de módulos + compilação Sass ⭐⭐⭐ Usado comumente Projetos SPA grandes
Vite Build rápido + compilação Sass ⭐⭐ Recomendado Projetos front-end modernos
Parcel Build zero-config ⭐ Usável Prototipagem rápida, projetos pequenos
Gulp Task runner ⭐⭐⭐ Combinação clássica Projetos tradicionais, fluxos multi-tarefa

❓ Perguntas Frequentes

P: E se a compilação Sass lançar um erro? R: Verifique se a versão do node-sass ou sass é compatível com o Bootstrap 5.3. Recomenda-se usar sass (Dart Sass). Use npx sass para comandos de compilação em vez de instalação global.

P: Posso substituir Sass por variáveis CSS (propriedades customizadas)? R: Sim. O Bootstrap 5.3 usa extensivamente variáveis CSS. Você pode sobrescrever --bs-primary, --bs-border-radius, etc., em :root sem ferramenta de compilação. No entanto, a abordagem Sass é mais flexível (suporta cálculos, loops, funções customizadas).

P: Por que alguns componentes não mudaram após sobrescrever variáveis? R: Garanta que as variáveis sejam definidas antes de @import bootstrap. O escopo de variáveis Sass depende da ordem—elas devem ser definidas antes de serem usadas para ter efeito.

P: Qual a diferença entre Sass e PostCSS? Qual devo usar? R: Sass é um pré-processador (variáveis, aninhamento, mixins, loops). PostCSS é um pós-processador (adiciona automaticamente prefixos de navegador, remove redundância). O Bootstrap usa oficialmente Sass para personalização. A combinação recomendada: use Sass para sobrescrita e compilação de variáveis, e use PostCSS + Autoprefixer para adicionar prefixos de navegador. Eles não conflitam e podem ser usados juntos.

P: Qual a ordem de prioridade para sobrescrita de variáveis? R: Da menor para a maior: (1) Padrões do Bootstrap; (2) Sobrescritas em _variables.scss; (3) Sobrescritas em custom.scss antes do @import; (4) Estilos customizados após o @import. Nota: variáveis CSS (--bs-primary) têm prioridade maior que variáveis Sass. Você pode usar :root { --bs-primary: red; } para sobrescrever sem recompilar.

📖 Resumo

📝 Exercícios

  1. ⭐ Crie um projeto usando Bootstrap Sass: defina a cor de marca como #e83e8c (rosa), border-radius de botão como 0.25rem, e tamanho base da fonte como 15px.
  2. ⭐⭐ Importação seletiva de componentes: importe apenas os módulos grid, buttons, cards, forms e navbar. Compile e compare a diferença de tamanho de arquivo com o Bootstrap completo.
  3. ⭐⭐⭐ Espaçamento customizado: adicione spacer-6 = 4rem e spacer-7 = 6rem. Verifique se p-6 e mt-7 funcionam.

Lição Anterior: Prática Abrangente: Página Inicial Corporativa · Próxima Lição: Modo Escuro

Web-Tutorial.com

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

100%