Sass och Bootstrap 4-uppsättning

För att komma igång installerar du Sass och hämtar den senaste Bootstrap 4-utgåvan. Den för närvarande senaste versionen av Bootstrap är 4.2.1. Du behöver Bootstrap 4-källfilerna, inte att förväxla med de kompilerade CSS/JS-filerna. När du har packat upp filerna hittar du en scss-katalog.

Vad finns i mappen scss?

Mappen Bootstrap scss innehåller en uppsättning .scss-filer och även 2 kataloger, mixins och utilities, med mer Sass-kod. Kopiera innehållet i den här mappen till en ny bootstrap-mapp och placera den i en scss-katalog under roten till ditt 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

För att konvertera dessa .scss-filer till ett CSS-stilblad säger du åt Sass att kompilera bootstrap.scss till bootstrap.css genom att köra följande kommando från roten till ditt projekt:

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

Du kan också lägga till –watch-flaggan för att säga åt Sass att automatiskt kompilera CSS:en varje gång en scss-fil har uppdaterats. Läs Sass-guiden för mer information.

Notera att:

• css är den mapp som innehåller CSS-filen/filerna. Du kan namnge den vad du vill.
• Om utdatamappen inte finns kommer kompilatorn att skapa den åt dig.
• Om något går fel kommer kompilatorn att visa dig vad som hände. Det här felet berättar till exempel att en refererad .scss-fil saknas:

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

För att påbörja anpassningsfasen finns här några viktiga principer att följa när det gäller Bootstrap Sass-källfilerna:

• Redigera inte Bootstrap-källfilerna, eftersom det gör det svårare att uppgradera din Bootstrap-version i framtiden.
• Filen bootstrap.scss innehåller vilka .scss-filer som måste kompileras. Om du tar en titt i den filen kommer du att se en lista med @import-referenser för att plocka upp små Sass-bitar. Med andra ord är detta huvudfilen som styr vilka komponenter du ska lägga till.
• En annan viktig .scss-fil är _variables.scss. Varenda variabel som Bootstrap använder definieras här, och det finns många. Observera också att varje variabel har strängen ”!default” i slutet, vilket innebär att du kommer att kunna åsidosätta deras värden.
• _functions.scss och _mixins.scss är de andra två huvudsakliga .scss-filerna i källkoden. Dessa filer innehåller en uppsättning nödvändiga funktioner och mixins som Bootstrap behöver för att kunna kompilera de andra komponenterna.

Lägg till dina egna temafiler

Hur anpassar du Bootstrap utan att redigera dess filer? Först skapar du en egen ”tema”-katalog i scss-katalogen. Denna mapp kommer att innehålla alla dina anpassade scss-filer. För det andra skapar du en tom main.scss-fil under scss-katalogen. Och för det tredje skapar du en ny bootstrap-overrides.scss-fil, också under scss-katalogen.

På Mugo föredrar vi att använda en separat temamapp för att hålla saker och ting organiserade på följande sätt:

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, enligt namnet, kommer att vara den huvudsakliga scss-filen i ditt projekt. Här kommer du att tala om för Sass vad som behöver importeras:

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

bootstrap-overrides.scss kommer att agera som huvudfilen bootstrap.scss. Här har du full kontroll över vilka Bootstrap-kärnfiler som måste inkluderas, och du kan också åsidosätta standardramvariablerna.

För att börja kan du skapa bootstrap-overrides.scss som en kopia av bootstrap/bootstrap.scss, men kom ihåg att uppdatera sökvägen för varje @import-angivelse eftersom vi har anpassat scss-katalogstrukturen.

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

Uppdatera temafärger

Bootstrap använder ett gäng variabler för att ställa in ramens färgsystem. Alla dessa variabler finns 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;

Antag att du vill uppdatera den primära temafärgen (blå), definiera den i din bootstrap-overrides.scss-fil. Variabeln måste placeras före alla @import-angivelser.

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

