Enkele maanden geleden heb ik 7 redenen opgesomd waarom je Sass zou moeten gebruiken in plaats van conventionele CSS om prachtige websites te bouwen. Een van deze redenen is de mogelijkheid om Bootstrap aan te passen, het meest gebruikte front-end framework in de wereld. In deze blog post, zal ik een aantal basis concepten uitleggen om Bootstrap 4 te verbeteren met Sass om een unieke en verrukkelijke gebruikerservaring te leveren.
Sass en Bootstrap 4 setup
Om te beginnen, installeer Sass en haal de laatste Bootstrap 4 distributie. De huidige laatste versie van Bootstrap is 4.2.1. U heeft de Bootstrap 4 broncode bestanden nodig, niet te verwarren met de gecompileerde CSS/JS bestanden. Als je de bestanden hebt uitgepakt, zul je een scss directory vinden.
Wat staat er in de scss folder?
De Bootstrap scss folder bevat een set .scss bestanden en ook 2 directories, mixins en utilities, met meer Sass code. Kopieer de inhoud van deze map naar een nieuwe bootstrap map en plaats die in een scss map onder de root van je project.
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
Om die .scss bestanden om te zetten in een CSS stylesheet, vertel Sass om bootstrap.scss te compileren in bootstrap.css door het volgende commando uit te voeren vanuit de root van je project:
$ sass scss/bootstrap/bootstrap.scss:css/bootstrap.css
Je kunt ook de –watch vlag toevoegen om Sass te vertellen om de CSS automatisch te compileren elke keer als een scss bestand is geupdate. Lees de Sass gids voor meer informatie.
Noteer dat:
- css de map is die de CSS file(s) bevat. U kunt deze map elke naam geven die u wilt.
- Als de uitvoermap niet bestaat, zal de compiler deze voor u aanmaken.
- Als er iets fout gaat, zal de compiler u laten zien wat er is gebeurd. Bijvoorbeeld, deze fout vertelt u dat een verwezen .scss bestand ontbreekt:
Error: Can't find stylesheet to import.@import 'je/slider'; ^^^^^^^^^^^scss/_je-theme.scss 8:9 @importscss/je.scss 12:9 root stylesheet
Voordat u begint met de aanpassingsfase, zijn hier enkele belangrijke principes om te volgen met betrekking tot de Bootstrap Sass bronbestanden:
- Bewerk geen Bootstrap bronbestanden, omdat dit het moeilijker zal maken om uw Bootstrap versie in de toekomst te upgraden.
- Het bootstrap.scss bestand bevat de .scss bestanden die gecompileerd moeten worden. Als je in dat bestand kijkt, zie je een lijst met @import referenties om kleine Sass stukjes op te halen. Met andere woorden, dit is het belangrijkste bestand dat bepaalt welke componenten je zult toevoegen.
- Een ander belangrijk .scss bestand is _variables.scss. Elke variabele die Bootstrap gebruikt is hier gedefinieerd, en dat zijn er veel. Merk ook op dat elke variabele de string “!default” aan het einde heeft, wat betekent dat je in staat zult zijn om hun waarden te overschrijven.
- _functions.scss en _mixins.scss zijn de andere 2 belangrijkste .scss bestanden binnen de broncode. Deze bestanden bevatten een set van vereiste functies en mixins die Bootstrap nodig heeft om de andere componenten te compileren.
Voeg uw eigen thema bestanden toe
Hoe kunt u Bootstrap aanpassen zonder de bestanden te bewerken? Ten eerste, maak je eigen “thema” map in de scss map. Deze map zal al uw aangepaste scss-bestanden bevatten. Ten tweede, maak een leeg main.scss bestand onder de scss directory. En ten derde, maak een nieuw bootstrap-overrides.scss bestand, ook onder de scss directory.
Bij Mugo geven we er de voorkeur aan om een aparte thema map te gebruiken om de dingen zo georganiseerd te houden:
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, zoals de naam al zegt, zal het belangrijkste scss bestand in je project zijn. Hier vertel je Sass wat er geïmporteerd moet worden:
@import "bootstrap-overrides";@import "my-theme/my-theme";
bootstrap-overrides.scss zal zich gedragen als het hoofd bootstrap.scss bestand. Hier heb je volledige controle over welke kern Bootstrap bestanden moeten worden opgenomen, en je kunt ook de standaard framework variabelen overschrijven.
Om te beginnen, kun je bootstrap-overrides.scss maken als een kopie van bootstrap/bootstrap.scss, maar vergeet niet om het pad van elk @import statement aan te passen, omdat we de scss directory structuur hebben aangepast.
/*!* 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";
Update theme colors
Bootstrap gebruikt een heleboel variabelen om het kleursysteem van het framework in te stellen. Al deze variabelen staan in _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;
Vooropgesteld dat u de primaire themakleur (blauw) wilt bijwerken, definieer deze dan in uw bootstrap-overrides.scss bestand. De variabele moet voor alle @import statements worden geplaatst.
$primary: #20c997; // your custom primary color@import "bootstrap/functions";@import "bootstrap/variables";@import "bootstrap/mixins";
Wanneer u de Sass code compileert, zal deze nieuwe $primary color waarde worden gebruikt voor alle code die verwijst naar de $primary variabele.
Wijzig de standaard onderbrekingspunten
Bootstrap onderbrekingspunten worden ook gedefinieerd in het _variables.scss bestand. Dit zijn de standaardwaarden:
$grid-breakpoints: map-merge((xs: 0,sm: 576px,md: 768px,lg: 992px,xl: 1200px),$grid-breakpoints);
Om de bestaande breekpunten bij te werken of nieuwe toe te voegen, hoeft u alleen maar de variabele $grid-breakpoints te overschrijven door alleen de vereiste sleutels door te geven.
$grid-breakpoints: (sm: 500px,xxl: 1440px);
In dit voorbeeld veranderen we de waarde van het “sm” breekpunt in 500px (in plaats van 576px) en voegen we een nieuw breekpunt toe met de naam “xxl”.
Verband hiermee is er een andere belangrijke variabele genaamd $container-max-widths die de maximale breedte van de .container klasse per breekpunt definieert. De standaard waarden zijn:
sm: 540px,md: 720px,lg: 960px,xl: 1140px
Voor ons voorbeeld, moeten we de “sm” waarde bijwerken en een nieuwe toevoegen voor het nieuwe “xxl” breekpunt. Anders zal de container klasse een maximale breedte van 1140px hebben, ongeacht hoe groot de viewport.
$container-max-widths: (sm: 480px,xxl: 1400px);
Aanpassen van de spatiëring regels
Een andere grote set van Bootstrap helper klassen zijn die met betrekking tot de spatiëring regels. De standaard waarden worden beheerd door de $spacer en $spacers variabelen. Om hun standaard waarden te updaten, hoef je ze alleen maar te definiëren in het bootstrap-overrides.scss bestand:
$spacer: 1rem;$spacers:(1: ($spacer * .5),2: $spacer,3: ($spacer * 1.5),4: ($spacer * 2),5: ($spacer * 3),6: ($spacer * 5));
Nadat de Sass code is gecompileerd, zal het de volgende CSS opleveren:
.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;}
Profiteer van enkele nuttige variabelen
Themakleuren, breakpoints, en spatiëring variabelen zijn slechts enkele van de meest nuttige variabelen binnen het raamwerk, maar er zijn er veel meer. Houdt u bijvoorbeeld niet van de styling met afgeronde randen? Je kunt de afgeronde randen eenvoudig verwijderen door de globale variabele $enable-rounded op “false” te zetten. Leuk, toch?
Hier zijn nog een paar handige variabelen die een aantal eenvoudige maar krachtige wijzigingen aanbrengen in de gecompileerde 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 wordt gebruikt om het caret icoontje te beheren dat voornamelijk binnen de dropdown elementen wordt weergegeven. De standaardwaarde is true.
- $enable-rounded wordt gebruikt om de afgeronde randen van elementen te beheren. Als je afgeronde randen weergeeft kun je ook de border-radius waarde beheren door de $border-radius variabele te overschrijven.
- $enable-shadows wordt gebruikt om de box-shadow eigenschap van knoppen en formulier elementen te regelen. $btn-box-shadow is de variabele die de box-shadow styling regelt.
- $enable-gradients maakt voorgedefinieerde gradients mogelijk via background-image styles op diverse componenten.
Ik raad aan om de Bootstrap Sass options page te raadplegen en ook _variables.scss om te zien wat u allemaal kunt doen.
Gebruik alleen wat u echt nodig hebt
En last but not least, u hebt volledige controle over welke Bootstrap-componenten moeten worden opgenomen. Als er Bootstrap componenten en hulpprogramma’s zijn die uw site niet gebruikt, kunt u ze uitsluiten, zodat het samengestelde CSS bestand zo licht mogelijk is. Als u de componenten in de toekomst toch moet gebruiken, kunt u ze gewoon uncommenten.
@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";
Als u klaar bent met het aanpassen, vergeet dan niet om de Sass code te compileren om uw CSS bestand te maken.
$ sass scss/main.scss:css/my-theme.css
Of nog beter, gebruik de –watch vlag zodat Sass je scss bestanden op de achtergrond compileert elke keer als een bestand is bijgewerkt:
$ sass --watch scss/main.scss:css/my-theme.css
Wat is de volgende stap?
De bovenstaande stappen stellen je in staat om Bootstrap 4 aan te passen en de standaard framework schil een beetje aan te passen, maar dit is slechts het begin van het aanpassingsproces. Je site zal waarschijnlijk herkenbaar zijn als een “Bootstrap site”. Bij Mugo maken we compleet uniek ogende sites volgens ontwerpspecificaties, met als resultaat heerlijke gebruikerservaringen en high performance sites. Het uitgangspunt is vaak Bootstrap met behulp van de principes zoals hierboven beschreven, maar we halen meer uit Sass en Bootstrap door onze eigen aangepaste elementen verder uit te splitsen, een bestand en map structuur verder te definiëren, en alle mixins, hulpprogramma’s, en andere framework elementen binnen onze thema bestanden te gebruiken (beginnend in my-theme.scss) indien nodig.