Bootstrap é uma estrutura bem conhecida com componentes pré-construídos que ajuda os web designers a construir um site, rapidamente. A nova versão do Bootstrap 4.2.1 usa Sass como o pré-processador de escolha. Então, neste blog, vamos entender como substituir o Bootstrap usando as variáveis sass.
Sabemos que temos que substituir o estilo Bootstrap para dar um novo visual ao site. Assim como para o fundo do tema, fontes, cores, espaçamento, etc., as variáveis são responsáveis pelo Scss para a saída. Aqui temos que sobrepor as variáveis padrão do Bootstrap. Vamos passar para a sobreposição de Bootstrap.
Adicionar Bootstrap no Projeto
Primeiro de tudo, baixe bootstrap a partir da página de download do Bootstrap. Depois disso, vamos fazer uma pasta com o nome dos fornecedores na pasta scss e adicionar a Bootstrap nessa pasta. Não vamos alterar nada nos arquivos Bootstrap, porque ele vai criar um problema no futuro quando você quiser atualizar o Bootstrap. Depois de criar a pasta, você pode adicionar o arquivo bootstrap.scss, que você compilou.
No Bootstrap-4, eles usam a flag !default, que descreve o padrão da variável default. Você só precisa copiar essa variável, adicionar seu valor e remover o sinalizador !default da variável.
Override Variables
Bootstrap tem seu próprio “_variables.scss” na pasta “scss”, que contém todas as variáveis usadas no Bootstrap. Agora, adicione a pasta “abstracts” na sua pasta scss e crie “_custom-variables.scss” nessa pasta.
Agora, abra a Bootstrap > scss > “_variables.scss”. Não vamos alterar as variáveis de Bootstrap aqui directamente, por isso vamos copiar variáveis de “_variables.scss”, e colar em “_custom-variables.scss”. Após colar as variáveis, você pode adicionar um novo valor nas variáveis.
Você deve atualizar a cor do tema principal (azul), e defini-la no seu arquivo “_custom-variables.scss”. A variável deve vir antes de todas as declarações @import. Quando você compila o código Sass, esta nova cor $primária pode ser usada para todos os códigos que referenciam a variável $primária.
Modify The Default Breakpoints
Grid Breakpoints
Bootstrap breakpoints também são definidos no arquivo _variables.scss. Aqui estão os valores padrão:
Pode alterar os pontos de quebra atuais ou adicionar novos pontos. Você só precisa substituir a variável $grid-breakpoints adicionando apenas os valores requeridos.
Largura dos recipientes
Bootstrap container-max-widths também são definidos no arquivo _variables.scss. Aqui estão os valores padrão:
Atualizado em “_custom-variables.scss”
Personalizar as regras de espaçamento
Bootstrap fornece um conjunto de espaçamento, o que ajuda no ajuste do espaçamento. As variáveis $spacer e $spacer gerenciam o valor base dos espaçamentos. Você pode atualizá-los, adicioná-los e substituí-los.
Variáveis padrão em Bootstrap
Variáveis de Override
Bootstrap também fornece muitas variáveis que podemos sobrescrever como:-
Tables, Buttons, Forms, Dropdowns, Navbar, Pagination, Tooltips, Modals, etc…
Use Only What You Need
Bootstrap has so many components that you can use, but you don’t have to use all the components which are provided by bootstrap. Você tem controle sobre o bootstrap, portanto inclua os componentes que são necessários. Se você não os incluir, então o arquivo CSS será mais leve com menos código. E você pode incluir esses componentes sempre que precisar deles no futuro. Se precisar de usar os componentes no futuro, então simplesmente descomente-os.
Some Useful Variables
Bootstrap provides some important global options which you can toggle. Como border-radius, box-shadow, e gradientes, etc.
Pode encontrar estas variáveis no ficheiro scss/_variables.scss.
$enable-caret: Use para activar o pseudo elemento caret em .dropdown-toggle.
$enable-rounded: Use para adicionar ou remover border-radius (padrão: true)
$enable-shadows: Use para adicionar ou remover box-shadows (padrão: false)
$enable-gradients: Use para gradientes via imagem de fundo (padrão: false)
$enable-transitions: Use para adicionar ou remover transições (padrão: true)
$enable-grid-classes: Para adicionar ou remover classes para o sistema de grid (padrão: true)
$enable-print-styles: Permite estilos para otimizar a impressão.
Você pode verificar sass-options aqui:-
https://getbootstrap.com/docs/4.2/getting-started/theming/#sass-options
Conclusion
Você já viu como é fácil substituir bootstrap -saas usando as variáveis saas. Nós tentamos fornecer-lhe um guia detalhado para ajudá-lo durante o processo com visuais e funções passo-a-passo. É super fácil substituir o bootstrap, desde que você saiba como encontrar as variáveis importantes. E se você já visitou o nosso blog, então você está pronto para sobrescrever!