Wie man altes CSS in weniger konvertiert
In unseren vorherigen Beiträgen haben wir viele der Grundlagen für LESS behandelt. Wenn Sie unsere LESS - Serie verfolgt haben, glauben wir, dass Sie an diesem Punkt bereits eine gute Vorstellung davon haben, wie Sie die Variablen, Mixins und Operation in weniger.
Wir haben auch erwähnt, wie man LESS in normales CSS, mit einer App oder mit einem Compiler konvertiert. Aber wie machen wir das Gegenteil? CSS in LESS umwandeln? Nun, dieser Tipp ist für Sie.
Werkzeug verwenden
Mit zunehmender Popularität von CSS-Präprozessor, Einige neue Tools und Apps, die das Leben eines Webdesigners oder Entwicklers erleichtern sollen, wie dieses Tool: CSS2Less.
Mit diesem Tool können wir reguläres CSS in LESS konvertieren. Also, versuchen wir es mal. Ich habe die folgenden CSS-Regeln aus meiner alten Datei, die konvertiert werden sollen.
nav Höhe: 40px; Breite: 100%; Hintergrund: # 000; Rahmen unten: 2px fest #fff; nav ul padding: 0; Marge: 0 auto; nav li Anzeige: Inline; Schwimmer: links; nav a color: #fff; Anzeige: Inline-Block; Breite: 100px; Text-Schatten: 1px 1px 0px # 000; nav li a border-right: 1px fest #fff; Box-Dimensionierung: Border-Box; nav li: letztes Kind a border-right: 0; nav a: hover, nav a: active Hintergrundfarbe: #fff;
Hier ist das Ergebnis.
nav a: hover, nav a: aktiv Hintergrundfarbe: #fff; nav height: 40px; Breite: 100%; Hintergrund: # 000; Rahmen unten: 2px fest #fff; a color: #fff; Anzeige: Inline-Block; Breite: 100px; Text-Schatten: 1px 1px 0px # 000; ul padding: 0; Marge: 0 auto; li: last-child a border-right: 0; li display: inline; Schwimmer: links; a border-right: 1px solid #fff; Box-Dimensionierung: Border-Box;
Wie wir oben sehen können, ist unser altes CSS nun wie in LESS verschachtelt.
Verjährung
Wir können jedoch auch einige Einschränkungen in den Ergebnissen der Konvertierung feststellen. In der alten CSS haben wir mehrere gleiche Farben, wie in diesen beiden Deklarationen Rahmen unten: 2px fest #fff; und Rahmen rechts: 1px fest #fff; Wir haben beide Grenzen in Weiß. In LESS können wir diesen konstanten Wert tatsächlich in a speichern Variable.
Es verschachtelt und trennt auch nicht Pseudo-* mit einem Et-Zeichen (&), wie in den folgenden Regeln li: letztes Kind und nav a: schweben, nav a: aktiv. Sie bleiben einfach so wie sie sind, wo wir die Regelsätze auf diese Weise tatsächlich vereinfachen können.
li &: first-child a &: hover &: active
Fazit
Trotz der Einschränkungen, die es derzeit noch gibt, kann dieses Tool sehr hilfreich sein, um Zeit für das Schachteln von CSS-Regelsätzen zu sparen. Wir müssen nur den Rest manuell erledigen. möglicherweise bis zu den oben genannten Einschränkungen aufgelöst.
