Tehokas työskentely LESS-vinkkien ja työkalujen kanssa

Edellisessä opetusohjelmassamme olemme oppineet käyttämään LESSiä käytännössä käyttämällä ChrunchAppin kaltaisia ​​sovelluksia koodin kääntämiseksi. Tällä kertaa käymme läpi joitakin käteviä vinkkejä, joiden avulla voimme parantaa suorituskykyä ja tuottavuutta LESS-syntaksia laadittaessa. Aiomme perustaa työpöydän / työympäristön mahdollistamalla nykyisen editorin syntaksin korostuksen käyttämällä automaattisia kääntäjän työkaluja ja käyttämällä esiasetettuja sekoittimia ja synkronoimalla ne kaikki yhdessä.

No, jos olet valmis, aloitetaan.

Vastuuvapauslauseke: Jäljempänä esitetyt vinkit ovat peräisin päivittäisistä kokemuksistani web-suunnittelijana. Joten, ennen kuin käymme sen läpi, haluan hahmotella, että vinkit saattavat sopia joillekin suunnittelijoille eikä muille; aivan kuten mikä tahansa muu kärki, jonka löydät Webistä. Toivon kuitenkin, että voit saada jotain hyödyllistä seuraavista vinkeistä.

1. Koodin korostus

Kuten aiemmin mainitsimme, olemme esittäneet sinulle ChrunchAppin. Tämä sovellus ei välttämättä ole jokaisen web-suunnittelijan suositus; koska jokaisella suunnittelijalla on oma työympäristö, mukaan lukien valitsemansa koodieditori.

Sen sijaan, että asennat toisen koodieditorin, voit itse käyttää edelleen nykyistä ja sallia sen syntaksin korostamisen. Joten tässä viestissä jaan joitakin vinkkejä LESS-koodin lisäämiseen kahteen kuuluisaan tekstieditoriin: Sublime Text 2 ja Muistilehtiö++.

Sublime Text 2

Tämä editori on tällä hetkellä suosituin vaihtoehto auttaa minua laatimaan koodit. Tämä sovellus on saatavana Windowsille, Linuxille ja OSX: lle, joten mikä tahansa käyttöjärjestelmäsi on, voit silti seurata tätä vinkkiä.

Nyt ladataan se viralliselta verkkosivustolta ja kokeile tätä editoria. Lue sitten seuraavat ohjeet, jotta LESS-värit korostuvat siinä.

Huomautus: Varmista, että olet lukenut käyttöoikeuden ennen lataamista, koska ilmainen versio on tarkoitettu vain arviointia varten.

Asenna pakettikonsoli

Avaa ensin Sublime-teksti 2 ja näytä konsoli tässä valikossa Näytä> Näytä konsoli

Kopioi ja liitä sitten seuraava komentorivi konsoliin ja asenna pakettien hallinta osoitteesta wBond.net painamalla Enter.

tuoda urllib2, os; pf = "Package Control.sublime-package"; ipp = sublime.installed_packages_path (); os.makedirs (ipp) jos ei os.path.exists (ipp) other Ei mitään; urllib2.install_opener (urllib2.build_opener (urllib2.ProxyHandler ())); avoin (os.path.join (IPP, l), 'WB') .write (urllib2.urlopen ( "http://sublime.wbond.net/'+pf.replace (" '% 20')). lue ()), tulosta 'Käynnistä Sublime-teksti uudelleen asennuksen lopettamiseksi'

Tämä Pakettikonsoli auttaa meitä asentamaan korostuspaketin.

LESS-korostuspaketin asentaminen

Käynnistä Sublime Text 2 uudelleen ja näytä tässä valikossa komentopaletti Työkalut> Komentopaletti. Odota, kunnes pakettiluettelo on ladattu. Kirjoita sitten Asenna paketti etsiä ja ladata pakettivarastoja.

Etsi sitten LESS-paketti arkistoluettelosta ja paina Enter.

Odota hetki Sublime Text 2: n lataamiseksi ja asentamiseksi, kunnes seuraava ilmoitus tulee näkyviin tilariville.

Siirry valikkoon Näytä> Syntaksi, sinun pitäisi nähdä LESS luettelossa. Se tarkoittaa, että Sublime Text 2 tukee .Vähemmän ja LESS-syntaksin pitäisi myös olla oikea värin korostus nyt.

Muistilehtiö++

Notepad ++ on ilmainen, avoimen lähdekoodin editori, ja sillä on monia hyödyllisiä laajennuksia laajentaa sen toimivuutta. Sitä käyttävät myös monet web-suunnittelijat / kehittäjät, erityisesti ne, jotka työskentelevät Windows-käyttöjärjestelmän kanssa. Niinpä päätän myös lisätä kärjen lisäämällä LESS-tekstiä korostamaan sitä.

Asenna LESS-korostus Muistioon++

LESS-värin korostaminen Notepad ++: ssa on melko helppoa.

Lataa ensin LESS-paketti Notepad ++: lle tästä linkistä (userDefineLang_LESS.xml). Sitten, Mene Näytä> Käyttäjän määrittämä vuoropuhelu.

Seuraava ponnahdusikkuna tulee näkyviin. Klikkaa Tuonti… -painike ja etsi ladattu .xml tiedosto. Käynnistä sitten Muistio uudelleen++.

Avaa .less-tiedosto ja siirry kielivalikkoon. Sinun pitäisi nyt nähdä LESS mukana. Valitse se, jos haluat käyttää värin korostusta LESS-syntaksissa.

Lisää resursseja

Markkinoilla on monia muita toimittajia. Joten tässä on joitakin hyödyllisiä linkkejä, jos et käytä mitään edellä mainituista toimittajista.

Adobe DreamWeaver

Epäilemättä Dreamweaverilla on valtava käyttäjäpohja. Se on käytettävissä sekä Macissa että Windowsissa. Joten jos käytät tätä editoria, tässä on yksi hyvä lähde asentamaan LESS-korostus Adobe DreamWeaverissa.

coda

Jos käytät Macia, tiedät todennäköisesti Codan, tämä editori on yksi Mac-käyttäjien suosituimmista. Ja tässä on, miten voit asentaa LESSin Codaan.

Geany

Se on yksi Linuxin käyttäjien suosituimmista koodieditoreista. Jotkin tietokoneeni, jotka käyttävät Linuxissa, käyttävät myös Geanya. Joten jos käytät sitä myös, voit sisällyttää LESS-korostuksen seuraamalla tätä ohjeita SuperUser.comissa

2. LESS Compiler

Toisin kuin ChrunchAppissa, jossa on sisäänrakennettu LESS-kääntäjä, muilla toimittajilla ei ole sitä oletusarvoisesti. Vaikka siihen on olemassa joitakin tapoja, mutta se on melko tekninen yleisille käyttäjille. Joten paras ratkaisu on tehdä kääntäminen seuraavilla työkaluilla: winless tai LESS.app. WinLESS on Windowsille suunniteltu kääntäjä, kun taas LESS.app on rakennettu OSX: lle.

Nämä työkalut voivat muuntaa LESS-koodin automaattisesti staattiseksi CSS: ksi, kun tallennamme tiedoston ja raportoimme suoraan, jos koodissa on virhe. Haluaisin näyttää, kuinka kätevä tämä työkalu on:

Ensinnäkin haluaisin ladata WinLESSin ja asentaa sen.

Napsauta Lisää kansio -painiketta ja etsi hakemisto, johon laitat .Vähemmän tiedostoja (oletan, että olet jo luonut ainakin yhden). Kun olet lisännyt yhden; WinLESS etsii ja löytää kaikki .Vähemmän tiedostoja ja näyttää ne luettelossa.

Siirry valikkoon Tiedosto> Asetus, ja varmista, että nämä vaihtoehdot tarkistetaan;

• Käännä tiedostot automaattisesti tallennettuna
• Näytä viesti onnistuneesta kääntämisestä

Voimme myös asettaa lähtökansion, jos haluamme tallentaa sen muualle. Mutta tässä esimerkissä jätämme tämän vaihtoehdon sellaisenaan; mikä tarkoittaa, että tulostustiedosto tallennetaan samaan hakemistoon kuin .Vähemmän tiedosto.

Avaa sinun .Vähemmän lisää tiedosto ja lisää muutamia muutoksia ja tallenna se.

WinLESS ilmoittaa, kun tiedosto on koottu onnistuneesti .css tai jos koodissa on virhe. Tällä tavoin voit tarkistaa .css-lähdön suoraan, eikä tarvitse odottaa, että koodit ovat valmiita kääntämään sen.

Jos käytät Macia, voit käyttää LESS.appia, jolla on sama funktio kuin WinLESS.

Esiasetetut sekoittimet

Nykyisissä nykyaikaisissa web-suunnittelukäytännöissä käytämme CSS3-ominaisuuksia, kuten Gradient, Shadow tai Border Radius, jotka näyttävät tältä:

-webkit-border-radius: 3px; -moz-border-säde: 3px; raja-säde: 3px;

tai

