Zunächst werde ich die 100.000 Gründe nicht auflisten, warum Bootstrap in V4 von weniger auf weniger auf SASS übertragen wurde. (Ich habe vor, einen anderen Artikel mit weniger, sass, postcss zu vergleichen).
Gehen wir zum Bootstrap V4 Sass
1. Die SASS -Dateien von Bootstrap sind alle im SCSS -Verzeichnis platziert. Warum ist der Name SCSS anstelle von Sass? Es beinhaltet hauptsächlich den Unterschied zwischen SASS und SCSS -Syntax. Die SCSS -Syntax ist näher an CSS und ist daher beliebter und weit verbreiteter. Einzelheiten finden Sie in der SASS -Syntax
2. Es gibt zwei Arten von SCSS -Dateien, einer ist der Beginn des Unterstrichs, wie z. Der Unterschied zwischen diesen beiden besteht darin, dass ersterer die importierte Datei darstellt und standardmäßig nicht in die entsprechende CSS -Datei zusammengestellt wird, während die letztere die entsprechende CSS -Datei kompiliert. Wenn also zwei Dateien _A.Scss vorhanden sind, wird das Standardkompilierungsergebnis von B.CSS nur kompiliert. Wenn B den Stil in _a.scss verwenden möchte, können Sie die Importfunktion @import A verwenden (die importierte Datei kann den Unterstrich- und Datei -Suffix -Namen weglassen). Einzelheiten finden Sie in der SASS -Syntax
3. Wenn wir das gesamte SCSS-Verzeichnis kompilieren, können wir vier CSS-Dateien erhalten, die in Bootstrap.css, Bootstrap-Flex.css, Bootstrap-reboot.css, Bootstrap-Grid.css unterteilt sind. Diese vier CSS -Stile werden von den folgenden vier SCSS -Dateien generiert.
Bootstrap-Reboot ist ein Reset-Stil und Bootstrap-Gitter ist ein Gitterstil. Diese beiden können als kostenloser separater Stil angesehen werden. Wenn Sie in einigen Szenarien nicht den gesamten Bootstrap -Stil verwenden möchten, sondern das Reset- oder Grid -System verwenden möchten, können Sie diese beiden direkt verwenden.
Der Unterschied zwischen Bootstrap und Bootstrap-Flex besteht darin, dass erstere die herkömmliche Layout-Methode verwendet, während die letztere die Flex-Methode verwendet, sodass Sie sie entsprechend Ihrer tatsächlichen Situation verwenden können. Aus dem obigen Bild können Sie sehen, dass Bootstrap-flex.scss vom $ enable-flex: true vor dem Importieren von Bootstrap.scss zurückgesetzt wurde.
4. Open bootstrap.scss und Sie können sehen, dass verschiedene Dateien importiert werden, die in 6 große Blöcke unterteilt sind, nämlich:
Variable & Mixin: Führen Sie Variablen und Mixin -Dateien ein, in denen alle Dateien im Mixin -Verzeichnis in die Datei _mixin.scss importiert werden
Zurücksetzen: Normalisieren und Druckdateien importieren
Kern: Führen Sie grundlegende Stildateien wie Gitter, Form, Tabelle, Schaltfläche usw. ein.
Komponente: Führen Sie Komponentendateien wie NAV, Karte, Breadcrumb usw. ein.
Komponente JS: Führen Sie Komponentendateien ein, für die JS -Steuerung wie Modal, Tooltips usw. erforderlich ist.
Dienstprogramm: Stellen Sie einige ortsweite Klassendateien mit einigen gemeinsamen Klassen wie ClearFix, Center-Block usw. ein.
So verwenden und modifizieren Sie den Stil von Bootstrap V4
Wenn Sie mit SASS vertraut sind, können Sie seinen SASS direkt verwenden. Wenn Sie mit SASS nicht vertraut sind, finden Sie natürlich die kompilierte Bootstrap.css im Verzeichnis dist/css.
Lassen Sie uns direkt über die Verwendung von CSS sprechen:
FEEFADE <Link href = "bootstrap.css" rel = "Stylesheet" /> in HTML
Wenn Sie den Bootstrap -Stil ändern müssen, können Sie ein anderes Stilblatt wie style.css erstellen, um den Bootstrap -Stil zu überschreiben. Es wird nicht empfohlen, die Modifikation für stile Stylesbleche direkt zu modifizieren. Da es mit Sass geschrieben ist, können wir natürlich einen Sass mit höherer Qualität auswählen. Es gibt auch zwei Möglichkeiten, SASS zu ändern, einer ist nicht zerstörerisch und der andere destruktiv.
Für zerstörerische Dinge bedeutet es, zu ändern, wo immer sie nicht mögen, und es gibt keinen guten Trick. Lassen Sie uns hier über nicht zerstörerische Verwendungsänderungen sprechen. Wir können die folgende Methode anwenden:
Stellen Sie alle SCSS -Dateien von Bootstrap in das Bootstrap -Verzeichnis ein
SCSSBootstrap-Verzeichnis (alle Dateien im Original-SCSS-Verzeichnis in Bootstrap) stootstrap.scss ... Mixin-Verzeichnis ..._ Custom-Variables.scss (benutzerdefinierte Variablen oder Variablen, die den Bootstrap überschreiben) _custom-mixin.scss (benutzerdefinierte Mischung) Style.scss.Scss.SCSS-Stil).
Der Code style.scss ist wie folgt:
@CharSet "UTF-8"; // Datei importieren @import "Custom-Variables";@importieren "Custom-Mixin";@importieren "Bootstrap/Bootstrap";
Wenn Sie einen sauberen Code haben, möchten Sie natürlich immer die unbenutzten Stile abschneiden, damit Sie Bootstrap.scss abholen und es ausprobieren können. Wäre es nicht besser, nur den Import dieser unerwünschten Stile zu entfernen? Wenn Sie in Zukunft ein Upgrade in Betracht ziehen, sollten Sie eine neue Datei erstellen und alles, was Sie wollen, gemäß der Methode in Bootstrap.scss vorstellen. Für Komponentenstile müssen Sie sie vorstellen. Wenn Sie sie nicht benötigen, müssen Sie auf die Kern- und Nutzstile achten, da Sie diese grundlegenden Stile in Ihrer Komponente verwenden.
So verbessern Sie das SASS -Design von Bootstrap V4
Aus der Sicht der persönlichen praktischen Erfahrung habe ich das Gefühl, dass Bootstrap V4 die folgenden Fehler hat: (nur für persönliche Meinung)
Sie können die Verzeichnisplanung weiter ausführen, z. B. alle Komponentendateien in das Komponentenverzeichnis und die Versorgungsdateien in das Utility -Verzeichnis, die organisierter aussehen, und jetzt etwas verstreut und etwas unordentlich aussieht.
Ohne % Design denke ich persönlich, dass % Design eine Verbesserung darstellt und für Stilkombinationsdeklarationen sehr effektiv ist, insbesondere für einige kurze kompatible Codes und so weiter.
Es kann eine SCSS -Datei bereitstellen, in der die Funktionen von Variablen und Mixin integriert werden, damit die Erstellung neuer Stildateien erleichtert und diese integrierte Datei direkt importieren kann. Variablen und Mixin können beiläufig mit Komponentenvariablen deklariert werden und können in ihre jeweiligen Komponenten -SCSS platziert werden, da nur Komponenten sie verwenden können, anstatt in der Variablendatei, so dass es so aussieht, als ob zu viele Variablendateien vorhanden sind. Sogar die Größe hat eine Mixin -Datei, die sich etwas zu sehr anfühlt.