Sass og Bootstrap 4 opsætning

For at komme i gang skal du installere Sass og hente den nyeste Bootstrap 4-distribution. Den aktuelle seneste version af Bootstrap er 4.2.1. Du skal bruge Bootstrap 4-kildefilerne, som ikke skal forveksles med de kompilerede CSS/JS-filer. Når du har udpakket filerne, vil du finde en scss-mappe.

Hvad er der i scss-mappen?

Den Bootstrap scss-mappe indeholder et sæt .scss-filer og også 2 mapper, mixins og utilities, med mere Sass-kode. Kopier indholdet af denne mappe til en ny bootstrap-mappe, og placer den i en scss-mappe under roden af dit projekt.

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

For at konvertere disse .scss-filer til et CSS-stilark skal du bede Sass om at kompilere bootstrap.scss til bootstrap.css ved at køre følgende kommando fra roden af dit projekt:

$ sass scss/bootstrap/bootstrap.scss:css/bootstrap.css

Du kan også tilføje –watch-flaget for at bede Sass om automatisk at kompilere CSS’en, hver gang en scss-fil er blevet opdateret. Læs Sass-vejledningen for at få yderligere oplysninger.

Bemærk, at:

• css er den mappe, der indeholder CSS-filen/-css-filerne. Du kan navngive den, som du vil.
• Hvis outputmappen ikke findes, opretter compileren den for dig.
• Hvis noget går galt, viser compileren dig, hvad der er sket. Denne fejl fortæller dig f.eks., at en refereret .scss-fil mangler:

Error: Can't find stylesheet to import.@import 'je/slider'; ^^^^^^^^^^^scss/_je-theme.scss 8:9 @importscss/je.scss 12:9 root stylesheet

Hvor du starter tilpasningsfasen, er her nogle vigtige principper, som du skal følge med hensyn til Bootstrap Sass-kildefilerne:

• Redigér ikke Bootstrap-kildefilerne, da det vil gøre det sværere at opgradere din Bootstrap-version i fremtiden.
• Den bootstrap.scss-fil indeholder de .scss-filer, der skal kompileres. Hvis du kigger ind i den fil, vil du se en liste over @import-referencer til at hente små Sass-stykker. Med andre ord er dette den vigtigste fil, der styrer, hvilke komponenter du skal tilføje.
• En anden vigtig .scss-fil er _variables.scss. Hver eneste variabel, som Bootstrap bruger, er defineret her, og der er mange. Bemærk også, at hver variabel har strengen “!default” i slutningen, hvilket betyder, at du vil være i stand til at tilsidesætte deres værdier.
• _functions.scss og _mixins.scss er de 2 andre vigtige .scss-filer i kildekoden. Disse filer indeholder et sæt nødvendige funktioner og mixins, som Bootstrap har brug for for at kunne kompilere de andre komponenter.

Tilføj dine egne temafiler

Hvordan kan du tilpasse Bootstrap uden at redigere dens filer? Først skal du oprette din egen “theme”-mappe i scss-mappen. Denne mappe vil indeholde alle dine tilpassede scss-filer. For det andet skal du oprette en tom main.scss-fil under scss-mappen. Og for det tredje skal du oprette en ny bootstrap-overrides.scss-fil, også under scss-mappen.

På Mugo foretrækker vi at bruge en separat temamappe for at holde tingene organiseret på denne måde:

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 vil, som navnet antyder, være den vigtigste scss-fil i dit projekt. Her skal du fortælle Sass, hvad der skal importeres:

@import "bootstrap-overrides";@import "my-theme/my-theme";

bootstrap-overrides.scss vil fungere som den primære bootstrap.scss-fil. Her vil du have fuld kontrol over, hvilke Bootstrap-kernefiler der skal inkluderes, og du kan også tilsidesætte standardrammevariablerne.

Til at begynde med kan du oprette bootstrap-overrides.scss som en kopi af bootstrap/bootstrap.scss, men husk at opdatere stien for hver @import-anvisning, da vi har tilpasset scss-mappestrukturen.

