Categorias
Artigos Desenvolvimento web

Compilando o Bootstrap com SASS e NPM

Bootstrap é o framework CSS/JS mais popular entre desenvolvedores web. Bootstrap possui uma série de cores padrão que podem ser chamadas por classes, como por exemplo, primary, secondary, dentre outras.

Classes de cores do Bootstrap. Por exemplo, btn-primary altera a cor de botões para azul; bg-primary muda a cor de fundo para azul.

Entretanto, caso você queira alterar o tom das cores padrão, você teria que alterar manualmente cada classe do arquivo CSS, o que poderia levar muito tempo.

Saiba que existe uma forma simples de alterar isso. Podemos alterar essas cores compilando o Bootstrap usando SASS.

Neste artigo, apresento um breve relato de como alterar os padrões de cores usando SASS e NPM (node.js).

Vídeo-aula complementar.

Primeiros passos: criando o projeto node

Para isso iremos precisar no node.js.

Vamos começar iniciando um projeto node. No terminal ou PowerShell, execute:

npm init

Instalando Bootstrap

A seguir, vamos instalar o Bootstrap:

npm install bootstrap

Instalando SASS

A seguir vamos instalar o SASS:

npm install -g sass

Observe a pasta scss, onde ficarão os arquivos que serão compilados.

Alterando a cor primária

Digamos que temos uma página HTML bastante simples com um único botão.

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
    </head>

    <body>
        <button class="btn btn-primary">Este é um botão</button>
    </body>
</html>

Digamos que desejamos alterar o tom de azul usado pelas classes primary. Para isso, vamos abrir o arquivo _variables.scss que está disponível na pasta scss.

O arquivo _variables.scss contém uma série de variáveis que permitem alterar cores padrão do Bootstrap.

Podemos alterar o tom padrão das classes primary, mudando a variável $blue. Por exemplo, vamos usar um azul mais escuro e menos saturado:

Agora vamos compilar o arquivo e gerar um novo arquivo CSS. No terminal/PowerShell, execute o código:

sass --watch .\node_modules\bootstrap\scss:.\node_modules\bootstrap\comp

Esse código recebe duas informações importantes:

sass --watch pasta_com_arquivos_css:nome_pasta_saída

A medida que você altera o arquivo _variables.scss, o terminal irá registrar as alterações e realizar uma nova compilação dos arquivos CSS.

Agora vamos alterar o index.html para que ele aponte para o novo arquivo css criado.

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="node_modules/bootstrap/comp/bootstrap.css">
    </head>

    <body>
        <button class="btn btn-primary">Este é um botão</button>
    </body>
</html>

Veja o resultado final:

Perceba que isso é válido para qualquer classe que utilize a expressão primary:

A classe bg-primary altera a cor de fundo para a cor primária (por padrão, azul).
Mudando a cor de fundo para a mesma cor do botão.

Por Diego Mariano

Doutor em Bioinformática pela Universidade Federal de Minas Gerais com atuação na área de ciência de dados e aprendizado de máquina aplicados ao aperfeiçoamento de enzimas usadas na produção de biocombustíveis. Mestre em Bioinformática, também pela UFMG, atuando na área de desenvolvimento de sistemas Web para montagem de genomas. Atualmente realiza estágio pós-doutoral no Departamento de Ciência da Computação da UFMG com foco em desenvolvimento de sistemas Web para Bioinformática, análise exploratória e visualização de dados. Tem conhecimentos nas linguagens: PHP, JavaScript, Python, R, Perl, HTML, CSS e SQL.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *