Lucrați eficient cu mai puține sfaturi și instrumente

În tutorialul nostru anterior, am învățat cum să folosim mai puțin în practică, folosind aplicații precum ChrunchApp pentru a compila codul. De data aceasta vom trece prin câteva sfaturi utile, care vor fi capabile să sporească performanțele și productivitatea noastră atunci când vom compila sintaxa mai mică. Vom configura mediul de lucru desktop / de lucru, permițând evidențierea sintaxei pentru editorul nostru curent, utilizând instrumentele de compilare automate și utilizând Mixins presetate, apoi sincronizați-le împreună.

Dacă ești gata, hai să începem.

Disclaimer: Sfaturile explicate mai jos sunt derivate din experiențele mele de zi cu zi ca designer web. Deci, înainte de a merge mai departe prin aceasta, vreau să subliniez că sfaturile s-ar potrivi unor designeri și nu altora; la fel ca orice alt tip pe care îl găsiți pe Web. Cu toate acestea, sper că puteți culege ceva util din următoarele sfaturi.

1. Marcator de cod

După cum am menționat mai înainte, v-am introdus în ChrunchApp. Cu toate acestea, această aplicație ar putea să nu fie preferința fiecărui designer web; deoarece fiecare designer are propriul mediu de lucru, inclusiv editorul de cod la alegere.

Mai degrabă decât să instalați un alt editor de cod, puteți să utilizați în continuare cel curent și să activați sublinierea sintaxei. Deci, în acest post, voi împărtăși câteva sfaturi pentru a adăuga LESS codul de evidențiere în 2 editori de text celebru: Text sublim 2 și Notepad++.

Text sublim 2

Acest editor este în prezent alegerea mea preferată de a mă ajuta să compun coduri. Această aplicație este disponibilă pentru Windows, Linux și OSX, indiferent de sistemul dvs. de operare, veți putea totuși să urmați acest sfat.

Acum, să o descărcăm de pe site-ul său oficial și să încercăm acest editor. Apoi, citiți următoarele instrucțiuni pentru a activa evidențiarea culorii LESS în ea.

Notă: Asigurați-vă că ați citit licența înainte de descărcare, deoarece versiunea gratuită este destinată exclusiv evaluării.

Instalați consolă pachet

Mai întâi, deschideți textul Sublim 2 și afișați Consola din acest meniu Afișați> Afișați consola

Apoi, copiați și lipiți următoarea linie de comandă în Consola, apoi apăsați Enter pentru a instala controlul pachetului de la wBond.net:

import urllib2, os; pf = "Pachetul Control.sublime-package"; ipp = sublime.installed_packages_path (); os.makedirs (ipp) dacă nu os.path.exists (ipp) altceva Nici unul; urllib2.install_opener (urllib2.build_opener (urllib2.ProxyHandler ())); deschis (os.path.join (ipp, PF), 'wb') .write (urllib2.urlopen ( "http://sublime.wbond.net/'+pf.replace (“, '% 20')). citiți ()); tipăriți "Vă rugăm să reporniți textul sublim pentru a termina instalarea"

Acest Consola pachet ne va ajuta să instalăm pachetul highlight.

Instalarea unui pachet care evidențiază mai puțin

Reporniți Text Sublim 2 și afișați Paleta de Comenzi din acest meniu Instrumente> Paleta de comenzi. Așteptați până când lista de pachete este încărcată. Apoi tastați Instalați pachetul pentru a căuta și încărca depozitele de pachete.

Apoi, căutați pachetul LESS din lista de depozite și apăsați pe Enter.

Așteptați un minut pentru textul Sublime 2 pentru a descărca și a instala pachetul până când apare următoarea notificare în bara de stare.

Accesați meniul Vizualizare> Sintaxă, ar trebui să vezi mai puțin pe listă. Aceasta înseamnă că textul sublim 2 este de susținere .Mai puțin și sintaxa LESS trebuie să aibă și culoarea potrivită acum.

Notepad++

Notepad ++ este un editor gratuit, Open Source, și are multe pluginuri utile pentru extinderea funcționalității. Este, de asemenea, utilizat pe scară largă de mulți designeri web / dezvoltatori, în special cei care lucrează cu sistemul de operare Windows. Deci, am decis să includeți și vârful pentru a adăuga LESS text evidențiind pentru el.

Instalați LESS-highlight în Notepad++

Activarea opțiunii LESS color în Notepad ++ este destul de ușoară.

Primul pachet de descărcare LESS pentru Notepad ++ de la acest link (userDefineLang_LESS.xml). Apoi, du-te la Vizualizare> Dialogul definit de utilizator.

Va apărea următoarea casetă pop-up de mai jos. Apasă pe Import… și localizați descărcarea .xml fişier. Apoi, reporniți Notepad-ul++.

Deschideți fișierul .less și mergeți la meniul Limbă. Ar trebui să vezi acum mai puțin. Selectați-l pentru a aplica evidențierea culorii pe sintaxa LESS.

Mai multe resurse

Există mulți alți editori de pe piață. Deci, aici vom include câteva link-uri utile pentru dvs. dacă nu utilizați nici unul dintre editorii de mai sus.

Adobe DreamWeaver

Fără îndoială, Dreamweaver are o bază imensă de utilizatori. Este disponibil atât pentru Mac, cât și pentru Windows. Deci, dacă folosiți acest editor, vă recomandăm să instalați mai puțină lumină în Adobe DreamWeaver.

Coda

Dacă utilizați Mac probabil știți Coda, acest editor este unul dintre cele mai populare printre utilizatorii de Mac. Iată cum puteți instala mai puțin în Coda.

geany

Este unul dintre editorii de cod mai popular printre utilizatorii Linux. Unele computere din biroul meu care rulează pe Linux utilizează și Geany. Deci, dacă o utilizați și ea, puteți include mai multă atenție prin urmărirea acestei instrucțiuni la SuperUser.com

2. LESS Compiler

Spre deosebire de ChrunchApp care are un compilator LESS built-in, ceilalți editori nu îl vor avea în mod implicit. Deși există câteva modalități de a le include, dar este mai degrabă tehnic pentru utilizatorii generali. Deci, cea mai bună soluție pe care o am este de a face compilarea folosind următoarele instrumente: winless sau LESS.app. WinLESS este un compilator conceput pentru Windows, în timp ce LESS.app este construit pentru OSX.

Aceste instrumente pot transforma codul nostru LESS într-un CSS static automat, deoarece salvăm fișierul și raportăm direct dacă există o eroare în cod. Ei bine, permiteți-mi să vă arăt cât de puțin este acest instrument:

Mai întâi, aș dori să descarcă WinLESS și să o instalez.

Faceți clic pe butonul Adăugați folderul și localizați directorul pe care îl plasați .Mai puțin (presupun că ați creat deja cel puțin una). Odată ce adăugați unul; WinLESS va scana și va găsi toate .Mai puțin fișiere și să vă afișeze în listă.

Accesați meniul Fișier> Setare, și asigurați-vă că aceste opțiuni sunt verificate;

Se compilează automat fișierele atunci când sunt salvate
Afișați mesajul de compilare reușit

De asemenea, putem seta directorul de ieșire, în cazul în care dorim să îl salvăm în altă parte. Dar, în acest exemplu, vom lăsa această opțiune așa cum este; ceea ce înseamnă că fișierul de ieșire va fi salvat în același director ca și .Mai puțin fişier.

Deschide-ți .Mai puțin fișier din directorul adăugat, efectuați câteva modificări și salvați-l.

WinLESS vă va anunța când fișierul a fost compilat cu succes .css sau în cazul în care există o eroare în coduri. În acest fel, puteți verifica direct ieșirea .css, mai degrabă decât să așteptați finalizarea codurilor pentru al compila.

Dacă utilizați Mac, puteți utiliza LESS.app care are aceeași funcționalitate ca WinLESS.

Preset Mixins

În practicile moderne de web design moderne, vom folosi proprietăți CSS3 cum ar fi Gradient, Shadow sau Radius de Frontieră care arată astfel:

-webkit-border-radius: 3px; -moz-border-radius: 3px; raza de graniță: 3px;

fundal: -moz-linear-gradient (top, # f0f9ff 0%, # a1dbff 100%); fundal: -webkit-gradient linear (top, # f0f9ff 0%, # a1dbff 100%); fundal: -o-gradient linear (top, # f0f9ff 0%, # a1dbff 100%); fundal: -ms-linear-gradient (top, # f0f9ff 0%, # a1dbff 100%); fundal: gradient liniar (top, # f0f9ff 0%, # a1dbff 100%);

În tutorialul nostru anterior am făcut câteva Mixins pentru a simplifica această sintaxă. Din fericire, unii oameni din comunitatea de design web sunt într-adevăr suficient de generoși pentru a-și pierde timpul pentru a compila aceste mixuri utile, astfel încât să nu avem nevoie să ne compilam de la zero.

Și unul dintre preferatele mele este Elementele mai puțin numeroase, care conține multe reguli prestabilite pentru CSS3. Astfel, acum scriem mai puține linii de cod de la prefixele furnizorilor obositori.

Bine, acum, să vedem cum toate aceste sfaturi de mai sus pot ajuta cu adevărat.

Punându-le pe toți împreună

În acest exemplu voi crea un simplu buton de legătură. Mai întâi aș dori să creez un nou document HTML și să plasez următoarea marjă:

 MAI PUȚIN    Faceți clic pe mine

Creeaza o styles.less ca principala noastră foaie de stil LESS, salvați-o în același folder cu documentul HTML și adăugați folderul la WinLESS.

Importați elements.less pe care le-am descărcat înainte de a utiliza această sintaxă:

@import "elements.less";

Acum, putem folosi orice Mixins furnizate din elemente .gradient, .rotunjit, și .mărginit. Sunt sigur că numele Mixins este destul de explicativ.

Apoi, puneți regulile LESS mai jos, în foaia dvs. de stil. Și, salvează-o încă o dată

 a display: inline-block; padding: 10px 20px; culoare: # 555; text-decorare: nici unul; .gradientul bob (#eee, 240, 255); .rounded; .bordered; &: mutați .bw-gradient (#eee, 255, 240);

De la noi .Mai puțin fișierul a fost adăugat la WinLESS, acesta va fi automat compilat în .css. Acum, să vedem rezultatele.

Ei bine, nu este atât de rău nu este, având în vedere că acest buton a fost creat cu mai puține linii decât ceea ce era necesar. Și, aici este CSS statică reală generată:

 a display: inline-block; padding: 10px 20px; culoare: # 555; text-decorare: nici unul; fundal: #eeeeee; fundal: -webkit-gradient (linia, partea stângă a stângii, partea stângă sus, stopul de culoare (0, # f0f0f0), stopul de culoare (1, #ffffff)); fundal: -ms-gradient linear (fund, # f0f0f0 0%, # f0f0f0 100%); fundal: -moz-linear-gradient (fund central, # f0f0f0 0%, #ffffff 100%); -webkit-border-radius: 2px; -moz-border-radius: 2px; raza de graniță: 2 pixeli; -moz-fundal-clip: padding; -webkit-background-clip: căptușeală; clip-fundal: căptușeală; frontală superioară: solid 1px #eeeeee; frontieră-stânga: solid 1px #eeeeee; frontieră-dreapta: solid 1px #eeeeee; frontală de fundal: solid 1px #eeeeee;  a: mutați background: #eeeeee; fundal: -webkit-gradient (linia, partea din stânga, partea stângă sus, stopul de culoare (0, #ffffff), oprirea culorilor (1, # f0f0f0)); fundal: -ms-gradient linear (fund, #ffffff 0%, #ffffff 100%); fundal: -moz-linear-gradient (fund central, #ffffff 0%, # f0f0f0 100%);

În concluzie

Iată un scurt rezumat al celor discutate în acest post:

Permițând evidențierea sintaxei în editorul nostru curent, nu este nevoie să instalați un editor suplimentar doar pentru a compune sintaxa LESS; acest lucru vă poate salva unele spații / memorie pe disc.
De asemenea, nu mai trebuie să descărcăm și să conectăm Biblioteca LESS.js în secțiunea capului HTML așa cum am făcut-o în ultimul nostru tutorial. În acest fel, documentul nostru HTML rămâne curat și elegant.
Folosind instrumente de compilare precum WinLESS și LESS.app se poate genera imediat ieșirea CSS statică. Deci, dacă există ceva în neregulă cu sintaxa, o putem examina imediat.
Mixuri presetate ca LESS Elements este cel mai bun prieten al nostru. Se poate salva cu adevărat timpul nostru când compilam proprietatea CSS3 obositoare.