[MUSIC]
Diese spezielle Lektion befasst sich mit CSS-Präprozessoren,
insbesondere Less und Sass.
Nun haben diese Themen offensichtlich mehr mit CSS und der
Definition von CSS-Klassen zu tun, aber es wäre unangemessen für
mich, einen Bootstrap-Kurs abzuschließen, ohne
ein wenig in CSS-Präprozessoren zu vertiefen.
Einfach, weil Bootstrap mit Sass für seine Quelle erstellt wird.
Wir werden also kurz CSS-Präprozessoren untersuchen,
was sie sind, wie sie bei der Definition
von CSS-Klassen nützlich sind und warum Bootstrap sie nutzt.
Wie Sie wahrscheinlich aus Ihren bisherigen Erfahrungen mit CSS verstehen,
ist CSS ideal, um Stile zu definieren und
diese Stile wiederholt auf verschiedene HTML-Elemente anzuwenden.
Und so verwenden wir CSS, wenn wir unsere Webseiten definieren.
Aber wenn Sie sich den CSS-Code selbst ansehen,
beginnen Sie schnell die Einschränkungen von CSS zu erkennen.
Vor allem, wenn Sie aus einem Programmierhintergrund kommen, erkennen Sie, dass
CSS nicht das hat, was Sie normalerweise in einer Programmiersprache erwarten, wie Variablen,
Verschachtelung von Selektoren, Variablen, Ausdrücken und Funktionen.
Dies bedeutet, dass das Schreiben von CSS-Code umständlich wird und die
Aufrechterhaltung von CSS-Code wegen des
Fehlens der traditionellen Programmiersprachenähnlichen Syntax umständlich wird.
Nun, hier kommen die CSS-Präprozessoren zu unserer Rettung.
Es gibt mehrere beliebte CSS-Präprozessoren, die versuchen, einige
der Mängel von CSS zu beheben, indem viele dieser Funktionen unterstützt werden.
Zwei insbesondere das ist von Interesse für uns ist Weniger und Sass.
Wir werden diese beiden in dieser Lektion genauer betrachten.
Wenn Sie nun Ihre CSS-Klassen mit einer
dieser Präprozessorsprachen wie Less oder
Sass definieren, müssen sie schließlich in CSS konvertiert werden,
aber dies kann automatisch geschehen, bevor das CSS in Ihrer Webseite verwendet wird.
Was diese Vorverarbeitungssprachen zu uns bringen, ist
mehr Programmiersprachenähnliche Syntax, wie wir in den nächsten Folien sehen werden.
Wir werden Less und Sass kurz untersuchen.
Insbesondere der Grund für uns, dies zu betrachten, ist, weil Bootstrap selbst
Sass verwendet, um seine Quelle für seine CSS-Klassen zu definieren.
Und wenn Sie also Bootstrap anpassen,
müssten Sie mit Sass-Code arbeiten.
Bootstrap 3, die die vorherige Version von Bootstrap war, benutzte Less,
und daher dachte ich, es wäre eine angemessene Sache, sowohl Less als auch
Sass abzudecken, weil sie sich
in Bezug auf ihre Fähigkeiten und die Art und Weise, wie die Syntax definiert ist, ziemlich ähnlich sind.
Die typischen Merkmale, die CSS-Präprozessoren bringen, ist die Unterstützung für
Variablen, Verschachtelungsselektoren, Ausdrücke, Funktionen und Mixins.
Also werden wir einige davon mit einigen Beispielen in den nächsten Folien betrachten.
Das erste, was wir uns ansehen werden, sind Variablen.
In vielen CSS-Klassen, die Sie definieren,
haben Sie möglicherweise einige wiederholte Verwendung bestimmter Mengen.
Es könnte sich lohnen, wenn Sie einige Variablen definieren, die
diese Mengen enthalten, und diese Variablen bei der Definition Ihrer CSS-Klassen verwenden.
Das ist also, wo Variablen zu Ihrer Rettung kommen.
Hier werden wir uns sowohl Less als auch Scss Code ansehen.
Scss ist eine Version von Sass,
beliebtere Version der Sass-Syntax, deshalb konzentriere ich mich hier auf Scss.
Wenn Sie also Variablen in Less definieren,
werden Sie den Namen der Variablen mit einem @-Zeichen fortfahren.
Im Falle von Scss verwenden Sie ein Dollarzeichen vor dem Variablennamen.
Und sobald Sie diese Variablen definiert
haben, können Sie diese Variablen verwenden, wenn Sie die Klassen definieren.
Wie Sie in dem Beispiel sehen, wo wir die navbar-inverse als Hintergrund definieren,
oder die Höhe des carousel-item als Variablen.
Nun, der Vorteil der Definition von Variablen zu Beginn Ihrer CSS-Klasse
besteht darin, dass es einen einzelnen Punkt gibt, an dem Sie einen Wert aktualisieren können, und
es wird automatisch alle CSS-Klassen aktualisieren, die diese Variable verwenden.
Typischerweise die Art und Weise, wie wir Variablen in Programmiersprachen verwenden.
Variablen in den CSS-Präprozessorsprachen können ebenfalls ihren eigenen Umfang haben.
Sehr oft, wenn Sie CSS-Klassen definieren, besonders wenn Sie
Klassen definieren müssen, die in anderen Klassen verschachtelt sind
, dann wird Ihr CSS-Code ziemlich bald sehr umständlich.
Hier wird das Verschachteln von Ihren CSS-Präprozessoren unterstützt.
Wie Sie sehen können, können Sie beispielsweise eine Karussellklasse definieren, und
innerhalb einer Karussellklasse können Sie eine Karussell Elementklasse definieren.
Und in ähnlicher Weise die Bildunterklasse innerhalb der Karussellartikelklasse.
Hier können Sie sehen, dass jeder von ihnen in einer vorherigen Klasse verschachtelt ist.
Mit Variablen können Sie jeweils einen Wert in einer Variablen speichern.
Angenommen, Sie haben eine Gruppe von Variablen, die zusammengefasst
eine Reihe von CSS-Deklarationen deklarieren, das ist, wo wir Mixins verwenden.
In Less definieren Sie ein Mixin, indem Sie ihm einen Namen geben,
und in Sass gehen Sie dem einfach ein @mixin
vor dem Namen der mixin-Deklaration voraus.
Und in einem Mixin können Sie eine Reihe von CSS-Deklarationen definieren
, die dann für verschiedene CSS-Klassen wiederverwendet werden können.
Wie Sie in diesem Beispiel sehen, definieren wir die Nullmarge
als Mixin, sowohl in Less als auch in Sass.
Beachten Sie die geringfügige Variation der Syntax in jedem dieser Fälle.
Und dann können Sie dieses Mixin verwenden, um zusätzliche CSS-Klassen zu definieren.
Hier können Sie also sehen, dass wir für den Zeilenkopf den Nullrand
als Mixin im Zeilenkopf definieren, was bedeutet, dass alle
diese Eigenschaften vom Nullrand von dieser Zeilenkopfklasse vererbt werden.
Mixins selbst können zusätzliche Parameter übernehmen, wenn Sie diese definieren möchten.
In diesem Fall definiere ich
eine Variation des Nullmargen-Mixins, den wir in der vorherigen Folie gesehen haben.
Hier nimmt dieser Null-Marge-Mixin zwei Parameter,
Pad nach unten und Pad links rechts.
Und mit Less können Sie sogar den Standardwert dafür angeben,
aber mit Scss müssen Sie die Werte explizit angeben.
Also hier definieren wir zwei verschiedene CSS-Eigenschaften, den Rand und das
Padding, und dann verwendet das Padding selbst die Parameter für unser Mixin dort.
In diesem Fall können Sie diese Mixins verwenden, wie Sie in
den beiden CSS-Klassen sehen, die unter dem Zeilenkopf und
dem Zeileninhalt definiert sind, indem Sie ihre Parameterwerte angeben,
wenn Sie dieses Mixin in Ihren CSS-Cluster aufnehmen.
Nicht nur das, Sie können sogar mathematische Operationen für vordefinierte
Variablen ausführen, wenn Sie sie in Ihren CSS-Klassen verwenden.
Hier können Sie sehen, dass ich zwei verschiedene Karussell Elemente
mit zwei verschiedenen Größen definiert habe, und so
können Sie sehen, dass die Höhen jedes einzelnen von ihnen unterschiedlich definiert sind.
In einem Fall verwende ich die vordefinierte Höhe, in einem anderen Fall
multipliziere ich diese Höhe und verwende sie dann, um die height
Eigenschaft in meinem Karussellelement für die item-large Klasse zu definieren.
Diese Art von mathematischen Operationen auf
Variablen ist also auch in CSS-Präprozessorsprachen erlaubt.
Weitere Funktionen, die die CSS-Präprozessoren enthalten,
sind Funktionen, mit denen Sie mathematische Funktionen definieren können, weniger Strings.
Sie können auch Farboperationen und Farbmischoperationen mit diesen Funktionen
durchführen und diese verwenden, wenn Sie Ihre CSS-Klassen definieren.
Das ist ein bisschen fortgeschritten, also werde ich dort nicht zu viel Detail eingehen.
Außerdem können Sie vordefinierte CSS-Präprozessorklassen in andere Klassen eingeben.
Wenn Sie beispielsweise eine Less-Klasse wie definiert
haben und diese Datei in eine andere Less-Datei eingeben können.
Wenn Sie Scss-Dateien definiert haben,
können Sie sie mit dem Importvorgang in andere Scss-Dateien importieren.
Die Syntax ist für Less und Sass gleich.
Nun, da wir einige Funktionen der CSS-Präprozessorsprachen gesehen haben, wollen wir
nun untersuchen, wie wir sie tatsächlich nutzen können, indem wir ein paar Übungen machen.
Zuerst machen wir eine Übung, die auf Weniger basiert.
Dann folgen wir dem mit einer Übung, die auf Sass basiert.
( MUSIK)