När du kompilerar Sass-koden kommer detta nya värde $primary color att användas för all kod som refererar till variabeln $primary.

Modifiera standardbrytpunkterna

Bootstrap-brytpunkterna definieras också i filen _variables.scss. Här är standardvärdena:

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

För att uppdatera de befintliga brytpunkterna eller lägga till nya behöver du bara åsidosätta variabeln $grid-breakpoints genom att bara ange de nödvändiga nycklarna.

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

I det här exemplet ändrar vi värdet för brytpunkten ”sm” till 500px (istället för 576px) och lägger till en ny brytpunkt som heter ”xxl”.

Relaterat till detta finns det en annan viktig variabel som heter $container-max-widths som definierar den maximala bredden för .container-klassen per brytpunkt. Standardvärdena är:

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

För vårt exempel måste vi uppdatera värdet ”sm” och lägga till ett nytt för den nya brytpunkten ”xxl”. Annars kommer containerklassen att ha en maxbredd på 1140px oavsett hur stor viewport.

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

Anpassa avståndsreglerna

En annan stor uppsättning Bootstrap-hjälpklasser är de som är relaterade till avståndsreglerna. Standardvärdena hanteras av variablerna $spacer och $spacers. För att uppdatera deras standardvärden behöver du bara definiera 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 kompileras kommer den att producera följande 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;}

Du kan dra nytta av några användbara variabler

Temafärgerna, brytpunkterna och spacing-variablerna är bara några av de mest användbara variablerna inom ramverket, men det finns mycket mer. Gillar du till exempel inte stilen med avrundade kanter? Du kan enkelt ta bort de rundade ramarna genom att ställa in den globala variabeln $enable-rounded till ”false”. Trevligt, eller hur?

Här är några fler användbara variabler som gör några enkla men kraftfulla ändringar i den kompilerade 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 används för att hantera caret-ikonen som visas främst inom dropdown-elementen. Standardvärdet är true.
• $enable-rounded används för att styra avrundade kanter i element. Om du visar avrundade gränser kan du också hantera värdet för border-radius genom att åsidosätta variabeln $border-radius.
• $enable-shadows används för att styra egenskapen box-shadow för knappar och formulärelement. $btn-box-shadow är variabeln som styr box-shadow-stilen.
• $enable-gradients aktiverar fördefinierade gradienter via bakgrundsbildstilar på olika komponenter.

Jag rekommenderar att du läser Bootstrap Sass options page och även granskar _variables.scss för att se allt du kan göra.

Använd bara det du verkligen behöver

Sist men inte minst har du full kontroll över vilka Bootstrap-komponenter som ska inkluderas. Om det finns Bootstrap-komponenter och verktyg som din webbplats inte använder kan du utesluta dem så att den kompilerade CSS-filen blir så lätt som möjligt. Om du behöver använda komponenterna i framtiden är det bara att avkommentera 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 är klar med anpassningen ska du komma ihåg att kompilera Sass-koden för att skapa din CSS-fil.

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

Och ännu bättre, använd flaggan –watch så att Sass kompilerar dina scss-filer i bakgrunden varje gång en fil har uppdaterats:

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

Vad händer härnäst?

Stråken ovan kommer att göra det möjligt för dig att anpassa Bootstrap 4 och ändra standardramskalet lite grann, men det här är bara början på anpassningsprocessen. Din webbplats kommer sannolikt att kunna kännas igen som en ”Bootstrap-webbplats”. På Mugo gör vi helt unika webbplatser enligt designspecifikationer och levererar härliga användarupplevelser och högpresterande webbplatser. Utgångspunkten är ofta Bootstrap med hjälp av de principer som beskrivs ovan, men vi får ut mer av Sass och Bootstrap genom att ytterligare bryta ut våra egna anpassade element, ytterligare definiera en fil- och mappstruktur och använda alla mixins, verktyg och andra ramelement inom våra temafiler (med början i my-theme.scss) vid behov.