/*!* 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";

Aktualiser temafarver

Bootstrap bruger en masse variabler til at indstille rammefarvesystemet. Alle disse variabler er placeret i _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;

Sæt, at du vil opdatere den primære temafarve (blå), skal du definere den i din bootstrap-overrides.scss-fil. Variablen skal placeres før alle @import-angivelser.

$primary: #20c997; // your custom primary color@import "bootstrap/functions";@import "bootstrap/variables";@import "bootstrap/mixins";

Når du kompilerer Sass-koden, vil denne nye værdi $primary color blive brugt i al kode, der refererer til variablen $primary.

Modificer standardbrydepunkterne

Bootstrap-brydepunkterne er også defineret i filen _variables.scss. Her er standardværdierne:

$grid-breakpoints: map-merge((xs: 0,sm: 576px,md: 768px,lg: 992px,xl: 1200px),$grid-breakpoints);

For at opdatere de eksisterende breakpoints eller tilføje nye skal du blot tilsidesætte variablen $grid-breakpoints ved kun at videregive de nødvendige nøgler.

$grid-breakpoints: (sm: 500px,xxl: 1440px);

I dette eksempel ændrer vi værdien for “sm”-brydepunktet til 500px (i stedet for 576px) og tilføjer et nyt brudpunkt ved navn “xxl”.

I forbindelse med dette er der en anden vigtig variabel ved navn $container-max-widths, som definerer den maksimale bredde af .container-klassen pr. brudpunkt. Standardværdierne er:

sm: 540px,md: 720px,lg: 960px,xl: 1140px

For vores eksempel skal vi opdatere værdien “sm” og tilføje en ny værdi til det nye “xxl”-brydepunkt. Ellers vil containerklassen have en maks. bredde på 1140px, uanset hvor stor viewport’en er.

$container-max-widths: (sm: 480px,xxl: 1400px);

Anpas afstandsreglerne

Et andet stort sæt Bootstrap-hjælperklasser er dem, der er relateret til afstandsreglerne. Standardværdierne administreres af variablerne $spacer og $spacers. For at opdatere deres standardværdier skal du blot definere dem i filen bootstrap-overrides.scss:

$spacer: 1rem;$spacers:(1: ($spacer * .5),2: $spacer,3: ($spacer * 1.5),4: ($spacer * 2),5: ($spacer * 3),6: ($spacer * 5));

Når Sass-koden er kompileret, vil den producere følgende 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;}

Tag fordel af nogle nyttige variabler

Temafarver, breakpoints og spacing-variabler er blot nogle af de mest nyttige variabler i rammen, men der er meget mere. Kan du f.eks. ikke lide stilen med afrundede kanter? Du kan nemt fjerne de afrundede kanter ved at indstille den globale variabel $enable-rounded til “false”. Nice, right?

Her er nogle flere nyttige variabler, der foretager nogle enkle, men kraftfulde ændringer i den kompilerede CSS:

$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 bruges til at styre det caret-ikon, der vises primært inden for dropdown-elementerne. Standardværdien er true.
• $enable-rounded bruges til at styre de afrundede kanter i elementer. Hvis der vises afrundede kanter, kan du også styre border-radius-værdien ved at tilsidesætte variablen $border-radius.
• $enable-shadows bruges til at styre box-shadow-egenskaben for knapper og formularelementer. $btn-box-shadow er variablen, der styrer box-shadow-styling.
• $enable-gradients aktiverer foruddefinerede gradienter via baggrundsbilledstilarter på forskellige komponenter.

Jeg anbefaler, at du konsulterer Bootstrap Sass-optionssiden og også gennemgår _variables.scss for at se alt det, du kan gøre.

Brug kun det, du virkelig har brug for

Sidst, men ikke mindst, har du fuld kontrol over, hvilke Bootstrap-komponenter der skal inkluderes. Hvis der er Bootstrap-komponenter og hjælpeprogrammer, som dit websted ikke bruger, kan du udelukke dem, så den kompilerede CSS-fil bliver så let som muligt. Hvis du har brug for at bruge komponenterne i fremtiden, skal du blot afkommentere dem.

@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";

Når du er færdig med tilpasningen, skal du huske at kompilere Sass-koden for at oprette din CSS-fil.

$ sass scss/main.scss:css/my-theme.css

Og endnu bedre, brug –watch-flaget, så Sass kompilerer dine scss-filer i baggrunden, hver gang en fil er blevet opdateret:

$ sass --watch scss/main.scss:css/my-theme.css

Hvad er det næste?

Med ovenstående trin kan du tilpasse Bootstrap 4 og ændre standardrammeskallen en smule, men dette er kun begyndelsen på tilpasningsprocessen. Dit websted vil sandsynligvis kunne genkendes som et “Bootstrap-websted”. Hos Mugo laver vi helt unikt udseende sites i henhold til designspecifikationer og leverer dejlige brugeroplevelser og højtydende sites med høj ydeevne. Udgangspunktet er ofte Bootstrap ved hjælp af de principper, der er skitseret ovenfor, men vi får mere ud af Sass og Bootstrap ved yderligere at bryde vores egne tilpassede elementer ud, yderligere definere en fil- og mappestruktur og bruge alle mixins, utilities og andre rammeelementer i vores temafiler (startende i my-theme.scss) efter behov.