Es ist Zeit, mit der nächsten Übung fortzufahren, die als Übung: Weniger bezeichnet wird.
Etwas, das Sie wünschen,
wird Ihnen Ihr Arzt sagen, wenn Sie ihn oder sie das nächste Mal besuchen.
Lassen Sie uns jedoch weniger genauer untersuchen, um zu verstehen, wie wir
CSS-Klassen mit der weniger Präprozessor-Syntax definieren und dann
automatisch die entsprechenden CSS-Klassen aus unseren weniger Klassen generieren können.
Um zu beginnen, gehen wir zu
unserem Projekt im Texteditor und dann innerhalb des CSS-Ordners,
werde ich diese styles.css Datei in styles-old.css umbenennen.
Ich werde meine aktuelle Version der
Datei styles.css speichern, weil sie jetzt weniger Code
und SCSS-Code schreiben und dann automatisch die
Datei styles.css generieren, indem sie diese CSS-Präprozessorsprachen kompilieren.
Danach
erstellen wir in meinem CSS-Ordner eine neue Datei namens styles.less.
Und hier drinnen werde ich meinen weniger Code definieren.
Lassen Sie uns zunächst einige weniger Variablen definieren.
Ich werde sagen, lt-grey: ddd und so weiter.
Sie können sehen, dass ich hier ein paar mehr weniger Variablen hinzugefügt habe.
Also habe ich Hintergrund dunkel als erster Wert definiert,
Hintergrundlicht und Hintergrund blass und auch
eine weitere Variable namens Karussel-Element-Höhe als 300 Pixel.
Ich werde diese Variablen verwenden, wenn ich später meine CSS-Klassen definiere.
Lassen Sie mich jetzt ein Mixin für
meine weniger Datei namens Zero-Margin hinzufügen und ich werde pad-up-dn
und pad-links-rechts definieren,
0px ist der Standardwert und dann
setze ich Marge: 0px auto,
padding: pat-up-dn
und pad-links-rechts.
Damit habe ich das Mixin definiert, das ich
in meinen CSS-Klassen verwenden werde, die wir später definieren werden.
Und das trägt zwei Parameter pad-up-dn und pad-links-rechts.
Als nächstes werde ich ein paar weitere CSS-Klassen hinzufügen, also beginne ich mit
Zeilenheader und definiere dies als Null-Marge.
Lassen Sie mich noch ein paar CSS-Klassen hinzufügen und dann zurückkommen, um sie anzusehen.
Hier habe ich noch eine andere CSS-Klasse
mit dem Null-Marge Mixin mit den Parametern 50 Pixel und 0 Pixel
definiert, eine Fußzeile, in der ich die Hintergrundfarbe mit der
Variablen definiere, die früher als
background-blass definiert haben und dann Jumbotron mit
dem Null-Marge Mixin und dem Hintergrundfarbe definiert als Hintergrundlicht,
und einige dieser anderen, die Standard-CSS-Klassen sind,
die ich dort aufgenommen habe, weil ich sie in
meiner Webseite verwenden werde und dann haben Sie
navbar-dark für die die Hintergrundfarbe, die ich uns hintergrunddunkel definiert habe.
Und der Tab-Inhalt, für den Sie mich wieder sehen,
indem Sie die Variable hellgrau für die Rahmenfarbe hier verwenden.
Als nächstes füge ich hier die Karussellklasse hinzu, für die ich
hier den Hintergrund als Hintergrunddunkel definiere, und dann
definiere ich diesen Karussell.
Beachten Sie, wie ich das als verschachteltes Element in meinem Karussell und für das Karussell-Element
definiere ich hier die Höhe als Karussel-Element-Höhe,
was eine Variable ist, die ich früher und innen definiert
habe, definiere ich das Bild, das
wiederum ein weiteres verschachteltes Element innerhalb des Karussellelements ist und dann für das Bild,
werde ich als nächstes einige CSS-Eigenschaften definieren.
Wie Sie sehen können,
habe ich einige Eigenschaften für das Bild definiert.
Hier sehen Sie die Verwendung von verschachtelten Klassen hier,
also haben Sie Karussell und innen, dass ich ein Karussell und darin
ein Bild habe, das hier definiert ist.
Schließlich
füge ich unten die CarouselButton-Klasse hinzu,
die zum Angeben des CarouselButton verwendet wird.
Mit diesen Änderungen an meiner styles.less-Datei, die in all den weniger Klassen hier hinzugefügt wird,
lassen Sie mich die Änderungen speichern.
Jetzt möchte ich in der Lage sein, dies automatisch in ihre entsprechende CSS-Datei zu konvertieren.
Um meine less Datei automatisch in ihre entsprechende CSS-Datei
zu konvertieren, werde ich ein Knotenmodul verwenden, das als weniger genannt wird.
Um das an der Eingabeaufforderung zu installieren,
tippe ich sudo npm install minus g weniger ein.
Ich installiere dies als globales Knotenmodul.
Und sobald das installiert ist,
stellt es an der Eingabeaufforderung einen weniger Compiler zur Verfügung, der als lessc bezeichnet wird.
Wenn Sie dies auf einem Windows-Rechner ausführen,
müssen Sie nicht sudo tun,
wie Sie sich wahrscheinlich bereits erinnern.
Jetzt, da wir den lessc-Compiler installiert haben,
werde ich meinen weniger Code in seinen entsprechenden CSS-Code kompilieren.
Um dies zu tun, lassen Sie mich in den CSS-Ordner gehen und dann hier
werden Sie sehen, dass Sie die Datei styles.less haben.
Geben Sie an der Eingabeaufforderung lessc styles.less styles.css ein,
und sobald die Kompilierung abgeschlossen ist,
erhalten Sie die entsprechende CSS-Datei.
Wie Sie jetzt sehen,
haben Sie den weniger Code, der in den entsprechenden CSS-Code konvertiert wird.
Wenn Sie sich den generierten CSS-Code aus dem weniger Code ansehen,
würden Sie sehen, dass dieser Code so ziemlich
wie das aussieht, was wir in unserer ursprünglichen CSS-Datei definiert haben.
Damit schließen wir diese Übung ab.
In dieser Übung haben wir gelernt,
weniger Code zu schreiben und diesen dann automatisch in den entsprechenden CSS-Code zu konvertieren.
Zu diesem Zeitpunkt möchten Sie möglicherweise die Änderungen in
Ihrem Git-Repository mit der Meldung Übung: Weniger speichern.