Arbeide effektivt med mindre tips og verktøy

I vår tidligere opplæring har vi lært hvordan du bruker LESS på praktisk måte ved å bruke programmer som ChrunchApp for å kompilere koden. Denne gangen vil vi gå gjennom noen hendige tips som vil kunne øke ytelsen og produktiviteten når vi samler LESS syntaks. Vi skal sette opp skrivebordet / arbeidsmiljøet ved å aktivere syntaksutheving for vår nåværende editor, ved hjelp av automatiske kompilatorverktøy og bruk forhåndsinnstilte Mixins, og synkroniser dem alle sammen.

Vel, hvis du er klar, la oss komme i gang.

Ansvarsfraskrivelse: De tipsene som er forklart nedenfor, er hentet fra mine daglige erfaringer som webdesigner. Så, før vi går gjennom det videre, vil jeg skissere at tipsene kan passe til noen designere og ikke andre; akkurat som alle andre tips du finner på nettet. Likevel håper jeg at du kan høste noe nyttig fra følgende tips.

1. Code Highlighter

Som vi nevnte før, har vi introdusert deg til ChrunchApp. Denne appen kan imidlertid ikke være hver webdesigners preferanse; fordi hver designer har sitt eget arbeidsmiljø, inkludert kodeditoren etter eget valg.

I stedet for å installere en annen kodeditor, kan du faktisk fortsatt bruke din nåværende og aktivere syntaksuthevingen i den. Så, i dette innlegget, vil jeg dele noen tips for å legge til LESS kode utheving i 2 berømte tekstredaktører: Sublim tekst 2 og Notisblokk++.

Sublim tekst 2

Denne redaktøren er for tiden mitt foretrukne valg for å hjelpe meg å lage koder. Denne appen er tilgjengelig for Windows, Linux og OSX, så hva ditt operativsystem er, vil du fortsatt kunne følge dette tipset.

La oss nå laste den ned fra sitt offisielle nettsted og prøve denne redaktøren. Les deretter følgende instruksjoner for å aktivere MINDRE fargeutheving i den.

Merk: Vennligst vær sikker på at du har lest lisensen før du laster ned, da den gratis versjonen bare er ment for evaluering.

Installer pakkekonsoll

Først åpner du Sublime Text 2, og viser konsollen fra denne menyen Vis> Vis konsoll

Deretter kopier og lim inn følgende kommandolinje i konsollen, og trykk deretter på Enter for å installere pakkekontrollen fra wBond.net:

importere urllib2, os; pf = "Package 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 ())); åpen (os.path.join (ipp, pf), WB) -write (urllib2.urlopen ( 'http://sublime.wbond.net/'+pf.replace (", '% 20')). les ()); skriv ut 'Vennligst start på Sublime Text for å fullføre installasjonen'

Dette Pakke konsoll vil hjelpe oss med å installere høydepunktspakken.

Installere LESS-highlighting Package

Start den sublime teksten 2 på nytt og vis kommandopaletten fra denne menyen Verktøy> Kommandopalett. Vent til pakkelisten er lastet inn. Skriv deretter inn Installer pakken å søke og laste pakkearkiver.

Deretter søker du etter LESS-pakken fra lagerlisten og trykker på Enter.

Vent et øyeblikk for Sublime Text 2 for å laste ned og installere pakken til følgende varsel vises på statuslinjen.

Gå til menyen Vis> Syntaks, Du bør se MINDRE på listen. Det betyr at den Sublime Text 2 støtter .mindre og din MINDRE syntaks bør også ha riktig fargeutheving nå.

Notisblokk++

Notepad ++ er en gratis, åpen kildekoden editor, og har mange nyttige plugins for å utvide sin funksjonalitet. Det er også mye brukt av mange webdesignere / utviklere, spesielt de som jobber med Windows-operativsystemet. Så, jeg bestemmer meg for å også ta med tipset for å legge til LESTE tekstutheving for det.

Installer mindre høydepunkt i Notisblokk++

Aktivering av LESS fargehefte i Notepad ++ er ganske enkelt.

Først last ned LESS pakke for Notisblokk ++ fra denne lenken (userDefineLang_LESS.xml). Deretter går du til Vis> Brukerdefinert dialog.

Følgende popup-boks nedenfor vises. Klikk på Importere… knappen og finn den nedlastede .xml fil. Deretter starter du notisblokken på nytt++.

Åpne din .frie fil og gå til Språkmenyen. Du bør nå se LESS inkludert. Velg den for å bruke fargeutheving på LESS syntaks.

Flere ressurser

Det er mange andre redaktører på markedet. Så, her inkluderer vi noen nyttige lenker til deg hvis du ikke bruker noen av de ovennevnte redaktørene.

Adobe DreamWeaver

Utvilsomt har Dreamweaver en stor brukerbasen. Den er tilgjengelig for både Mac og Windows. Så, hvis du bruker denne redigeringen, er dette en god kilde for å installere LESS høydepunkt i Adobe DreamWeaver.

Coda

Hvis du bruker Mac, vet du sannsynligvis Coda, denne redaktøren er en av de mest populære blant Mac-brukere. Og her er hvordan du kan installere mindre i Coda.

Geany

Det er en av de mest populære kodeditorene blant Linux-brukere. Noen datamaskiner på kontoret mitt som kjører på Linux, bruker også Geany. Så, hvis du bruker det også, kan du inkludere LESTE høydepunkt ved å følge denne instruksjonen på SuperUser.com

2. MINDRE kompilator

I motsetning til ChrunchApp som har en innebygd LESS compiler, vil de andre redaktørene ikke ha det som standard. Selv om det er noen måter å inkludere det på, men det er ganske teknisk for generelle brukere. Så den beste løsningen jeg har, er å gjøre kompileringen ved hjelp av følgende verktøy: winless eller LESS.app. WinLESS er en kompiler designet for Windows, mens LESS.app er bygget for OSX.

Disse verktøyene kan konvertere vår LESS kode til en statisk CSS automatisk som vi lagrer filen og rapporterer direkte hvis det oppstår en feil i koden. Vel, la meg vise deg hvor håndfull dette verktøyet er:

Først vil jeg laste ned WinLESS og installere den.

Klikk på Legg til mappeknapp og finn katalogen der du legger inn .mindre filer (jeg antar at du allerede har opprettet minst en). Når du legger til en; WinLESS vil skanne og finne alt .mindre filer og vise deg på listen.

Gå til menyen Fil> Innstilling, og kontroller at disse alternativene er merket;

• Kompilere filer automatisk når de er lagret
• Vis melding på vellykket kompilere

Vi kan også angi utdatamappen, hvis vi vil lagre det andre steder. Men i dette eksemplet vil vi forlate dette alternativet som det er; som betyr at utdatafilen vil bli lagret i samme katalog som .mindre fil.

Åpne din .mindre fil fra den lagt katalogen, gjør noen endringer og lagre den.

WinLESS vil varsle deg når filen har blitt kompilert til .css eller om det oppstår en feil i kodene. På denne måten kan du sjekke .css-utgangen direkte, i stedet for å vente på kodene for å fullføre for å kompilere det.

Hvis du bruker Mac, kan du bruke LESS.app som har samme funksjonalitet som WinLESS.

Forhåndsinnstilte Mixins

I dagens moderne webdesign praksis vil vi bruke CSS3 egenskaper som Gradient, Shadow eller Border Radius som ser slik ut:

-webkit-grense-radius: 3px; -moz-grense-radius: 3px; border-radius: 3px;

eller

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

I vår tidligere opplæring har vi laget noen Mixins for å forenkle denne syntaksen. Heldigvis er noen mennesker i webdesign samfunnet veldig raske nok til å spare tid for å kompilere disse nyttige Mixins, slik at vi ikke trenger å kompilere det selv fra grunnen av.

Og en av mine favoritt er Mindre Elementer som inneholder mange nyttige CSS3 forhåndsinnstilte regler. Dermed skriver vi nå færre kodelinjer fra kjedelige leverandørprefikser.

Ok, nå, la oss se hvordan alle disse tipsene ovenfor egentlig kan hjelpe.

Setter dem alle sammen

I dette eksemplet skal jeg lage en enkel koblingsknapp. Først vil jeg lage et nytt HTML-dokument og sette følgende mark-up:

     Klikk på meg 

Lage en styles.less Som vårt viktigste LESS stilark, lagre det i samme mappe med vårt HTML-dokument og legg til mappen til WinLESS.

Importer elements.less vi har lastet ned før du bruker denne syntaksen:

@import "elements.less";

Nå kan vi bruke noen Mixins fra elements.less som .gradient, .avrundet, og .grenser. Jeg er sikker på at Mixins navn er ganske selvforklarende.

Sett deretter LESS-reglene under, i stilarket ditt. Og lagre det igjen

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

Siden vår .mindre filen er lagt til WinLESS, blir den automatisk samlet inn .css. La oss nå se resultatene.

Vel, det er ikke så ille, er det ikke, med tanke på at denne knappen ble opprettet med færre linjer enn det som var nødvendig. Og her er den faktiske genererte statiske CSS:

 en display: inline-block; polstring: 10px 20px; farge: # 555; tekst-dekorasjon: ingen; bakgrunn: #eeeeee; bakgrunn: -webkit-gradient (lineær, venstre bunn, venstre topp, fargestopp (0, # f0f0f0), fargestopp (1, #ffffff)); bakgrunn: -ms-lineær-gradient (bunn, # f0f0f0 0%, # f0f0f0 100%); bakgrunn: -moz-lineær-gradient (senterbunn, # f0f0f0 0%, #ffffff 100%); -webkit-grense-radius: 2px; -moz-grense-radius: 2px; border-radius: 2px; -moz-bakgrunnsbilder: polstring; -webkit-bakgrunnsbilder: polstring-boks; bakgrunnsbilder: polstring border-top: solid 1px #eeeeee; border-left: solid 1px #eeeeee; border-right: solid 1px #eeeeee; border-bottom: solid 1px #eeeeee;  a: svever bakgrunn: #eeeeee; bakgrunn: -webkit-gradient (lineær, venstre bunn, venstre topp, fargestopp (0, #ffffff), fargestopp (1, # f0f0f0)); bakgrunn: -ms-lineær gradient (bunn, #ffffff 0%, #ffffff 100%); bakgrunn: -moz-lineær gradient (senterbunn, #ffffff 0%, # f0f0f0 100%); 

Oppsummert

Her er et raskt sammendrag av hva vi har diskutert i dette innlegget:

• Ved å aktivere syntax høydepunkt i vår nåværende editor, trenger vi ikke å installere en ekstra editor bare for å komponere MINDRE syntaks; Dette kan spare deg for mellomrom / minne på disken din.
• Vi trenger ikke lenger å laste ned og lenke LESS.js-biblioteket til HTML-seksjonen vår som vi gjorde i vår siste opplæring. På denne måten forbli vårt HTML-dokument rent og pent.
• Bruk av kompilatorverktøy som WinLESS og LESS.app kan generere den statiske CSS-utgangen umiddelbart. Så, hvis det er noe galt med syntaksen, kan vi undersøke det med en gang.
• Forhåndsinnstilte Mixins som MINDRE Elementer er vår beste venn. Det kan virkelig spare vår tid når vi samler kjedelig CSS3 eiendom.

.