Hatékonyan működik a LESS tippekkel és eszközökkel

Korábbi bemutatónkban megtanultuk, hogyan kell praktikusan használni a LESS-et a ChrunchApp, például a kód összeállításához. Ezúttal néhány praktikus tippet fogunk végigvinni, amelyek növelhetik teljesítményünket és termelékenységünket a LESS szintaxis összeállításakor. Az asztali / munkakörnyezetet úgy állítjuk be, hogy az aktuális szerkesztőnk szintaxis kiemelését az automatikus fordítóeszközökkel és az előre beállított Mixins használatával engedélyezzük, majd szinkronizáljuk őket együtt.

Nos, ha készen állsz, kezdjük.

Jogi nyilatkozat: Az alábbiakban ismertetett tippek a napi tervezői tapasztalatokból származnak. Tehát, mielőtt tovább járnánk rajta, szeretném felvázolni, hogy a tippek egyes tervezőknek és nem másoknak is megfelelnek; éppen úgy, mint bármely más tipp az interneten. Mindazonáltal remélem, hogy hasznos dolgokat szerezhet a következő tippekből.

1. Kódkiemelő

Ahogy korábban említettük, bemutattuk a ChrunchApp-ot. Azonban ez az alkalmazás nem minden webes tervező preferenciája; mert minden tervező rendelkezik saját munkakörnyezetével, beleértve a választott kódszerkesztőt is.

Egy másik kódszerkesztő telepítése helyett valójában továbbra is használhatja az aktuális kódot, és engedélyezheti a szintaxis kiemelését. Tehát ebben a hozzászólásban megosztom néhány tippet a LESS kód kiemeléséhez két híres szövegszerkesztőhöz: Szublimált szöveg 2 és Jegyzettömb++.

Szublimált szöveg 2

Ez a szerkesztő jelenleg a legkedvezőbb választás a kódok összeállításához. Ez az alkalmazás Windows, Linux és OSX esetén is elérhető, így az operációs rendszeredtől függetlenül továbbra is követheted ezt a tippet.

Most töltsük le a hivatalos honlapjáról, és próbáljuk ki ezt a szerkesztőt. Ezután olvassa el az alábbi utasításokat a LESS szín kiemeléséhez.

Jegyzet: Kérjük, győződjön meg róla, hogy a letöltés előtt olvassa el a licencet, mivel az ingyenes verzió csak értékelésre szolgál.

A csomagkonzol telepítése

Először nyissa meg a Sublime Text 2-t, és jelenítse meg a konzolt Nézet> Konzol megjelenítése

Ezután másolja és illessze be a következő parancssort a konzolba, majd nyomja meg az Enter billentyűt a csomagvezérlés telepítéséhez a wBond.net webhelyről:

import urllib2, os; pf = "Package Control.sublime-package"; ipp = sublime.installed_packages_path (); os.makedirs (ipp) ha nem os.path.exists (ipp) más Nincs; urllib2.install_opener (urllib2.build_opener (urllib2.ProxyHandler ())); nyitott (os.path.join (IPP, PF), 'WB') .write (urllib2.urlopen ( 'http://sublime.wbond.net/'+pf.replace (”, '% 20')). read ()); nyomtatás 'Kérjük, indítsa újra a Sublime szöveget a telepítés befejezéséhez'

Ez Csomagkonzol segíteni fog a kiemelt csomag telepítésében.

LESS-kiemelő csomag telepítése

Indítsa újra a Sublime Text 2-t, és jelenítse meg a parancspalettát Eszközök> Parancspaletta. Várjon, amíg a csomaglista be van töltve. Ezután írja be Csomag telepítése a csomagtárak kereséséhez és betöltéséhez.

Ezután keresse meg a LESS csomagot a tároló listáról, és nyomja meg az Enter billentyűt.

Várjon egy percet a Sublime Text 2 letöltéséhez és telepítéséhez, amíg a következő értesítés nem jelenik meg az állapotsorban.

Menjen a menübe Nézet> Szintaxis, látnod kell a LESS-et a listán. Ez azt jelenti, hogy a Sublime Text 2 támogatja .Kevésbé és a LESS szintaxisának is megfelelő színű kiemeléssel kell rendelkeznie.

Jegyzettömb++

A Notepad ++ egy szabad, nyílt forráskódú szerkesztő, és sok hasznos bővítményt tartalmaz annak funkcionalitásának bővítéséhez. Széles körben használják sok webes tervező / fejlesztő, különösen azok, akik a Windows operációs rendszerrel dolgoznak. Szóval úgy döntök, hogy a tippet hozzáadom a LESS szöveg hozzáadásához.

Telepítse a LESS-kiemelést a Jegyzettömbben++

A Notepad ++ programban a LESS szín kiemelése engedélyezett.

Először töltse le a LESS csomagot a Notepad ++ programhoz ebből a linkből (userDefineLang_LESS.xml). Akkor menj Nézet> Felhasználó által definiált párbeszéd.

Megjelenik az alábbi felugró ablak. Kattints a Import ... gombot, és keresse meg a letöltött fájlokat .xml fájlba. Ezután indítsa újra a Jegyzettömböt++.

Nyissa meg a .less fájlt, és menjen a Nyelv menübe. Most látnod kell a LESS-et is. Válassza ki azt a szín kiemelésére a LESS szintaxisára.

További források

Sok más szerkesztő is van a piacon. Tehát itt találunk néhány hasznos linket, ha nem használja a fenti szerkesztőket.

Adobe DreamWeaver

Kétségtelen, hogy a Dreamweavernek hatalmas felhasználói bázisa van. Mind a Mac, mind a Windows számára elérhető. Tehát, ha ezt a szerkesztőt használja, itt van egy jó forrás a LESS kiemelés telepítéséhez az Adobe DreamWeaverben.

Kóda

Ha Mac-et használ, akkor valószínűleg ismeri a Coda-t, ez a szerkesztő a Mac-felhasználók körében az egyik legnépszerűbb. És itt van, hogyan telepítheted a LESS-t a Coda-ban.

Geany

Az egyik legnépszerűbb kódszerkesztő a Linux-felhasználók körében. Egyes irodáimban a Linuxon futó számítógépek Geany-t is használnak. Tehát, ha azt is használja, akkor a LESS kiemelést a SuperUser.com ezen utasításával követheti

2. LESS Compiler

Ellentétben a ChrunchApp-tal, amely beépített LESS fordítóval rendelkezik, a többi szerkesztő alapértelmezés szerint nem lesz. Bár van néhány módja annak megadására, de meglehetősen technikai jellegű az általános felhasználók számára. Tehát a legjobb megoldás, hogy a következő eszközökkel végezzük el a fordítást: winless vagy LESS.app. A WinLESS a Windows számára készült fordító, míg a LESS.app OSX-re épül.

Ezek az eszközök a LESS kódot statikus CSS-re konvertálhatják automatikusan, amikor a fájlt mentjük és közvetlenül jelentjük, ha a kódban hiba van. Hadd mutassam meg, milyen maroknyi ez az eszköz:

Először szeretném letölteni a WinLESS programot és telepíteni.

Kattintson a Mappa hozzáadása gombra, és keresse meg azt a könyvtárat, ahová a .Kevésbé fájlok (feltételezem, hogy már létrehoztál legalább egyet). Egyszer hozzáadásával; A WinLESS megvizsgálja és megtalálja az összeset .Kevésbé fájlokat, és megjelenítheti a listán.

Menjen a menübe Fájl> Beállítás, és győződjön meg arról, hogy ezek az opciók be vannak-e jelölve;

• A fájlok mentése automatikusan mentésre kerül
• Mutasson üzenetet a sikeres fordításról

Azt is beállíthatjuk a kimeneti mappát, ha máshol szeretnénk menteni. De ebben a példában ezt a lehetőséget hagyjuk el; ami azt jelenti, hogy a kimeneti fájl ugyanabba a könyvtárba kerül, mint a .Kevésbé fájl.

Nyissa meg .Kevésbé fájlt a hozzáadott könyvtárból, végezzen néhány módosítást és mentse el.

A WinLESS értesíti Önt, amikor a fájlt sikeresen összeállították .css vagy ha hiba van a kódokban. Így közvetlenül ellenőrizheti a .css kimenetet, és nem kell várnia, hogy a kódok befejeződjenek.

Ha Macet használ, akkor a LESS.app használatával ugyanaz a funkcionalitás, mint a WinLESS.

Előre beállított keverékek

A jelenlegi modern webdesign-gyakorlatokban a CSS3 tulajdonságait, mint a Gradient, Shadow vagy Border Radius, a következőképpen fogjuk használni:

-webkit-border-radius: 3px; -moz-határ-sugár: 3px; határ-sugár: 3px;

vagy