tausta: -moz-lineaarinen gradientti (alkuun, # f0f9ff 0%, # a1dbff 100%); tausta: -webkit-lineaarinen gradientti (alkuun, # f0f9ff 0%, # a1dbff 100%); tausta: -o-lineaarinen gradientti (alkuun, # f0f9ff 0%, # a1dbff 100%); tausta: -ms-lineaarinen gradientti (alkuun, # f0f9ff 0%, # a1dbff 100%); tausta: lineaarinen gradientti (alkuun, # f0f9ff 0%, # a1dbff 100%);

Edellisessä opetusohjelmassamme olemme tehneet joitakin Mixinsia yksinkertaistamaan tätä syntaksia. Onneksi jotkut web-suunnitteluyhteisön ihmiset ovat todella anteliaita, jotta he voivat säästää aikaa näiden hyödyllisten Mixinien kokoamiseen, jotta meidän ei tarvitse koota sitä itseäsi tyhjästä.

Ja yksi suosikkini on vähemmän elementtejä, jotka sisältävät monia hyödyllisiä CSS3-esiasetettuja sääntöjä. Näin kirjoitamme nyt vähemmän koodirivejä tylsiä myyjän etuliitteistä.

No niin, nyt katsotaanpa, miten kaikki edellä mainitut vinkit voivat todella auttaa.

Niiden yhdistäminen yhteen

Tässä esimerkissä aion luoda yksinkertaisen linkin painikkeen. Ensiksi haluaisin luoda uuden HTML-asiakirjan ja asettaa seuraavan hinnoittelun:

     Napsauta minua 

Luo styles.less tallenna se samaan kansioon HTML-dokumenttimme kanssa ja lisää kansio WinLESSiin.

Tuo elements.less olemme ladanneet ennen tämän syntaksin käyttöä:

@import "elements.less";

Nyt voimme käyttää mitä tahansa elementtejä, joita tarjotaan elementeiltä .kaltevuus, .pyöristetty, ja .rajautuu. Olen varma, että Mixinsin nimi on varsin itsestään selvä.

Aseta seuraavaksi LESS-säännöt alla olevaan tyylitaulukkoon. Ja tallenna se uudelleen

 a display: inline-block; pehmuste: 10px 20px; väri: # 555; teksti-koristelu: ei; .bw-gradientti (#eee, 240, 255); .pyöristetty; .bordered; &: hover .bw-gradient (#eee, 255, 240);  

Koska meidän .Vähemmän tiedosto on lisätty WinLESSiin, se käännetään automaattisesti .css. Nyt katsotaan tulokset.

No, se ei ole niin huono, ei, kun otetaan huomioon, että tämä painike on luotu vähemmän rivejä kuin mitä tarvitaan. Ja tässä on todellinen luotu staattinen CSS:

 a display: inline-block; pehmuste: 10px 20px; väri: # 555; teksti-koristelu: ei; tausta: #eeeeee; tausta: -webkit-gradientti (lineaarinen, vasen alaosa, vasen yläosa, värin pysäytys (0, # f0f0f0), värin pysäytys (1, #ffffff)); tausta: -ms-lineaarinen gradientti (pohja, # f0f0f0 0%, # f0f0f0 100%); tausta: -moz-lineaarinen gradientti (keskimmäinen pohja, # f0f0f0 0%, #ffffff 100%); -webkit-border-radius: 2px; -moz-border-säde: 2px; raja-säde: 2px; -moz-tausta-leike: pehmuste; -webkit-tausta-leike: pehmuste-laatikko; taustaklipsi: pehmustuskotelo; border-top: kiinteä 1px #eeeeee; border-left: kiinteä 1px #eeeeee; raja-oikea: kiinteä 1px #eeeeee; reunapohja: kiinteä 1px #eeeeee;  a: hover background: #eeeeee; tausta: -webkit-gradientti (lineaarinen, vasen alaosa, vasen yläosa, värin pysäytys (0, #ffffff), värin pysäytys (1, # f0f0f0)); tausta: -ms-lineaarinen gradientti (pohja, #ffffff 0%, #ffffff 100%); tausta: -moz-lineaarinen gradientti (keskimmäinen pohja, #ffffff 0%, # f0f0f0 100%); 

Yhteenvetona

Tässä on lyhyt yhteenveto siitä, mitä olemme keskustelleet tässä viestissä:

• Kun syntaksi korostetaan nykyisessä editorissamme, meidän ei tarvitse asentaa lisää editoria vain LESS-syntaksin säveltämiseen; tämä voi säästää joitakin levytiloja.
• Emme myöskään tarvitse enää ladata ja linkittää LESS.js-kirjastoa HTML-pääosaan kuten viimeisessä opetusohjelmassamme. Näin HTML-asiakirja pysyy puhtaana ja siistinä.
• Kääntäjän työkalujen, kuten WinLESSin ja LESS.appin, käyttö voi tuottaa staattisen CSS-lähdön heti. Joten, jos syntaksissa on jotain vikaa, voimme tutkia sen heti.
• Ensisijainen sekoitus, kuten LESS Elements, on paras ystävä. Se voi todella säästää aikaa, kun kootaan tylsiä CSS3-omaisuutta.

.