Há alguns meses atrás eu listei 7 razões pelas quais você deveria estar usando Sass em vez do CSS convencional para construir sites incríveis. Uma dessas razões é a capacidade de personalizar o Bootstrap, o framework de front-end mais usado no mundo. Neste post de blog, vou explicar alguns conceitos básicos para melhorar o Bootstrap 4 com o Sass para oferecer uma experiência única e deliciosa ao usuário.
Sass e Bootstrap 4 setup
Para começar, instale o Sass e obtenha a última distribuição do Bootstrap 4. A última versão atual do Bootstrap é a 4.2.1. Você vai precisar dos arquivos fonte do Bootstrap 4, não confundir com os arquivos CSS/JS compilados. Depois de descompactar os arquivos, você encontrará um diretório scss.
O que está dentro da pasta scss?
A pasta scss do Bootstrap contém um conjunto de ficheiros .scss e também 2 directórios, mixins e utilitários, com mais código Sass. Copie o conteúdo desta pasta para uma nova pasta bootstrap e coloque-a dentro de um diretório scss abaixo da raiz do seu projeto.
my-web-project/ (root folder of your project)|-- scss/| |-- bootstrap/| | |-- mixins/| | | |-- | | |-- utilities/| | | |-- | | |-- _alert.scss| | |-- _badge.scss| | |-- _breadcrumb.scss | | |-- | | |-- _variables.scss| | |-- bootstrap-grid.scss| | |-- bootstrap-reboot.scss| | |-- bootstrap.scss
Para converter esses arquivos .scss em uma folha de estilo CSS, diga ao Sass para compilar bootstrap.scss em bootstrap.css executando o seguinte comando da raiz do seu projeto:
$ sass scss/bootstrap/bootstrap.scss:css/bootstrap.css
Você também pode adicionar a flag –watch para dizer ao Sass para compilar automaticamente o CSS cada vez que um arquivo scss for atualizado. Leia o guia do Sass para mais informações.
Nota que:
- css é a pasta contendo o(s) arquivo(s) CSS. Você pode nomeá-lo como quiser.
- Se a pasta de saída não existir, o compilador irá criá-lo para você.
- Se algo der errado, o compilador irá mostrar o que aconteceu. Por exemplo, este erro diz-lhe que falta um ficheiro .scss referenciado:
Error: Can't find stylesheet to import.@import 'je/slider'; ^^^^^^^^^^^scss/_je-theme.scss 8:9 @importscss/je.scss 12:9 root stylesheet
Antes de iniciar a fase de personalização, aqui estão alguns princípios importantes a seguir em relação aos ficheiros fonte do Bootstrap Sass:
- Não edite os ficheiros fonte do Bootstrap, porque isto tornará mais difícil actualizar a sua versão do Bootstrap no futuro.
- O arquivo bootstrap.scss contém o que os arquivos .scss precisam para serem compilados. Se você tiver uma olhada nesse arquivo você verá uma lista de @importar referências para pegar pequenas peças do Sass. Em outras palavras, este é o arquivo principal que controla quais componentes você vai adicionar.
- Outro arquivo .scss importante é _variables.scss. Cada uma das variáveis que o Bootstrap usa é definida aqui, e há muita coisa. Note também que cada variável tem a string “!default” no final, significando que você será capaz de sobrescrever seus valores.
- _functions.scss e _mixins.scss são os outros 2 arquivos .scss principais dentro do código fonte. Estes ficheiros contêm um conjunto de funções necessárias e mixins que o Bootstrap necessita para compilar os outros componentes.
Adicionar os seus próprios ficheiros de temas
Como é que personaliza o Bootstrap sem editar os seus ficheiros? Primeiro, crie o seu próprio directório “theme” dentro do directório scss. Esta pasta irá conter todos os seus ficheiros scss personalizados. Segundo, crie um arquivo main.scss vazio sob o diretório scss. E terceiro, crie um novo arquivo bootstrap-overrides.scss, também sob o diretório scss.
No Mugo, nós preferimos usar uma pasta temática separada para manter as coisas organizadas assim:
my-web-project/ (root folder of your project)|-- scss/ (scss files)| |-- bootstrap/ (Bootstrap source files)| | |-- | |-- my-theme/ (your custom scss files)| | |-- my-theme.scss| | |-- | |-- bootstrap-overrides.scss| |-- main.scss
main.scss, conforme o seu nome, será o arquivo scss principal do seu projeto. Aqui, você dirá ao Sass o que precisa ser importado:
@import "bootstrap-overrides";@import "my-theme/my-theme";
bootstrap-overrides.scss agirá como o arquivo bootstrap.scss principal. Aqui, você terá controle total sobre quais arquivos Bootstrap principais precisam ser incluídos, e você também pode sobrescrever as variáveis padrão do framework.
Para começar, você pode criar bootstrap-overrides.scss como uma cópia de bootstrap/bootstrap.scss, mas lembre-se de atualizar o caminho de cada instrução @import, já que customizamos a estrutura do diretório scss.
/*!* Bootstrap v4.2.1 (https://getbootstrap.com/)* Copyright 2011-2018 The Bootstrap Authors* Copyright 2011-2018 Twitter, Inc.* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)*/@import "bootstrap/functions";@import "bootstrap/variables";@import "bootstrap/mixins";@import "bootstrap/root";@import "bootstrap/reboot";
Atualizar cores do tema
Bootstrap usa um monte de variáveis para definir o sistema de cores do framework. Todas estas variáveis estão localizadas em _variables.scss:
$blue: #007bff !default;$indigo: #6610f2 !default;$purple: #6f42c1 !default;$pink: #e83e8c !default;$red: #dc3545 !default;$orange: #fd7e14 !default;$yellow: #ffc107 !default;$green: #28a745 !default;$teal: #20c997 !default;$cyan: #17a2b8 !default;$primary: $blue !default;$secondary: $gray-600 !default;$success: $green !default;$info: $cyan !default;$warning: $yellow !default;$danger: $red !default;$light: $gray-100 !default;$dark: $gray-800 !default;
Se você quiser atualizar a cor do tema principal (azul), defina-o no seu arquivo bootstrap-overrides.scss. A variável deve ser colocada antes de todas as declarações @import.
$primary: #20c997; // your custom primary color@import "bootstrap/functions";@import "bootstrap/variables";@import "bootstrap/mixins";
Quando você compila o código Sass, este novo valor de cor $primary será usado para todo código que referencia a variável $primary.
Modifique os pontos de quebra padrão
Bootstrap breakpoints também são definidos no arquivo _variables.scss. Aqui estão os valores padrão:
$grid-breakpoints: map-merge((xs: 0,sm: 576px,md: 768px,lg: 992px,xl: 1200px),$grid-breakpoints);
Para atualizar os breakpoints existentes ou adicionar novos, você só precisa sobrescrever a variável $grid-breakpoints passando apenas as chaves necessárias.
$grid-breakpoints: (sm: 500px,xxl: 1440px);
Neste exemplo, estamos alterando o valor do ponto de quebra “sm” para 500px (ao invés de 576px) e adicionando um novo ponto de quebra chamado “xxl”.
Relacionado a isto, há outra variável importante chamada $container-max-widths que define a largura máxima da classe .container por ponto de quebra. Os valores padrão são:
sm: 540px,md: 720px,lg: 960px,xl: 1140px
Para o nosso exemplo, precisamos atualizar o valor “sm” e adicionar um novo para o novo ponto de quebra “xxl”. Caso contrário a classe container terá uma largura máxima de 1140px não importa o tamanho do viewport.
$container-max-widths: (sm: 480px,xxl: 1400px);
Personalizar as regras de espaçamento
Outro grande conjunto de classes Bootstrap helper são as relacionadas com as regras de espaçamento. Os valores padrão são gerenciados pelas variáveis $spacer e $spacers. Para atualizar seus valores padrão, você só precisa defini-los no arquivo bootstrap-overrides.scss:
$spacer: 1rem;$spacers:(1: ($spacer * .5),2: $spacer,3: ($spacer * 1.5),4: ($spacer * 2),5: ($spacer * 3),6: ($spacer * 5));
Após o código Sass ser compilado, ele irá produzir o seguinte CSS:
.m-0 {margin: 0 !important;}.m-1 {margin: 0.5rem !important;}.m-2 {margin: 1rem !important;}.m-3 {margin: 1.5rem !important;}.m-4 {margin: 2rem !important;}.m-5 {margin: 3rem !important;}// new one.m-6 {margin: 5rem !important;}
Tirar vantagem de algumas variáveis úteis
As cores temáticas, pontos de quebra e variáveis de espaçamento são apenas algumas das variáveis mais úteis dentro do framework, mas há muito mais. Por exemplo, não gosta do estilo de bordas arredondadas? Você pode remover facilmente as bordas arredondadas definindo a variável global arredondada $enable-rounded como “falsa”. Nice, right?
Aqui estão algumas variáveis mais úteis que fazem algumas alterações simples mas poderosas no CSS compilado:
$enable-caret: true !default;$enable-rounded: true !default;$enable-shadows: false !default;$enable-gradients: false !default;$enable-transitions: true !default;$enable-prefers-reduced-motion-media-query: true !default;$enable-grid-classes: true !default;$enable-print-styles: true !default;$enable-validation-icons: true !default;
- $enable-caret é usado para gerenciar o ícone do caret exibido principalmente dentro dos elementos dropdown. O valor padrão é true.
- $enable-rounded é usado para controlar as bordas arredondadas dos elementos. Se exibir bordas arredondadas você também pode gerenciar o valor de border-radius sobrepondo a variável $border-radius.
- $enable-shadows é usado para controlar a propriedade box-shadow dos botões e elementos de formulário. $btn-box-shadow é a variável que controla o estilo box-shadow.
- $enable-gradients permite gradientes predefinidos através de estilos de imagem de fundo em vários componentes.
Eu recomendo consultar a página de opções de Bootstrap Sass e também revisar _variables.scss para ver tudo o que você pode fazer.
Use apenas o que você realmente precisa
E por último, mas não menos importante, você tem controle total sobre o que os componentes Bootstrap devem ser incluídos. Se existem componentes e utilitários Bootstrap que seu site não usa, você pode excluí-los para que o arquivo CSS compilado seja o mais leve possível. Se você precisar usar os componentes no futuro, simplesmente descomente-os.
@import "bootstrap/pagination";// @import "bootstrap/badge";// @import "bootstrap/jumbotron";@import "bootstrap/alert";// @import "bootstrap/progress";@import "bootstrap/media";@import "bootstrap/list-group";@import "bootstrap/close";// @import "bootstrap/toasts";@import "bootstrap/modal";// @import "bootstrap/tooltip";@import "bootstrap/popover";@import "bootstrap/carousel";// @import "bootstrap/spinners";@import "bootstrap/utilities";
Após ter terminado a customização, lembre-se de compilar o código Sass para criar seu arquivo CSS.
$ sass scss/main.scss:css/my-theme.css
ou ainda melhor, use a bandeira –watch para que o Sass compile seus arquivos scss em segundo plano toda vez que um arquivo for atualizado:
$ sass --watch scss/main.scss:css/my-theme.css
O que vem a seguir?
Os passos acima permitirão que você personalize o Bootstrap 4 e modifique um pouco o framework shell padrão, mas isto é apenas o começo do processo de personalização. Seu site provavelmente será reconhecido como um “site Bootstrap”. No Mugo, nós fazemos sites com aparência completamente única de acordo com as especificações do design, proporcionando experiências agradáveis aos usuários e sites de alto desempenho. O ponto de partida é muitas vezes Bootstrap usando os princípios delineados acima, mas nós obtemos mais do Sass e Bootstrap, quebrando ainda mais nossos próprios elementos personalizados, definindo ainda mais uma estrutura de arquivos e pastas, e usando todas as mixins, utilitários e outros elementos de estrutura dentro de nossos arquivos temáticos (começando em my-theme.scss) conforme necessário.