Eines der Dinge, die CSS Es verwendet standardmäßig keine Strukturen im Programmierstil, bei denen wir den Code auf logische Weise wiederverwenden können diese Veränderungen.
Dieser Ansatz bedeutet, dass wir am Ende des Tages mit langen Stylesheets enden, und obwohl dieses Ergebnis bei Verwendung nicht variiert wird Weniger.js, wenn sich die Art und Weise, wie wir zu besagten Blättern gelangen, ändert, ist dies dank der Mixins und Vererbung, bei der wir einige Komponenten deklarieren und verwenden können, um die Strukturen nicht manuell entwickeln zu müssen.
Anforderungen1- Um dieses Tutorial durchführen zu können, benötigen wir vorher einige Dinge, wir benötigen einen Ordner, in dem wir unsere Dateien speichern können .weniger Ja .css, müssen wir über Berechtigungen dafür verfügen, um bei Bedarf Änderungen vornehmen zu können.
2- Wir müssen eine funktionsfähige Installation von Weniger.js, sowie alle seine Voraussetzungen, wie sie sind Node.js Ja npm, damit wir unsere generierten Stylesheets zusammenstellen können.
3- Schließlich benötigen wir auch einen Texteditor, um den Code zu erstellen, den wir verwenden können Erhabener Text o NotePad ++, obwohl der klassische Notepad auch für uns funktioniert, hängt alles davon ab, ob wir Hilfe beim Code oder erweiterte Funktionen wünschen.
CSS-Eigenschaften mit einem Mixin festlegenEines der ersten Dinge, die wir kennen sollten Mixins, ist, dass es sich um Methoden handelt, die uns helfen, die Eigenschaften zu ermitteln CSS für unser Projekt, um Code wiederzuverwenden und konsistentere Stile zu erzielen. Die Besonderheit eines Mixins ist, dass beim Kompilieren unseres Codes Weniger Dies wird nicht berücksichtigt, in dem Sinne, dass kein Mixins-Stylesheet generiert wird. Dies wird erreicht, indem beim Definieren Klammern eingefügt werden. Sobald wir ein Mixin haben, müssen wir seine Quelldatei importieren und auf diese Weise werden einfach seine Werte angezeigt auf unser Hauptblatt übertragen, das wir auf unserer Seite aufnehmen werden.
Erstellen unserer ersten Mischen
Lass uns eine erstellen Mischen das ermöglicht es uns, Eigentum zu etablieren CSS um die Kanten eines Elements in unserem . abzurunden HTML, dazu müssen wir die folgenden Schritte ausführen:
1- Wir werden in unserem Projektordner eine Datei namens . erstellen mixins.weniger, und darin werden wir den folgenden Inhalt platzieren:
.runde Kanten () {Grenzradius: 7px; }2- Jetzt erstellen wir eine Datei namens projekt.weniger, hier werden wir festlegen, wie die verschiedenen Stile unserer Seite angewendet werden HTML, damit wir uns an die Arbeit gewöhnen Weniger Wir werden mehrere Regeln erstellen CSS damit wir sehen können, wie die MixinsSehen wir uns den Code an, den wir in diese Datei einfügen müssen.
@import "mixins.less"; @ Header-Hintergrundfarbe: blau; @ Inhalts-Hintergrundfarbe: grün; @ Fußzeilen-Hintergrundfarbe: rot; Header {. abgerundete Kanten (); Hintergrundfarbe: @ Header-Hintergrundfarbe; Farbe: Kontrast (@ header-background-color); } p {.abgerundete Kanten (); Hintergrundfarbe: @ Inhaltshintergrundfarbe; Farbe: Kontrast (@ content-background-color); } Fußzeile {. abgerundete Kanten (); Hintergrundfarbe: @ Fußzeile-Hintergrundfarbe; Farbe: Kontrast (@Fußzeile-Hintergrundfarbe); }Wie wir sehen, importieren wir zunächst die Datei, die wir im vorherigen Schritt generiert haben, legen dann 3 Variablen fest, denen wir eine Farbe als Wert zuweisen, und erstellen schließlich die Klassen für die Elemente HTML, als erstes rufen wir unsere Funktion auf Abgerundeten Ecken(), und dann weisen wir die Elementfarben mit den Variablen zu.
3- In diesem Schritt erstellen wir die Datei HTML, die wir beliebig nennen können, solange sie eine Struktur wie die folgende hat:
Mixins mit Less La CabeceraWie wir sehen, haben wir einfach unsere Datei eingefügt .weniger Als .js, das das Tool enthält, haben wir uns für diese Option entschieden, damit wir nicht kompilieren müssen, müssen jedoch daran denken, dass dies nicht in der Produktion angewendet werden sollte. Im Körper des HTML Wir generieren die verschiedenen Elemente, die wir im CSS definiert hatten, um die Anwendung der Stile zu sehen.Der Inhalt
Fusszeile
4- Wenn wir schließlich das Ergebnis sehen möchten, öffnen Sie einfach unser Dokument in einem Browser wie Feuerfuchs und damit wir sehen können, wie alles aussieht, sehen wir uns im folgenden Bild an, was wir bekommen haben:
Wenn wir etwas weiter gehen und den Quellcode sehen, den der Browser interpretiert, werden wir sehen, wie die verschiedenen Variablen und die Mischen angewendet, wurde es tatsächlich durch Code ersetzt CSS, was bedeutet, dass auch wenn wir die Eigenschaft nur einmal geschrieben haben Weniger platziert es dort, wo die Übereinstimmung entspricht, mal sehen:
Das Erbe in unseren Styles
Die Arbeit mit Vererbungen ist etwas, das uns hilft, und das aus dem Grund, dass wir überlegene Elemente erstellen können, die einige Eigenschaften an ihre untergeordneten oder enthaltenen Elemente weitergeben, dh es gibt gemeinsame Merkmale, die wir in Elementen, die wir wollen, nicht wiederholen müssen sie zu haben.
Das Ziel, Code nicht zu wiederholen, ist wie immer, uns Arbeit und Zeit zu sparen, Fehler zu reduzieren und die Wartbarkeit unseres Codes dank der Konsistenz und Zentralisierung seiner Ressourcen zu erhöhen.
Eine der einfachsten, aber effektivsten Methoden zur Vererbung sind verschachtelte Elemente. Nehmen wir an, wir haben einen Abschnitt HTML und im Inneren haben wir mehrere Elemente, wenn wir die CSS Klassisch zu sagen, dass alle Elemente dieses Abschnitts einige Eigenschaften haben, diese jedoch unterschiedlich sind, wäre es notwendig, für jeden Stil mindestens eine Zeile zu erstellen, mal sehen, was wir meinen:
Abschnitt Element1 {Inhalt1: xx; } Abschnitt element2 {content2: zz; }Wie wir sehen, erstellen wir mehr Code, als wir benötigen sollten, wenn wir stattdessen Vererbung und Verschachtelung verwenden Weniger wir könnten etwa folgendes erreichen:
Abschnitt {Element1 {Inhalt1: xx; } item2 {content2: zz; }}Wie wir sehen, schreiben wir nicht nur weniger, sondern auch die Darstellung dessen, was wir erreichen möchten, ist viel logischer, was uns hilft, die Elemente, die wir in unseren Stilen verwenden werden, zu verstehen und richtig zu trennen.
Erstellen verschachtelte Stile
Jetzt werden wir das anwenden, was wir gerade im vorherigen Punkt erklärt haben, wir müssen eine Datei erstellen .weniger wo wir einen verschachtelten Stil erstellen, um Arbeit zu sparen und logischer zu machen. Um diese Aufgabe zu erfüllen, müssen wir die folgenden Schritte ausführen:
1- Lassen Sie uns eine Datei erstellen.weniger wie können wir nennen Vererbung.weniger, hier werden wir die verschachtelten Stile erstellen. Um dies zu verstehen, sehen wir uns einfach den Code an, den wir platzieren werden, und so wird das Konzept besser zu uns kommen.
Abschnitt {h1 {font-size: 4em;} p {padding: 0 5px;}}Wir sehen, dass wir einen Stil für das Element erstellt haben Sektion, und das alles h1 oder P innerhalb dieses Containerelements muss es mit den etablierten Regeln arbeiten, die wir verschachtelt haben.
2- Jetzt müssen wir unsere Datei erstellen HTML die der vorherigen Übung sehr ähnlich sein wird, welche Änderungen sind die Namen der einzuschließenden Dateien und die Struktur innerhalb der Karosserie, aber wenn wir es abstrakt sehen, reden wir über dasselbe, schauen wir uns den Code an.
Vererbung in wenigerWie wir sehen, einfach indem wir unsere Datei einbinden Weniger ist, dass wir die notwendigen Stile generieren werden, wenn wir sehen, wie es im Browser aussieht, erhalten wir etwa Folgendes:Unsere Inhalte
Wenn wir jedoch bemerken, was mit der CSS Wenn es interpretiert oder kompiliert wird, werden wir feststellen, dass die von uns erstellte verschachtelte Form nicht respektiert wird, aber da der Compiler diese nicht verschachtelte Form direkt erstellt, müssen wir uns keine Sorgen machen, dass dies so ist Code, den unser Browser sieht, sieht wie folgt aus:
Damit können wir dieses Tutorial beenden, wie wir gesehen haben Weniger es ist nicht nur schreiben CSS auf andere Weise besteht darin, diese Unterschiede nützlich zu machen, was dazu führt, dass wir Zeit sparen, Anwendungen für unser Entwicklungsteam benutzerfreundlicher gestalten und Aufwand sparen, indem wir logischer denken und Komponenten wiederverwenden. Für uns ist das alles am sinnvollsten, wenn wir diese Beispiele in praktischen und realen Fällen weiter üben und anwenden, damit wir uns an diese Arbeitsweise gewöhnen können.
Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben
