Arbeta effektivt med mindre tips och verktyg

I vår tidigare handledning har vi lärt oss hur man använder LESS på praktisk sätt genom att använda applikationer som ChrunchApp för att kompilera koden. Den här gången kommer vi att gå igenom några praktiska tips som kan öka vår prestanda och produktivitet när vi sammanställer mindre syntax. Vi ska ställa in vår skrivbords- / arbetsmiljö genom att möjliggöra syntaxmarkering för vår nuvarande editor, använda automatiska kompilatorverktyg och använda förinställda Mixins och synkronisera dem alltså tillsammans.

Tja, om du är redo, låt oss börja.

Varning: De tips som beskrivs nedan är härledda från mina dagliga erfarenheter som webbdesigner. Så innan vi går vidare genom det vill jag beskriva att tipsen kanske passar några designers och inte andra. Precis som alla andra tips du hittar på webben. Ändå hoppas jag att du kan skörda något användbart från följande tips.

1. Code Highlighter

Som vi nämnde tidigare har vi introducerat dig till ChrunchApp. Men den här appen är kanske inte alla webbdesigners preferenser. eftersom varje formgivare har sin egen arbetsmiljö, inklusive kodredaktören efter eget val.

I stället för att installera en annan kodredigerare kan du faktiskt fortfarande använda din nuvarande och aktivera syntaxmarkeringen i den. Så, i det här inlägget delar jag några tips för att lägga till LESS kod som markerar i 2 kända textredigerare: Sublim Text 2 och Anteckningar++.

Sublim Text 2

Denna redaktör är för närvarande mitt val att hjälpa mig att skapa koder. Den här appen är tillgänglig för Windows, Linux och OSX, så oavsett vad ditt operativsystem är, kommer du fortfarande att kunna följa det här tipset.

Nu laddar vi hämta den från sin officiella hemsida och försök med den här redigeraren. Läs sedan följande instruktioner för att aktivera MINDER färgmarkering i den.

Notera: Se till att du har läst licensen innan du laddar ner den, eftersom den fria versionen endast är avsedd för utvärdering.

Installera paketkonsolen

Öppna först din Sublime Text 2 och visa konsolen från den här menyn Visa> Visa konsol

Kopiera och klistra sedan in följande kommandorad i konsolen och tryck sedan på Enter för att installera paketkontrollen från wBond.net:

importera urllib2, os; pf = "Package Control.sublime-paket"; ipp = sublime.installed_packages_path (); os.makedirs (ipp) om inte os.path.exists (ipp) annars None; urllib2.install_opener (urllib2.build_opener (urllib2.ProxyHandler ())); öppna (os.path.join (ipp, pf), 'wb') .write (urllib2.urlopen ( 'http://sublime.wbond.net/'+pf.replace (", '% 20')). läs ()); skriv ut 'Vänligen starta om Sublim Text för att slutföra installationen'

Detta Paketkonsol hjälper oss att installera höjdpaketet.

Installera LESS-highlighting Package

Starta om den sublima texten 2 och visa kommandopaletten från den här menyn Verktyg> Kommandotolett. Vänta tills paketlistan har laddats. Skriv sedan Installera paketet att söka och ladda paketförråd.

Sök sedan efter det LÄSER paketet från förrådslistan och tryck på Enter.

Vänta en minut för Sublime Text 2 för att ladda ner och installera paketet tills följande meddelande visas på statusfältet.

Gå till menyn Visa> Syntax, Du borde se MINDRE på listan. Det betyder att den Sublime Text 2 stöder .mindre och din MINDRE syntax bör också ha rätt färgmarkering nu.

Anteckningar++

Notepad ++ är en fri, öppen källkod editor och har många användbara plugins för att utöka sin funktionalitet. Det används också ofta av många webbdesigners / utvecklare, särskilt de som arbetar med Windows-operativsystemet. Så, jag bestämmer mig för att även inkludera tipset för att lägga till LÄST texthöjd för den.

Installera LESS-highlight i Anteckningar++

Att aktivera LESS färghöjd i Notepad ++ är ganska lätt.

Först ladda ner LÄST paket för Notepad ++ från den här länken (userDefineLang_LESS.xml). Gå sedan till Visa> Användardefinierad dialog.

Följande popupfönster nedan kommer att visas. Klicka på Importera… knappen och hitta din nedladdade .xml fil. Starta sedan anteckningsblocket igen++.

Öppna din .lösa fil och gå till Språkmenyn. Du bör nu se LÄSER ingår. Markera den för att tillämpa färgmarkering på din MINDRE syntax.

Fler resurser

Det finns många andra redaktörer på marknaden. Så här innehåller vi några användbara länkar till dig om du inte använder någon av ovanstående redaktörer.

Adobe DreamWeaver

Utan tvekan har Dreamweaver en enorm användarbas. Den är tillgänglig för både Mac och Windows. Så, om du använder den här redigeraren, är här en bra källa för att installera LÄSER höjdpunkt i Adobe DreamWeaver.

coda

Om du använder Mac vet du förmodligen Coda, den här redaktören är en av de mest populära bland Mac-användare. Och här är hur du kan installera mindre i Coda.

Geany

Det är en av de mer populära kodredigerarna bland Linux-användare. Vissa datorer på mitt kontor som körs på Linux använder också Geany. Så, om du använder det också, kan du inkludera LÄSER höjdpunkt genom att följa denna instruktion på SuperUser.com

2. MINDERA COMPILER

Till skillnad från ChrunchApp som har en inbyggd MINDER kompilator, kommer de andra redigerarna inte ha den som standard. Även om det finns några sätt att inkludera det, men det är ganska tekniskt för allmänna användare. Så den bästa lösningen jag har är att göra sammanställningen med hjälp av följande verktyg: winless eller LESS.app. WinLESS är en kompilator avsedd för Windows, medan LESS.app är byggt för OSX.

Dessa verktyg kan konvertera vår LESS-kod till en statisk CSS automatiskt när vi sparar filen och rapporterar direkt om det finns ett fel i koden. Tja, låt mig visa dig hur handfull det här verktyget är:

Först vill jag ladda ner WinLESS och installera den.

Klicka på knappen Lägg till mapp och hitta katalogen där du lägger din .mindre filer (jag antar att du redan har skapat minst en). När du lägger till en; WinLESS kommer att skanna och hitta allt .mindre filer och visa dig på listan.

Gå till menyn Arkiv> Inställning, och se till att dessa alternativ är kontrollerade

• Kompilera automatiskt filer när de sparas
• Visa meddelande om framgångsrik kompilering

Vi kan också ställa in utmatningsmappen, om vi vill spara det på annat håll. Men i det här exemplet kommer vi att lämna detta alternativ som det är; vilket betyder att utdatafilen sparas i samma katalog som .mindre fil.

Öppna din .mindre filen från den tillagda katalogen, gör några ändringar och spara den.

WinLESS meddelar dig när filen har blivit kompilerad till .css eller om det finns ett fel i koderna. På så sätt kan du kontrollera .css-utmatningen direkt, snarare än att behöva vänta på att koderna ska slutföra för att kompilera det.

Om du använder Mac kan du använda LESS.app som har samma funktionalitet som WinLESS.

Förinställda Mixins

I nuvarande moderna webbdesigner använder vi CSS3 egenskaper som Gradient, Shadow eller Border Radius som ser ut så här:

-webbkit-gräns-radie: 3px; -moz-gränsen-radien: 3px; gränsstråle: 3px;

eller

bakgrund: -moz-linjär gradient (topp, # f0f9ff 0%, # a1dbff 100%); bakgrund: -webkit-linjär-gradient (topp, # f0f9ff 0%, # a1dbff 100%); bakgrund: -o-linjär gradient (topp, # f0f9ff 0%, # a1dbff 100%); bakgrund: -ms-linjär gradient (topp, # f0f9ff 0%, # a1dbff 100%); bakgrund: linjär gradient (topp, # f0f9ff 0%, # a1dbff 100%);

I vår tidigare handledning har vi gjort några Mixins för att förenkla denna syntax. Lyckligtvis är vissa människor i webbdesignsgemenskapen verkligen generösa nog att spara tid för att kompilera dessa användbara Mixins, så att vi inte behöver sammanställa det själva från början.

Och en av mina favoriter är mindre element som innehåller många användbara CSS3 förinställda regler. Således skriver vi nu färre linjer kod från tråkiga leverantörs prefix.

Okej, nu, låt oss se hur alla dessa tips ovan verkligen kan hjälpa till.

Att sätta dem alla tillsammans

I det här exemplet ska jag skapa en enkel länkknapp. Först vill jag skapa ett nytt HTML-dokument och lägga följande mark-up:

     Klicka här 

Skapa en styles.less som vårt huvudsakliga LESS stilark, spara det i samma mapp med vårt HTML-dokument och lägg till mappen till WinLESS.

Importera elements.less vi har laddat ner innan du använder den här syntaxen:

@import "elements.less";

Nu kan vi använda alla Mixins som tillhandahålls från elements.less som .lutning, .avrundad, och .kantad. Jag är säker på att Mixins namn är ganska självförklarande.

Därefter sätter du LÄSRE reglerna nedan, i ditt stilark. Och spara det än en gång

 en display: inline-block; vaddering: 10px 20px; färg: # 555; text-dekoration: ingen; .bw-gradient (#eee, 240, 255); .avrundad; .kantad; &: sväva .bw-gradient (#eee, 255, 240);  

Sedan vår .mindre filen har lagts till WinLESS, kommer den automatiskt att kompileras till .css. Nu får vi se resultaten.

Jo det är inte så dåligt är det inte, med tanke på att den här knappen skapades med färre linjer än vad som behövdes. Och här är den faktiska genererade statiska CSS:

 en display: inline-block; vaddering: 10px 20px; färg: # 555; text-dekoration: ingen; bakgrund: #eeeeee; bakgrund: -webkit-gradient (linjär, vänster botten, vänster topp, färgstopp (0, # f0f0f0), färgstopp (1, #ffffff)); bakgrund: -ms-linjär-gradient (botten, # f0f0f0 0%, # f0f0f0 100%); bakgrund: -moz-linjär-gradient (centrum botten, # f0f0f0 0%, #ffffff 100%); -webkit-gränsen-radien: 2px; -moz-gränsen-radien: 2px; gränsstråle: 2px; -moz-bakgrundsblock: vadderar; -webkit-bakgrundsblock: vadderar-box; bakgrundsblock: vadderar-box; border-top: solid 1px #eeeeee; gräns vänster: fast 1px #eeeeee; border-right: solid 1px #eeeeee; border-bottom: solid 1px #eeeeee;  a: svever bakgrund: #eeeeee; bakgrund: -webkit-gradient (linjär, vänster botten, vänster topp, färgstopp (0, #ffffff), färgstopp (1, # f0f0f0)); bakgrund: -ms-linjär gradient (botten, #ffffff 0%, #ffffff 100%); bakgrund: -moz-linjär gradient (centrum botten, #ffffff 0%, # f0f0f0 100%); 

Sammanfattningsvis

Här är en snabb sammanfattning av vad vi har diskuterat i det här inlägget:

• Genom att möjliggöra syntaxhöjning i vår nuvarande editor behöver vi inte bara installera en extra editor för att komponera MINDRE syntaxer. Detta kan spara några mellanslag / minne på din skiva.
• Vi behöver inte längre ladda ner och länka LESS.js-biblioteket till vår HTML-huvudsektion som vi gjorde i vår senaste handledning. På så sätt är vårt HTML-dokument rent och snyggt.
• Använda kompilatorverktyg som WinLESS och LESS.app kan generera den statiska CSS-utgången direkt. Så, om det finns något som är fel med syntaxen, kan vi undersöka det direkt.
• Förinställda Mixins som LESS Elements är vår bästa vän. Det kan verkligen spara vår tid när vi sammanställer krånglig CSS3-egenskap.

.