Vor einigen Monaten habe ich 7 Gründe aufgelistet, warum man Sass anstelle von herkömmlichem CSS verwenden sollte, um atemberaubende Websites zu erstellen. Einer dieser Gründe ist die Möglichkeit, Bootstrap, das meistgenutzte Frontend-Framework der Welt, anzupassen. In diesem Blog-Beitrag erkläre ich einige grundlegende Konzepte zur Verbesserung von Bootstrap 4 mit Sass, um ein einzigartiges und ansprechendes Benutzererlebnis zu schaffen.
Sass und Bootstrap 4 einrichten
Um loszulegen, installieren Sie Sass und holen Sie sich die neueste Bootstrap 4-Distribution. Die aktuellste Version von Bootstrap ist 4.2.1. Sie benötigen die Bootstrap 4-Quelldateien, nicht zu verwechseln mit den kompilierten CSS/JS-Dateien. Sobald Sie die Dateien entpackt haben, finden Sie ein scss-Verzeichnis.
Was befindet sich im scss-Ordner?
Der Bootstrap scss-Ordner enthält eine Reihe von .scss-Dateien und außerdem 2 Verzeichnisse, mixins und utilities, mit mehr Sass-Code. Kopieren Sie den Inhalt dieses Ordners in einen neuen Bootstrap-Ordner und legen Sie ihn in einem scss-Verzeichnis unterhalb des Stammverzeichnisses Ihres Projekts ab.
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
Um diese .scss-Dateien in ein CSS-Stylesheet umzuwandeln, weisen Sie Sass an, bootstrap.scss in bootstrap.css zu kompilieren, indem Sie den folgenden Befehl vom Stammverzeichnis Ihres Projekts aus ausführen:
$ sass scss/bootstrap/bootstrap.scss:css/bootstrap.css
Sie können auch das Flag –watch hinzufügen, um Sass anzuweisen, das CSS jedes Mal automatisch zu kompilieren, wenn eine scss-Datei aktualisiert wurde. Lesen Sie das Sass-Handbuch für weitere Informationen.
Beachten Sie, dass:
- css der Ordner ist, der die CSS-Datei(en) enthält. Sie können ihn benennen, wie Sie wollen.
- Wenn der Ausgabeordner nicht existiert, wird der Compiler ihn für Sie erstellen.
- Wenn etwas schief geht, zeigt der Compiler Ihnen, was passiert ist. Zum Beispiel sagt Ihnen dieser Fehler, dass eine referenzierte .scss-Datei fehlt:
Error: Can't find stylesheet to import.@import 'je/slider'; ^^^^^^^^^^^scss/_je-theme.scss 8:9 @importscss/je.scss 12:9 root stylesheet
Bevor Sie mit der Anpassungsphase beginnen, sollten Sie einige wichtige Grundsätze in Bezug auf die Bootstrap-Sass-Quelldateien beachten:
- Bearbeiten Sie keine Bootstrap-Quelldateien, da dies die Aktualisierung Ihrer Bootstrap-Version in der Zukunft erschwert.
- Die Datei bootstrap.scss enthält, welche .scss-Dateien kompiliert werden müssen. Wenn Sie einen Blick in diese Datei werfen, werden Sie eine Liste von @import-Referenzen sehen, um kleine Sass-Teile zu übernehmen. Mit anderen Worten, dies ist die Hauptdatei, die steuert, welche Komponenten Sie hinzufügen werden.
- Eine weitere wichtige .scss Datei ist _variables.scss. Jede einzelne Variable, die Bootstrap verwendet, wird hier definiert, und das sind eine Menge. Beachten Sie auch, dass jede Variable die Zeichenkette „!default“ am Ende hat, was bedeutet, dass Sie in der Lage sein werden, ihre Werte zu überschreiben.
- _functions.scss und _mixins.scss sind die anderen 2 Haupt-.scss-Dateien innerhalb des Quellcodes. Diese Dateien enthalten eine Reihe von erforderlichen Funktionen und Mixins, die Bootstrap benötigt, um die anderen Komponenten zu kompilieren.
Fügen Sie Ihre eigenen Theme-Dateien hinzu
Wie können Sie Bootstrap anpassen, ohne seine Dateien zu bearbeiten? Legen Sie zunächst ein eigenes „theme“-Verzeichnis innerhalb des scss-Verzeichnisses an. Dieser Ordner wird alle Ihre eigenen scss-Dateien enthalten. Zweitens, erstellen Sie eine leere main.scss Datei im scss Verzeichnis. Und drittens erstellen Sie eine neue bootstrap-overrides.scss-Datei, ebenfalls im scss-Verzeichnis.
Bei Mugo ziehen wir es vor, einen separaten theme-Ordner zu verwenden, um die Dinge wie folgt zu organisieren:
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 ist, wie der Name schon sagt, die wichtigste scss-Datei in Ihrem Projekt. Hier teilen Sie Sass mit, was importiert werden muss:
@import "bootstrap-overrides";@import "my-theme/my-theme";
bootstrap-overrides.scss wird sich wie die Hauptdatei bootstrap.scss verhalten. Hier haben Sie die volle Kontrolle darüber, welche Kern-Bootstrap-Dateien enthalten sein müssen, und Sie können auch die Standard-Framework-Variablen überschreiben.
Zu Beginn können Sie bootstrap-overrides.scss als Kopie von bootstrap/bootstrap.scss erstellen, aber denken Sie daran, den Pfad jeder @import-Anweisung zu aktualisieren, da wir die scss-Verzeichnisstruktur angepasst haben.
/*!* 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";
Aktualisierung der Farben des Themas
Bootstrap verwendet eine Reihe von Variablen, um das Farbsystem des Frameworks festzulegen. Alle diese Variablen befinden sich 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;
Angenommen, Sie möchten die primäre Themenfarbe (blau) aktualisieren, dann definieren Sie sie in Ihrer bootstrap-overrides.scss-Datei. Die Variable muss vor allen @import-Anweisungen platziert werden.
$primary: #20c997; // your custom primary color@import "bootstrap/functions";@import "bootstrap/variables";@import "bootstrap/mixins";
Wenn Sie den Sass-Code kompilieren, wird dieser neue $primary-Farbwert für alle Codes verwendet, die auf die $primary-Variable verweisen.
Ändern Sie die Standard-Breakpoints
Bootstrap-Breakpoints werden auch in der Datei _variables.scss definiert. Hier sind die Standardwerte:
$grid-breakpoints: map-merge((xs: 0,sm: 576px,md: 768px,lg: 992px,xl: 1200px),$grid-breakpoints);
Um die vorhandenen Haltepunkte zu aktualisieren oder neue hinzuzufügen, müssen Sie nur die Variable $grid-breakpoints überschreiben und nur die erforderlichen Schlüssel übergeben.
$grid-breakpoints: (sm: 500px,xxl: 1440px);
In diesem Beispiel ändern wir den Wert des Haltepunkts „sm“ auf 500px (statt 576px) und fügen einen neuen Haltepunkt mit dem Namen „xxl“ hinzu.
In diesem Zusammenhang gibt es eine weitere wichtige Variable namens $container-max-widths, die die maximale Breite der Klasse .container pro Haltepunkt definiert. Die Standardwerte sind:
sm: 540px,md: 720px,lg: 960px,xl: 1140px
Für unser Beispiel müssen wir den Wert „sm“ aktualisieren und einen neuen Wert für den neuen Haltepunkt „xxl“ hinzufügen. Andernfalls wird die Containerklasse eine maximale Breite von 1140px haben, egal wie groß der Viewport ist.
$container-max-widths: (sm: 480px,xxl: 1400px);
Anpassen der Abstandsregeln
Ein weiterer großer Satz von Bootstrap-Hilfsklassen sind die, die sich auf die Abstandsregeln beziehen. Die Standardwerte werden von den Variablen $spacer und $spacers verwaltet. Um ihre Standardwerte zu aktualisieren, muss man sie nur in der Datei bootstrap-overrides.scss definieren:
$spacer: 1rem;$spacers:(1: ($spacer * .5),2: $spacer,3: ($spacer * 1.5),4: ($spacer * 2),5: ($spacer * 3),6: ($spacer * 5));
Nachdem der Sass-Code kompiliert wurde, wird er das folgende CSS erzeugen:
.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;}
Nutzen Sie einige nützliche Variablen
Themenfarben, Haltepunkte und Abstandsvariablen sind nur einige der nützlichsten Variablen innerhalb des Frameworks, aber es gibt noch viel mehr. Mögen Sie zum Beispiel das Styling der abgerundeten Ränder nicht? Sie können die abgerundeten Ränder einfach entfernen, indem Sie die globale Variable $enable-rounded auf „false“ setzen. Schön, nicht wahr?
Hier sind einige weitere nützliche Variablen, die einige einfache, aber mächtige Änderungen am kompilierten CSS vornehmen:
$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 wird verwendet, um das Caret-Symbol zu verwalten, das hauptsächlich in den Dropdown-Elementen angezeigt wird. Standardwert ist true.
- $enable-rounded wird verwendet, um die abgerundeten Ränder von Elementen zu steuern. Wenn abgerundete Ränder angezeigt werden, können Sie auch den border-radius-Wert verwalten, indem Sie die $border-radius-Variable überschreiben.
- $enable-shadows wird verwendet, um die box-shadow-Eigenschaft von Schaltflächen und Formularelementen zu steuern. $btn-box-shadow ist die Variable, die das Box-Shadow-Styling steuert.
- $enable-gradients ermöglicht vordefinierte Farbverläufe über Background-Image-Styles auf verschiedenen Komponenten.
Ich empfehle, die Bootstrap Sass Options-Seite zu konsultieren und auch _variables.scss zu lesen, um zu sehen, was man alles machen kann.
Verwenden Sie nur das, was Sie wirklich brauchen
Und nicht zuletzt haben Sie die volle Kontrolle darüber, welche Bootstrap-Komponenten eingebunden werden sollen. Wenn es Bootstrap-Komponenten und -Hilfsmittel gibt, die Ihre Website nicht verwendet, können Sie sie ausschließen, damit die kompilierte CSS-Datei so leicht wie möglich ist. Wenn Sie die Komponenten in Zukunft verwenden müssen, entfernen Sie einfach die entsprechenden Kommentare.
@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";
Wenn Sie die Anpassung abgeschlossen haben, denken Sie daran, den Sass-Code zu kompilieren, um Ihre CSS-Datei zu erstellen.
$ sass scss/main.scss:css/my-theme.css
Oder noch besser, verwenden Sie das Flag –watch, damit Sass Ihre scss-Dateien im Hintergrund jedes Mal kompiliert, wenn eine Datei aktualisiert wurde:
$ sass --watch scss/main.scss:css/my-theme.css
Wie geht es weiter?
Die obigen Schritte ermöglichen es Ihnen, Bootstrap 4 anzupassen und die Standard-Framework-Shell ein wenig zu verändern, aber das ist erst der Anfang des Anpassungsprozesses. Ihre Website wird wahrscheinlich als eine „Bootstrap-Site“ erkennbar sein. Bei Mugo erstellen wir völlig einzigartig aussehende Websites gemäß den Designvorgaben, die ein angenehmes Benutzererlebnis und hochleistungsfähige Websites bieten. Der Ausgangspunkt ist oft Bootstrap unter Verwendung der oben beschriebenen Prinzipien, aber wir holen mehr aus Sass und Bootstrap heraus, indem wir unsere eigenen benutzerdefinierten Elemente weiter herausbrechen, eine weitere Datei- und Ordnerstruktur definieren und alle Mixins, Dienstprogramme und andere Framework-Elemente innerhalb unserer Themadateien (beginnend in my-theme.scss) nach Bedarf verwenden.