Effizientes Arbeiten mit weniger Tipps und Tools

In unserem vorherigen Tutorial haben wir gelernt, wie Sie LESS auf praktische Weise einsetzen, indem Sie Anwendungen wie ChrunchApp verwenden, um den Code zu kompilieren. Dieses Mal werden wir einige nützliche Tipps durchgehen, die unsere Leistung und Produktivität beim Erstellen von LESS-Syntax steigern können. Wir werden unsere Desktop- / Arbeitsumgebung einrichten, indem wir die Syntaxhervorhebung für unseren aktuellen Editor aktivieren, automatische Compiler-Tools und voreingestellte Mixins verwenden und sie dann alle miteinander synchronisieren.

Wenn du bereit bist, lass uns anfangen.

Haftungsausschluss: Die unten erläuterten Tipps beziehen sich auf meine täglichen Erfahrungen als Webdesigner. Bevor wir weiter darauf eingehen, möchte ich kurz darlegen, dass die Tipps für einige Designer und nicht für andere geeignet sind. wie jeder andere Tipp, den Sie im Web finden. Trotzdem hoffe ich, dass Sie mit den folgenden Tipps etwas Nützliches gewinnen können.

1. Code-Textmarker

Wie bereits erwähnt, haben wir Sie mit ChrunchApp bekannt gemacht. Diese App ist jedoch möglicherweise nicht die Präferenz jedes Webdesigners. weil jeder Designer seine eigene Arbeitsumgebung hat, einschließlich des Code-Editors seiner Wahl.

Anstatt einen anderen Code-Editor zu installieren, können Sie Ihren aktuellen Editor weiterhin verwenden und die Syntax-Hervorhebung aktivieren. In diesem Beitrag werde ich ein paar Tipps zum Hinzufügen von weniger Code-Hervorhebung in 2 bekannte Texteditoren geben: Erhabener Text 2 und Notizblock++.

Erhabener Text 2

Dieser Editor ist derzeit meine bevorzugte Wahl, um mir beim Verfassen von Codes zu helfen. Diese App ist für Windows, Linux und OSX verfügbar. Unabhängig von Ihrem Betriebssystem können Sie diesem Tipp auch folgen.

Laden wir es jetzt von der offiziellen Website herunter und versuchen Sie es mit diesem Editor. Lesen Sie dann die folgenden Anweisungen, um die farblich hervorgehobene Farbe zu aktivieren.

Hinweis: Bitte stellen Sie sicher, dass Sie die Lizenz vor dem Download gelesen haben, da die kostenlose Version nur zur Evaluierung vorgesehen ist.

Installieren Sie Package Console

Öffnen Sie zunächst Ihren Sublime Text 2 und zeigen Sie die Konsole über dieses Menü an Ansicht> Konsole anzeigen

Kopieren Sie dann die folgende Befehlszeile, fügen Sie sie in die Konsole ein und drücken Sie die Eingabetaste, um die Paketsteuerung von wBond.net zu installieren:

import urllib2, os; pf = "Package Control.sublime-package"; ipp = sublime.installed_packages_path (); os.makedirs (ipp) falls nicht os.path.exists (ipp), sonst keine; urllib2.install_opener (urllib2.build_opener (urllib2.ProxyHandler ())); open (os.path.join (ipp, pf), 'wb') .write (urllib2.urlopen ('http://sublime.wbond.net/'+pf.replace (",'% 20 ')). read ()); print 'Bitte starten Sie Sublime Text neu, um die Installation abzuschließen'

Diese Paketkonsole hilft uns, das Highlight-Paket zu installieren.

LESS-Highlighting Package installieren

Starten Sie Sublime Text 2 neu und zeigen Sie die Befehlspalette aus diesem Menü Extras> Befehlspalette. Warten Sie, bis die Paketliste vollständig geladen ist. Dann tippen Sie Installationspaket Paket-Repositories suchen und laden.

Suchen Sie dann in der Repository-Liste nach dem LESS-Paket und drücken Sie die Eingabetaste.

Warten Sie eine Minute, bis Sublime Text 2 das Paket heruntergeladen und installiert hat, bis die folgende Benachrichtigung in der Statusleiste angezeigt wird.

Gehe zum Menü Ansicht> Syntax, Sie sollten WENIGER auf der Liste sehen. Dies bedeutet, dass der Sublime Text 2 unterstützt .Weniger und Ihre LESS-Syntax sollte jetzt auch farblich hervorgehoben werden.

Notizblock++

Notepad ++ ist ein kostenloser Open Source-Code-Editor, der viele nützliche Plugins zur Erweiterung seiner Funktionalität enthält. Es wird auch von vielen Webdesignern / Entwicklern verwendet, insbesondere von Benutzern, die mit dem Windows-Betriebssystem arbeiten. Daher entscheide ich mich, auch den Tipp hinzuzufügen, um weniger Text hervorzuheben.

Installieren Sie LESS-Highlight im Editor++

Das Aktivieren der WENIGER Farbhervorhebung in Notepad ++ ist recht einfach.

Laden Sie zunächst das LESS-Paket für Notepad ++ von diesem Link (userDefineLang_LESS.xml) herunter. Dann geh zu Ansicht> Benutzerdefinierter Dialog.

Das folgende Popup-Fenster wird angezeigt. Drücke den Einführen… und finden Sie Ihre heruntergeladenen .xml Datei. Starten Sie dann den Editor neu++.

Öffnen Sie Ihre .less-Datei und rufen Sie das Sprachmenü auf. Sie sollten jetzt weniger enthalten sehen. Wählen Sie diese Option aus, um die farbliche Hervorhebung Ihrer LESS-Syntax anzuwenden.

Mehr Ressourcen

Es gibt viele andere Editoren auf dem Markt. Hier finden Sie einige nützliche Links für Sie, wenn Sie keinen der oben genannten Editoren verwenden.

Adobe DreamWeaver

Zweifellos verfügt Dreamweaver über eine große Benutzerbasis. Es ist sowohl für Mac als auch für Windows verfügbar. Wenn Sie diesen Editor verwenden, ist dies eine gute Quelle für die Installation von LESS Highlight in Adobe DreamWeaver.

Koda

Wenn Sie einen Mac verwenden, kennen Sie wahrscheinlich Coda. Dieser Editor ist einer der beliebtesten Mac-Benutzer. Und so können Sie LESS in Coda installieren.

Geany

Es ist einer der beliebtesten Code-Editoren unter Linux-Benutzern. Einige Computer in meinem Büro, die unter Linux laufen, verwenden auch Geany. Wenn Sie es ebenfalls verwenden, können Sie LESS-Highlight hinzufügen, indem Sie dieser Anleitung auf SuperUser.com folgen

2. WENIGER Compiler

Im Gegensatz zur ChrunchApp, die über einen integrierten LESS-Compiler verfügt, haben die anderen Editoren dies standardmäßig nicht. Es gibt zwar einige Möglichkeiten, es einzubeziehen, ist aber für allgemeine Benutzer eher technisch. Die beste Lösung, die ich habe, ist das Kompilieren mit den folgenden Tools: WinLESS oder LESS.app. WinLESS ist ein für Windows entwickelter Compiler, während LESS.app für OSX entwickelt wurde.

Diese Tools können unseren LESS-Code automatisch in ein statisches CSS konvertieren, wenn wir die Datei speichern und direkt berichten, wenn ein Fehler im Code vorliegt. Nun, ich zeige Ihnen, wie sehr dieses Werkzeug ist:

Zunächst möchte ich WinLESS herunterladen und installieren.

Klicken Sie auf die Schaltfläche Ordner hinzufügen und suchen Sie das Verzeichnis, in das Sie Ihr Verzeichnis ablegen .Weniger Dateien (ich nehme an, Sie haben bereits mindestens eine erstellt). Sobald Sie eins hinzufügen; WinLESS scannt und findet alles .Weniger Dateien und zeigen Sie auf der Liste.

Gehe zum Menü Datei> Einstellung, und stellen Sie sicher, dass diese Optionen aktiviert sind.

• Dateien beim Speichern automatisch kompilieren
• Nachricht beim erfolgreichen Kompilieren anzeigen

Wir können auch den Ausgabeordner festlegen, falls er an anderer Stelle gespeichert werden soll. In diesem Beispiel lassen wir diese Option jedoch unverändert. Dies bedeutet, dass die Ausgabedatei im selben Verzeichnis wie das gespeichert wird .Weniger Datei.

Öffne dein .Weniger Datei aus dem hinzugefügten Verzeichnis, nehmen Sie einige Änderungen vor und speichern Sie sie.

WinLESS informiert Sie, wenn die Datei erfolgreich kompiliert wurde .css oder wenn ein Fehler in den Codes vorliegt. Auf diese Weise können Sie die .css-Ausgabe direkt überprüfen, anstatt auf die Fertigstellung der Codes warten zu müssen.

Wenn Sie einen Mac verwenden, können Sie LESS.app verwenden, das dieselbe Funktionalität wie WinLESS hat.

Preset Mixins

In aktuellen modernen Webdesign-Praktiken verwenden wir CSS3-Eigenschaften wie Verlauf, Schatten oder Rahmenradius, die folgendermaßen aussehen:

-Webkit-Grenzradius: 3px; -moz-border-radius: 3px; Grenzradius: 3px;

oder

Hintergrund: -moz-linearer Gradient (oben, # f0f9ff 0%, # a1dbff 100%); Hintergrund: -webkit-linearer Gradient (oben, # f0f9ff 0%, # a1dbff 100%); Hintergrund: -o-linearer Gradient (oben, # f0f9ff 0%, # a1dbff 100%); Hintergrund: -ms-linearer Gradient (oben, # f0f9ff 0%, # a1dbff 100%); Hintergrund: linearer Gradient (oben, # f0f9ff 0%, # a1dbff 100%);

In unserem vorherigen Tutorial haben wir einige Mixins erstellt, um diese Syntax zu vereinfachen. Glücklicherweise sind einige Leute in der Webdesign-Community wirklich großzügig genug, um sich die Zeit zu nehmen, um diese nützlichen Mixins zusammenzustellen, sodass wir sie nicht selbst von Grund auf neu zusammenstellen müssen.

Einer meiner Favoriten ist Less Elements, der viele nützliche CSS3-Vorgaberegeln enthält. Daher schreiben wir jetzt weniger Codezeilen aus langwierigen Herstellerpräfixen.

Nun gut, jetzt sehen wir, wie all diese Tipps wirklich helfen können.

Sie alle zusammenbringen

In diesem Beispiel werde ich eine einfache Link-Schaltfläche erstellen. Zunächst möchte ich ein neues HTML-Dokument erstellen und folgende Markierung hinzufügen:

     Klick mich 

Ein ... kreieren styles.less Speichern Sie es als unser LESS-Stylesheet im selben Ordner wie unser HTML-Dokument und fügen Sie den Ordner zu WinLESS hinzu.

Importieren Sie die Elemente Wir haben vorher diese Syntax heruntergeladen:

@import "elements.less";

Jetzt können wir beliebige Mixins verwenden, die von elements.less gerne bereitgestellt werden .Gradient, .gerundet, und .begrenzt. Ich bin sicher, der Name Mixins ist ziemlich selbsterklärend.

Als nächstes fügen Sie die LESS-Regeln unten in Ihr Stylesheet ein. Und noch einmal speichern

 ein display: Inline-Block; Polsterung: 10px 20px; Farbe: # 555; Textdekoration: keine; .bw-Gradient (#eee, 240, 255); .gerundet; .grenzen; &: hover .bw-gradient (#eee, 255, 240);  

Seit unserem .Weniger Datei wurde zu WinLESS hinzugefügt, es wird automatisch kompiliert .css. Nun wollen wir die Ergebnisse sehen.

Nun, es ist nicht so schlimm, nicht wahr, wenn man bedenkt, dass diese Schaltfläche mit weniger Zeilen erstellt wurde als benötigt wurde. Und hier ist das tatsächlich generierte statische CSS:

 ein display: Inline-Block; Polsterung: 10px 20px; Farbe: # 555; Textdekoration: keine; Hintergrund: #eeeeee; Hintergrund: -webkit-gradient (linear, links unten, links oben, Farbstopp (0, # f0f0f0), Farbstopp (1, #ffffff)); Hintergrund: -ms-linearer Gradient (unten, # f0f0f0 0%, # f0f0f0 100%); Hintergrund: -moz-linearer Gradient (Mitte unten, # f0f0f0 0%, #ffffff 100%); -webkit-border-radius: 2px; -moz-border-radius: 2px; Grenzradius: 2px; -moz-background-clip: Auffüllen; -webkit-background-clip: padding-box; Hintergrund-Clip: Padding-Box; Border-Top: fest 1px #eeeeee; Rahmen links: fest 1px #eeeeee; Rahmen rechts: fest 1px #eeeeee; Rand unten: fest 1px #eeeeee;  a: hover Hintergrund: #eeeeee; Hintergrund: -webkit-gradient (linear, links unten, links oben, Farbstopp (0, #ffffff), Farbstopp (1, # f0f0f0)); Hintergrund: -ms-linearer Gradient (unten, #ffffff 0%, #ffffff 100%); Hintergrund: -moz-linearer Gradient (Mitte unten, #ffffff 0%, # f0f0f0 100%); 

In Summe

Hier ist eine kurze Zusammenfassung dessen, was wir in diesem Beitrag besprochen haben:

• Durch das Aktivieren der Syntaxhervorhebung in unserem aktuellen Editor müssen wir keinen zusätzlichen Editor nur zum Erstellen von LESS-Syntax installieren. Dadurch können Sie Speicherplatz auf Ihrer Festplatte sparen.
• Wir müssen die LESS.js-Bibliothek nicht mehr wie in unserem letzten Tutorial in unseren HTML-Head-Bereich herunterladen und verlinken. Auf diese Weise bleibt unser HTML-Dokument sauber und ordentlich.
• Mithilfe von Compiler-Tools wie WinLESS und LESS.app kann die statische CSS-Ausgabe sofort generiert werden. Wenn also mit der Syntax etwas nicht stimmt, können wir sie sofort untersuchen.
• Preset Mixins wie LESS Elements sind unser bester Freund. Es kann wirklich Zeit sparen, wenn langweilige CSS3-Eigenschaften erstellt werden.

.