háttér: -moz-lineáris gradiens (felső, # f0f9ff 0%, # a1dbff 100%); háttér: -webkit-lineáris gradiens (felső, # f0f9ff 0%, # a1dbff 100%); háttér: -o-lineáris gradiens (felső, # f0f9ff 0%, # a1dbff 100%); háttér: -ms-lineáris gradiens (felső, # f0f9ff 0%, # a1dbff 100%); háttér: lineáris gradiens (felső, # f0f9ff 0%, # a1dbff 100%);

Korábbi bemutatónkban néhány Mixint készítettünk a szintaxis egyszerűsítésére. Szerencsére a web design közösségben néhány ember elég nagylelkű ahhoz, hogy időt takarítson meg ezeknek a hasznos Mixinek összeállításának, hogy ne kelljen magunkat összeállítanunk.

És az egyik kedvencem a kevésbé elem, amely sok hasznos CSS3 előre beállított szabályt tartalmaz. Így most már kevesebb kódsor írása az unalmas szállítói előtagokból.

Rendben, nézzük meg, hogy a fenti fenti tippek hogyan segíthetnek.

Mindent együtt

Ebben a példában egy egyszerű link gombot fogok létrehozni. Először új HTML-dokumentumot szeretnék létrehozni, és a következő felárat helyezem el:

     Kattints ide 

Hozzon létre egy styles.less a fő LESS stíluslapunkként mentse el ugyanabba a mappába a HTML-dokumentumunkkal, és adja hozzá a mappát WinLESS-hez.

Importálja a elements.less a szintaxis használata előtt letöltöttük:

@import "elements.less";

Most már használhatunk bármilyen elemet, amit az elemekből biztosítunk .gradiens, .lekerekített, és .határos. Biztos vagyok benne, hogy a Mixins név meglehetősen magyarázó.

Ezután tegye a LESS szabályokat a stíluslapodba. És mentse újra

 a display: inline-block; párnázás: 10px 20px; szín: # 555; szöveg-dekoráció: nincs; .bw-gradiens (#eee, 240, 255); .rounded; .bordered; &: hover .bw-gradiens (#eee, 255, 240);  

Mióta a miénk .Kevésbé fájl lett hozzáadva a WinLESS-hez, automatikusan bekerül .css. Most nézzük meg az eredményeket.

Nos, ez nem olyan rossz, nem úgy, hogy ez a gomb kevesebb sorral jött létre, mint amire szükség volt. És itt van az aktuális generált statikus CSS:

 a display: inline-block; párnázás: 10px 20px; szín: # 555; szöveg-dekoráció: nincs; háttér: #eeeeee; háttér: -webkit-gradiens (lineáris, bal alsó, bal felső, szín-stop (0, # f0f0f0), szín-stop (1, #ffffff)); háttér: -ms-lineáris gradiens (alsó, # f0f0f0 0%, # f0f0f0 100%); háttér: -moz-lineáris gradiens (középső alsó, # f0f0f0 0%, #ffffff 100%); -webkit-border-radius: 2px; -moz-border-sugár: 2px; határ-sugár: 2px; -moz-háttér-klip: párnázás; -webkit-háttér-klip: padding-box; háttér-klip: padding-box; border-top: szilárd 1px #eeeeee; oldalsó bal: szilárd 1px #eeeeee; jobbra: szilárd 1px #eeeeee; határ alsó: szilárd 1px #eeeeee;  a: lebeg háttér: #eeeeee; háttér: -webkit-gradiens (lineáris, bal alsó, bal felső, szín-stop (0, #ffffff), szín-stop (1, # f0f0f0)); háttér: -ms-lineáris gradiens (alsó, #ffffff 0%, #ffffff 100%); háttér: -moz-lineáris gradiens (középső alsó, #ffffff 0%, # f0f0f0 100%); 

Összefoglalva

Íme egy gyors összefoglaló arról, amit ebben a bejegyzésben megvitattunk:

• A szintaxis kijelölésének engedélyezésével a jelenlegi szerkesztőben nem szükséges további szerkesztőt telepíteni csak a LESS szintaxis összeállításához; ez menthet néhány teret / memóriát a lemezen.
• Nem kell tovább letöltenünk és összekapcsolnunk a LESS.js-könyvtárat a HTML-fejrészünkbe, ahogyan azt az utolsó bemutatónkban tettük. Így a HTML-dokumentumunk tiszta és tiszta marad.
• Az olyan fordítóeszközök használata, mint a WinLESS és a LESS.app, azonnal generálhatja a statikus CSS kimenetet. Tehát, ha valami baj van a szintaxissal, azonnal megvizsgálhatjuk.
• Az előre beállított keverékek, mint a LESS Elements, a legjobb barátunk. Ez valóban megmentheti az időt, amikor az unalmas CSS3 tulajdonságokat összeállítja.

.