Arbejde effektivt med mindre tips og værktøjer

I vores tidligere vejledning har vi lært at bruge LESS på praktisk måde ved at bruge applikationer som ChrunchApp til at kompilere koden. Denne gang vil vi gå igennem nogle nyttige tips, der vil kunne øge vores ydeevne og produktivitet, når vi kompilerer MINDRE syntaks. Vi skal oprette vores desktop / arbejdsmiljø ved at muliggøre syntaksfremhævelse for vores nuværende editor, ved hjælp af automatiske kompileringsværktøjer og udnytte forudindstillede Mixins, og synkroniser dem alle sammen.

Nå, hvis du er klar, lad os komme i gang.

Disclaimer: De tips, der forklares nedenfor, er afledt af mine daglige erfaringer som webdesigner. Så før vi går videre gennem det, vil jeg gerne skitsere, at tipsene måske passer til nogle designere og ikke andre; ligesom alle andre tip du finder på internettet. Ikke desto mindre håber jeg, at du kan høste noget nyttigt ud fra følgende tips.

1. Code Highlighter

Som vi tidligere har nævnt, har vi introduceret dig til ChrunchApp. Denne app er dog muligvis ikke alle webdesigners foretrukne; fordi hver designer har deres eget arbejdsmiljø, herunder kodeditoren efter eget valg.

I stedet for at installere en anden kodeditor, kan du faktisk stadig bruge din nuværende og aktivere syntaxbelysningen i den. Så i dette indlæg vil jeg dele nogle tip til at tilføje LESS kode fremhævende i 2 berømte tekstredaktører: Sublim tekst 2 og notepad++.

Sublim tekst 2

Denne editor er i øjeblikket mit foretrukne valg til at hjælpe mig med at lave koder. Denne app er tilgængelig til Windows, Linux og OSX, så uanset hvad dit OS er, vil du stadig kunne følge dette tip.

Lad os nu downloade den fra sin officielle hjemmeside og prøve denne editor. Læs derefter følgende instruktioner for at aktivere MINDER farvefarve i den.

Bemærk: Sørg for at du har læst licensen før download, da den gratis version kun er beregnet til evaluering.

Installer pakke konsol

Først skal du åbne din sublim tekst 2 og vise konsollen fra denne menu Vis> Vis konsol

Kopier og indsæt derefter følgende kommandolinje i konsollen, og tryk derefter på Enter for at installere pakken kontrol fra wBond.net:

importere urllib2, os; pf = "Pakke Control.sublime-pakke"; ipp = sublime.installed_packages_path (); os.makedirs (ipp) hvis ikke os.path.exists (ipp) else None; urllib2.install_opener (urllib2.build_opener (urllib2.ProxyHandler ())); åben (os.path.join (ipp, pf), 'wb') .write (urllib2.urlopen (http://sublime.wbond.net/'+pf.replace (" '% 20')). læs ()); udskriv 'Venligst genstart Sublim tekst for at afslutte installationen'

Dette Pakke konsol vil hjælpe os med at installere højdepunktspakken.

Installation af mindre fremhævningspakke

Genstart den sublime tekst 2 og vis kommandopaletten fra denne menu Værktøjer> Kommandopaletten. Vent indtil pakkelisten er alle indlæst. Skriv derefter Installer pakke at søge og indlæse pakkebeholdninger.

Søg derefter efter den MINDER pakke fra lagerlisten og tryk på Enter.

Vent et øjeblik for Sublime Text 2 for at downloade og installere pakken, indtil den følgende meddelelse vises på statuslinjen.

Gå til menuen Vis> Syntaks, du bør se mindre på listen. Det betyder, at den sublime tekst 2 understøtter .mindre og din MINDRE syntaks skal også have ordentlig farve fremhævning nu.

notepad++

Notepad ++ er en gratis, open source kode editor, og har mange nyttige plugins for at udvide dets funktionalitet. Det bruges også meget af mange webdesignere / -udviklere, især dem, der arbejder med Windows-operativsystemet. Så jeg beslutter også at inkludere tipet for at tilføje LESTE tekst fremhævende for det.

Installer LESS-højdepunkt i Notesblok++

Aktivering af LESS farvehøjde i Notepad ++ er ret nemt.

Først download LESS pakke til Notepad ++ fra dette link (userDefineLang_LESS.xml). Gå derefter til Vis> Brugerdefineret dialog.

Følgende pop op-boks nedenfor vises. Klik på knappen Importere… knappen og find din downloadede .xml fil. Derefter genstart notisblokken++.

Åbn din .fri fil og gå til sprogmenuen. Du skal nu se LESS inkluderet. Vælg det for at anvende farvefremhævning på din MINDRE syntaks.

Flere ressourcer

Der er mange andre redaktører på markedet. Så her indeholder vi nogle nyttige links til dig, hvis du ikke bruger nogen af de ovennævnte redaktører.

Adobe DreamWeaver

Utvivlsomt har Dreamweaver en enorm brugerbase. Den er tilgængelig til både Mac og Windows. Så hvis du bruger denne editor, er her en god kilde til at installere MINDER højdepunkt i Adobe DreamWeaver.

Coda

Hvis du bruger Mac, ved du sikkert Coda, er denne editor en af de mest populære blandt Mac-brugere. Og her er hvordan du kan installere mindre i Coda.

Geany

Det er en af de mere populære kode redaktører blandt Linux brugere. Nogle computere på mit kontor, der kører på Linux, bruger også Geany. Så hvis du bruger det også, kan du inkludere MINDER fremhævning ved at følge denne vejledning på SuperUser.com

2. mindre kompilator

I modsætning til ChrunchApp, der har en indbygget LESS compiler, vil de andre redaktører ikke have det som standard. Selv om der er nogle måder at inkludere det på, men det er ret teknisk for generelle brugere. Så den bedste løsning jeg har fået er at lave kompileringen ved hjælp af følgende værktøjer: winless eller LESS.app. WinLESS er en compiler designet til Windows, mens LESS.app er bygget til OSX.

Disse værktøjer kan konvertere vores LESS kode til en statisk CSS automatisk, da vi gemmer filen og rapporterer direkte, hvis der er en fejl i koden. Nå, lad mig vise dig, hvordan håndfuldt dette værktøj er:

For det første vil jeg gerne downloade WinLESS og installere det.

Klik på knappen Tilføj mappe og find den mappe, hvor du lægger din .mindre filer (jeg antager, at du allerede har oprettet mindst en). Når du tilføjer en; WinLESS scanner og finder alt .mindre filer og vise dig på listen.

Gå til menuen Fil> Indstilling, og sørg for at disse muligheder er markeret

Kompilér automatisk filer, når de er gemt
Vis besked på en vellykket kompilering

Vi kan også indstille output-mappen, hvis vi ønsker at gemme det andetsteds. Men i dette eksempel forlader vi denne mulighed som den er; hvilket betyder, at outputfilen gemmes i samme mappe som den .mindre fil.

Åben din .mindre fil fra den tilføjede mappe, lav et par ændringer og gem det.

WinLESS meddeler dig, når filen er blevet kompileret korrekt .css eller hvis der er en fejl i koderne. På denne måde kan du tjekke .css-udgangen direkte, i stedet for at vente på koderne for at fuldføre for at kompilere den.

Hvis du bruger Mac, kan du bruge LESS.app, der har samme functinalitet som WinLESS.

Forindstillede Mixins

I nuværende moderne webdesign praksis vil vi bruge CSS3 egenskaber som Gradient, Shadow eller Border Radius, der ser sådan ud:

-webkit-grænse-radius: 3px; -moz-grænse-radius: 3px; grænse-radius: 3px;

eller

baggrund: -moz-lineær gradient (top, # f0f9ff 0%, # a1dbff 100%); baggrund: -webkit-lineær-gradient (top, # f0f9ff 0%, # a1dbff 100%); baggrund: -o-lineær gradient (top, # f0f9ff 0%, # a1dbff 100%); baggrund: -ms-lineær gradient (top, # f0f9ff 0%, # a1dbff 100%); baggrund: lineær gradient (top, # f0f9ff 0%, # a1dbff 100%);

I vores tidligere vejledning har vi lavet nogle Mixins for at forenkle denne syntaks. Heldigvis er nogle mennesker i webdesign-samfundet virkelig generøse nok til at spare deres tid til at kompilere disse nyttige Mixins, så vi ikke behøver at kompilere det selv fra bunden.

Og en af mine foretrukne er Mindre Elementer, der indeholder mange nyttige CSS3 forudindstillede regler. Således skriver vi nu færre linjer kode fra kedelige leverandørpræfikser.

Okay, nu, lad os se, hvordan alle disse tip kan virkelig hjælpe.

Sætte dem alle sammen

I dette eksempel vil jeg oprette en simpel link-knap. Først vil jeg gerne oprette et nyt HTML-dokument og sætte følgende mark-up:

 MINDRE    Klik på mig

Lave en styles.less som vores vigtigste LEST stilark, gem det i samme mappe med vores HTML-dokument og tilføj mappen til WinLESS.

Importer elements.less vi har downloadet, før du bruger denne syntaks:

@import "elements.less";

Nu kan vi bruge enhver Mixins, der leveres fra elements.less som .gradient, .afrundet, og .omkranset. Jeg er sikker på, at Mixins navn er helt selvforklarende.

Herefter skal du sætte de MINDER regler nedenfor i dit stylesheet. Og gem det igen

 en display: inline-block; polstring: 10px 20px; farve: # 555; tekst dekoration: ingen; .bw-gradient (#eee, 240, 255); .rounded; .bordered; &: svinge .bw-gradient (#eee, 255, 240);

Siden vores .mindre filen er blevet tilføjet til WinLESS, vil den automatisk blive kompileret til .css. Lad os nu se resultaterne.

Nå, det er ikke så slemt, det er ikke det, da man mener, at denne knap blev oprettet med færre linjer end hvad der var nødvendigt. Og her er den faktiske genererede statiske CSS:

 en display: inline-block; polstring: 10px 20px; farve: # 555; tekst dekoration: ingen; baggrund: #eeeeee; baggrund: -webkit-gradient (lineær, venstre bund, venstre top, farve stop (0, # f0f0f0), farve stop (1, #ffffff)); baggrund: -ms-lineær gradient (bund, # f0f0f0 0%, # f0f0f0 100%); baggrund: -moz-lineær gradient (center bund, # f0f0f0 0%, #ffffff 100%); -webkit-grænse-radius: 2px; -moz-grænse-radius: 2px; grænse-radius: 2px; -moz-baggrunds-klip: polstring -webkit-baggrundsklip: polstringskasse bagklip: polstring border-top: solid 1px #eeeeee; grænse-venstre: solid 1px #eeeeee; grænse-højre: solid 1px #eeeeee; border-bottom: solid 1px #eeeeee;  a: svever baggrund: #eeeeee; baggrund: -webkit-gradient (lineær, venstre bund, venstre top, farve stop (0, #ffffff), farve stop (1, # f0f0f0)); baggrund: -ms-lineær gradient (bund, #ffffff 0%, #ffffff 100%); baggrund: -moz-lineær gradient (center bund, #ffffff 0%, # f0f0f0 100%);

I Sammenfatning

Her er et hurtigt resumé af, hvad vi har diskuteret i dette indlæg:

Ved at aktivere syntax højdepunkt i vores nuværende editor, behøver vi ikke at installere en ekstra editor kun til at komponere MINDER syntaks; Dette kan spare dig for nogle mellemrum / hukommelse på din disk.
Vi behøver heller ikke længere at downloade og forbinde LESS.js-biblioteket til vores HTML-hovedafsnit, som vi gjorde i vores sidste vejledning. På denne måde forbliver vores HTML-dokument rent og pænt.
Brug af kompilatorværktøjer som WinLESS og LESS.app kan generere den statiske CSS-udgang med det samme. Så, hvis der er noget galt med syntaksen, kan vi undersøge det med det samme.
Forindstillede Mixins som MINDRE Elementer er vores bedste ven. Det kan virkelig spare vores tid, når vi kompilerer kedelig CSS3 ejendom.