Bootstrap com SASS — Guia Rápido

Por que usar SASS com Bootstrap?

• 🔧 Alterar qualquer variável de design globalmente.

• 🎨 Criar temas personalizados com facilidade.

• 🧠 Gerar uma versão do Bootstrap otimizada, incluindo apenas os componentes que você realmente usa.

• ⚙️ Fazer ajustes que não são possíveis apenas com CSS ou variáveis CSS padrão.

---

Instalação

1. Instale via NPM (recomendado)

Copynpm install bootstrap

Isso traz o Bootstrap, incluindo os arquivos .scss (SASS).

---

Estrutura dos Arquivos SASS

Ao instalar, você terá acesso à pasta:

Copynode_modules/bootstrap/scss/

Dentro dela, estão todos os arquivos do framework organizados em:

• _variables.scss → Todas as variáveis de design.

• _mixins.scss → Funções e mixins reutilizáveis.

• Arquivos de cada componente (_buttons.scss, _card.scss, _grid.scss, etc.).

• bootstrap.scss → Arquivo que importa tudo.

---

Exemplo Básico de Uso

Crie um arquivo custom.scss:

Copy// 1. Importe as funções necessárias
@import "node_modules/bootstrap/scss/functions";

// 2. Sobrescreva as variáveis antes de importar o Bootstrap
$primary: #6f42c1;
$border-radius: .75rem;
$body-bg: #f8f9fa;
$body-color: #212529;

// 3. Importe o Bootstrap
@import "node_modules/bootstrap/scss/bootstrap";

---

Compile o SASS para CSS:

Use uma ferramenta como:

• sass via terminal:

Copysass custom.scss custom.css

Ou qualquer outro compilador (VS Code extensions, CodeKit, Prepros, etc.).

---

Importação Modular (Opcional e recomendado)

Você pode importar apenas os componentes que realmente utiliza, otimizando o tamanho do CSS final.

Exemplo:

Copy@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";

@import "node_modules/bootstrap/scss/root";
@import "node_modules/bootstrap/scss/reboot";
@import "node_modules/bootstrap/scss/buttons";
@import "node_modules/bootstrap/scss/navbar";
@import "node_modules/bootstrap/scss/forms";
@import "node_modules/bootstrap/scss/grid";

Assim você monta um Bootstrap leve e sob medida.

---

Onde encontrar as variáveis?

No arquivo:

Copynode_modules/bootstrap/scss/_variables.scss

Ali você pode alterar:

• Cores ($primary, $success, $danger, etc.)

• Bordas ($border-radius)

• Tipografia ($font-family-sans-serif, $font-size-base)

• Breakpoints ($grid-breakpoints)

• Espaçamentos ($spacers)

Quase tudo no Bootstrap é configurável via variáveis.

---

Exemplo — Alterando Breakpoints

Copy$grid-breakpoints: (
  xs: 0,
  sm: 600px,
  md: 900px,
  lg: 1200px,
  xl: 1400px,
  xxl: 1600px
);

---

Quando Usar SASS?

---

Usar Bootstrap com SASS é o caminho ideal para quem deseja entregar interfaces com identidade própria, desempenho otimizado e máxima flexibilidade.

Site Oficial: https://sass-lang.com/