Wir gehen nun zur nächsten Übung über,
wo wir die SCSS-Syntax verwenden, um
unsere SCSS-Klassen zu definieren und sie automatisch in ihre entsprechenden CSS-Klassen umzuwandeln.
Wir werden genau die gleichen Schritte machen, die
wir für die letzte Übung gemacht haben, die wir gerade abgeschlossen haben,
aber mit der SCSS-Syntax.
Um zu beginnen, in Ihrem Projekt im CSS-Ordner,
lassen Sie uns eine neue Datei erstellen und nennen sie als Stil starten SCSS.
Jetzt werden wir in dieser Datei unsere SCSS-Klassen definieren und diese dann automatisch
in unsere CSS-Klassen konvertieren.
Also, fangen wir an, indem wir zuerst die Variablen definieren,
also beginne ich mit hellgrau,
ich habe jetzt ein paar weitere Variablen hier wieder mit
den gleichen Namen hinzugefügt, wie wir in der letzten Übung früher verwendet haben,
aber mit der SCSS-Syntax, so dass
alle Variablen mit der Dollarzeichen, um sie als Variablen zu definieren.
Als nächstes wird das Mixin definieren.
Also für das Mixin würde ich sagen mixin zero-margin, pad-up-down,
pad-links-rechts,
und wir definieren die Werte wie zuvor.
Jetzt, da wir das Mixin definiert haben,
können wir es in unseren SCSS-Klassen verwenden, die wir später definieren.
Lassen Sie uns nun einige SCSS-Klassen definieren,
also werde ich den Zeilenkopf definieren, den ich
hier das Null-Margen-Mixin mit den Werten Null Pixel verwenden werde.
Wir werden weiterhin ein paar weitere Klassen definieren, die sie hier hinzufügen werden,
so dass Sie sehen können, dass ich zusammen mit
dem Zeilenkopf und dem Zeileninhalt definiert habe, wo ich
die Mixins und die Fußzeile und die Jumbotron-Adresse verwendet habe und so weiter,
und Sie können die Verwendung
der Variablen sehen, die wir haben , die zuvor in diesem Beispiel definiert wurden.
Der Code ist offensichtlich in den Übungsanweisungen, die diesem Video folgen, verfügbar.
Als nächstes werden wir hinzufügen, wenn Sie Klassen verschachteln.
Genau wie wir es in der letzten Übung getan
haben, fügen wir in der Karussellklasse mit dem Hintergrund dunkel und dann
innen, wo wir
eine Karussellartikelklasse mit der Höhe auf Karussell Elementhöhe eingestellt,
und dann eine andere innere Klasse Farben Bild mit einigen Eigenschaften dort verschachteln,
und dann die Karussellknopf-Klasse, wie wir zuvor definiert haben.
Damit haben wir die Änderungen an unseren SCSS-Klassen vorgenommen,
also lassen Sie uns die Änderungen speichern.
Jetzt müssen wir dies in seine entsprechende CSS-Datei konvertieren.
Um unseren SCSS Quellcode in den entsprechenden CSS-Code
zu konvertieren, werden wir die Hilfe eines weiteren Knotenmoduls namens Node-sass nehmen.
Lässt das Knotenmodul installieren, indem Sie npm
install save dev—save dev und dann node-sass eingeben.
Auf diese Weise werden wir dieses node-sass-Paket
als Entwicklungsabhängigkeit in unserer package.json-Datei speichern.
Sobald die Installation abgeschlossen ist,
fügen wir ein Skript in unsere package.json-Datei ein.
Wenn Sie zu unserer package.json-Datei gehen, würden Sie sehen, dass in den Dev-Abhängigkeiten
jetzt der Knoten-Sass auch in die Dev-Abhängigkeiten hinzugefügt wird.
Wir werden nun ein Skript in unsere package.jsm-Datei hinzufügen,
also rechte Hälfte dieser Folie,
werde ich ein Skript namens SCSS hinzufügen und dann
wird dieses Skript node-sass -o CSS/ sein,
was bedeutet, dass die Ausgabe dieses die konvertierten Dateien im CSS-Ordner sein wird,
und die Quelle hier wird auch in den CSS-Ordner.
So werden alle Dateien mit der Erweiterung.scss
konvertiert und die corresponding.CSS Dateien werden von diesem node-sass.module generiert.
Lassen Sie uns die Änderungen speichern und dann gehen wir zur Eingabeaufforderung und geben Sie dann
npm ausführen SCSS ein und dies kümmert sich um unsere Konvertierung.
Gehen Sie zur Eingabeaufforderung,
geben wir npm run SCSS ein und dies sollte
automatisch alle unsere SCSS-Dateien in die entsprechenden CSS-Dateien konvertieren. Wenn Sie
zu unserem Editor gehen,
sehen Sie jetzt, dass es eine styles.css Dateien, die generiert wurde.
Wenn Sie sich den Inhalt dieser Datei ansehen,
werden Sie sehen, dass dieser CSS-Code, der aus unserem SCSS-Code generiert wurde, ziemlich
der gleiche ist wie der ursprüngliche CSS-Code, den wir selbst geschrieben haben.
Damit schließen wir diese Übung ab.
In dieser Übung haben wir gesehen, wie wir
SCSS-Code schreiben und diesen dann automatisch in ihren entsprechenden CSS-Code konvertieren können.
Der Grund, warum wir dies im Detail untersuchen, ist, weil
Bootstrap seine Quelldateien im SCSS-Format bereitstellt.
Wenn Sie die Bootstrap-Seite besuchen,
werden Sie feststellen, dass Bootstrap mit dem Sass-Präprozessor entwickelt wurde.
Also, wenn Sie sich ansehen, wie dies von Sass konvertiert wird
und wie Sie Ihre eigene Anpassung
mit dem Bootstrap Sass Code durchführen können, können Sie in die Dokumentation gehen,
und dann würden Sie unter
„Optionen“ sehen Sie einige Anpassungsoptionen, die hier definiert werden.
Verschiedene Anpassungsoptionen können Sie sehen, dass
diese Variablen alle mit der Sass-Syntax hier definiert sind,
und auch unter „Build-Tools“
wird es Ihnen erklären, wie Sie Ihre eigene Anpassung von Bootstrap durchführen können.
Nun würde ich Ihnen dringend empfehlen, dies nicht zu versuchen, bis Sie
genügend Erfahrung mit Bootstrap in Ihrem täglichen Leben haben.
Damit ist unsere Übung abgeschlossen.
Dies kann ein guter Zeitpunkt für Sie sein, ein gutes Commit mit der Nachrichtenübung SCSS zu tun.