LESS CSS - Kezdő útmutató

A CSS előfeldolgozója már a webes fejlesztés kapcsán vált. Egyszerű CSS-t szállít programozási jellemzőkkel, mint például változók, függvények vagy mixin, és a műveletek, amelyek lehetővé teszik a webfejlesztők építését moduláris, skálázható és kezelhetőbb CSS-stílusok.

Ebben a bejegyzésben megvizsgáljuk a LESS-et, amely az egyik legnépszerűbb CSS előfeldolgozó, és széles körben elterjedt számos front-end keretrendszerben, mint a Bootstrap. Mi is sétálunk a Alapvető segédprogramok, eszközök és beállítások, amelyek segítenek a LESS használatában.

A fordító

Először is össze kell állítanunk egy fordítót. A LESS szintaxis nem szabványos, W3C specifikációnként. A böngésző nem tudja feldolgozni és megjeleníteni a kimenetet, annak ellenére, hogy a CSS-hez hasonló tulajdonságokat örököl.

Íme egy pillantás a LESS kódra:

 @ színalap: # 2d5e8b; .class1 háttérszín: @ színalap; .class2 háttérszín: #fff; szín: @ színalap;

A fordító feldolgozza a kódot, és a LESS szintaxist böngésző-kompatibilis CSS formátumba kapcsolja:

 .class1 háttérszín: # 2d5e8b;  .class1. class2 háttérszín: #fff; szín: # 2d5e8b;

Számos eszköz áll rendelkezésre a CSS összeállításához:

A JavaScript használata

A LESS a less.js fájl, amely nagyon könnyen telepíthető a webhelyére. Hozzon létre egy stíluslapot .Kevésbé kiterjesztése és a dokumentumban lévő hivatkozás a rel = "stylesheet / kevesebb" tulajdonság.

Itt lehet beszerezni a JS fájlt, töltse le a Bower csomagkezelőn keresztül, vagy közvetlenül közvetlenül a CDN-hez, így:

Mindannyian be van állítva, és stílusokat írhat a .Kevésbé. A LESS szintaxist az oldal betöltésekor össze kell állítani. Tartsd észben, hogy A JavaScript használatát a gyártási szakaszban nem kell megakadályozni, mivel ez rossz hatással lesz a webhely teljesítményére.

A LESS szintaxist mindig először és csak össze kell állítania a rendszeres CSS kiszolgálása helyette. Te tudod használni Terminál, Task Runner tetszik Röfög vagy Korty, vagy egy grafikus alkalmazás.

A CLI használata

A LESS natív parancssori felületet (CLI) biztosít, lessc, amely több feladatot kezeli a LESS szintaxis összeállításán túl. A CLI segítségével a kódokat szétoszthatjuk, tömöríthetjük, és létrehozhatunk egy forrás térképet. A parancs a Node.js-on alapul, amely hatékonyan teszi lehetővé a parancsot a Windows, az OS X és a Linux rendszeren keresztül.

Győződjön meg róla, hogy a Node.js telepítve van (egyébként ragadja meg a telepítőt), majd telepítse a LESS CLI-t az NPM-en (Node Package Manager) az alábbi parancssor használatával.

 npm install -g kevesebb

Most már van lessc a LESS-t a CSS-be fordíthatja.

 lessc style.less style.css

Task Runner használata

A feladat futó olyan eszköz, amely automatizálja a fejlesztési feladatokat és a munkafolyamatokat. Ahelyett, hogy a lessc minden egyes alkalommal, amikor össze szeretnénk fordítani a kódjainkat, beállíthatunk egy feladat futót, és beállíthatjuk, hogy nézze meg a változtatásokat a LESS fájlunkban, és azonnal fordítsa a LESS-t a CSS-be.

Ma két népszerű eszköz a Grunt és a Gulp. Van egy sor posta, amely ezeket az eszközöket lefedi. Ellenőrizze a bejegyzéseket, hogy megtudja, hogyan telepítheti ezeket az eszközöket a munkafolyamatba.

A Grunt használata a munkafolyamat automatizálásához
Első lépések a Gulp.js használatával
A Build Scripts csata: Gulp Vs Grunt

Grafikus alkalmazás használata

Azok számára, akik nem szoktak megszokni a terminál és a parancssorok használatát, választhatnak grafikus felületet. A LESS ma már rengeteg alkalmazás áll rendelkezésre minden platformra - néhány ingyenes, néhány fizetett

Itt van a teljes lista:

App	Emelvény	Költség
Keverék	OS X / Windows	Ingyenes
Koala	OS X / Windows / Linux	Ingyenes
Prepros	OS X / Windows	Freemium (USD29)
winless	ablakok	Ingyenes
CodeKit	OS X	USD32

Melyik fordítót választja (a JavaScript mellett) nem igazán számít, őszintén szólva, amíg az eszköz működik és kiegészíti a munkafolyamatát..

A Kódszerkesztő

Használhat bármilyen kódszerkesztőt. Egyszerűen telepítsen egy bővítményt vagy bővítményt, hogy kiemelje a LESS szintaxist megfelelő színekkel..

Most, hogy megvan a fordító és a kódszerkesztő, akkor elkezdhetjük a CSS stílusok írását LESS szintaxissal.

LESS Szintaxis

Ellentétben a szokásos CSS-vel, amint tudjuk, a LESS sokkal jobban működik, mint egy programozási nyelv. Dinamikus, ezért várjunk olyan terminológiákat, mint például változók, Művelet és terület az út mentén.

változók

Először is nézzük meg a változók.

Ha elég hosszú ideig dolgozol a CSS-lel, valószínűleg írtál ilyet, ahol ismétlődő értékeket adunk meg a deklarációs blokkokban a teljes stíluslapon.

 .class1 háttérszín: # 2d5e8b;  .class2 háttérszín: #fff; szín: # 2d5e8b;  .class3 border: 1px szilárd # 2d5e8b;

Ez a gyakorlat valójában rendben van - mindaddig, amíg többet nem kell szitálnunk ezer vagy több hasonló részlet a stíluslapon. Ez történhet egy nagyszabású weboldal építése során. A munka unalmas lesz.

Ha olyan CSS előfeldolgozót használunk, mint a LESS, a fenti példány nem jelent problémát - használhatjuk változók. A változók lehetővé teszik számunkra, hogy tároljuk állandó érték, amelyet később a teljes stíluslapon újra felhasználhat.

 @ színalap: # 2d5e8b; .class1 háttérszín: @ színalap;  .class2 háttérszín: #fff; szín: @ színalap;  .class3 border: 1px szilárd @ color-base;

A fenti példában a színt tároljuk # 2d5e8b ban,-ben @ Szín-bázis változó. Ha módosítani szeretné a színt, akkor csak a változó értékét kell módosítanunk.

A színek mellett más értékeket is beilleszthet a változókba, például:

 @ font-family: Georgia @ dot-border: pontozott @ átmenet: lineáris @ kapacitás: 0,5

mixinek

A LESS-ben használhatjuk mixinek a teljes nyilatkozatok újbóli felhasználása egy CSS szabályban, amely egy másik szabálykészletben van beállítva. Íme egy példa:

 .gradiensek háttér: #eaeaea; háttér: lineáris gradiens (felső, #eaeaea, #cccccc); háttér: -o-lineáris gradiens (felső, #eaeaea, #cccccc); háttér: -ms-lineáris gradiens (felső, #eaeaea, #cccccc); háttér: -moz-lineáris gradiens (felső, #eaeaea, #cccccc); háttér: -webkit-lineáris gradiens (top, #eaeaea, #cccccc);

A fenti részletben alapértelmezett értéket állítottunk be gradiens színe a .színátmenetek osztály. Ha szeretnénk hozzáadni a színátmeneteket, egyszerűen beillesztjük a .színátmenetek Ily módon:

 div .gradients; határ: 1px szilárdság # 555; határ-sugár: 3px;

A .doboz örökli az összes deklarációs blokkot a .színátmenetek. Tehát a fenti CSS szabály egyenlő a következő egyszerű CSS-szel:

 div háttér: #eaeaea; háttér: lineáris gradiens (felső, #eaeaea, #cccccc); háttér: -o-lineáris gradiens (felső, #eaeaea, #cccccc); háttér: -ms-lineáris gradiens (felső, #eaeaea, #cccccc); háttér: -moz-lineáris gradiens (felső, #eaeaea, #cccccc); háttér: -webkit-lineáris gradiens (top, #eaeaea, #cccccc); határ: 1px szilárdság # 555; határ-sugár: 3px;

Továbbá, ha a CSS3-at sokat használja a webhelyén, akkor a LESS Elements segítségével könnyebbé teheti a munkát. A LESS Elements egy közös gyűjtemény CSS3 Mixins amit gyakran használhatunk stíluslapokban, például border-radius, színátmenetek, árnyék stb.

A LESS Elements használatához egyszerűen hozzá kell adni a @import szabályozza a LESS stíluslapot, de ne felejtse el először letölteni és hozzáadni a munkakönyvtárába.

 @import "elements.less";

Most újra felhasználhatjuk az összeset osztályok a elements.less, például hozzáadni 3px szegély sugara a div, tudunk írni:

 div .rounded (3px);

További használat esetén olvassa el a hivatalos dokumentációt.

Beágyazott szabályok

Ha egyszerű CSS-ben írsz stílusokat, előfordulhat, hogy ezek a tipikus kódstruktúrák is megtörténtek.

 nav magasság: 40px; szélesség: 100%; háttér: # 455868; szegély alsó: 2px szilárdság # 283744;  nav li szélesség: 600px; magasság: 40px;  nav li a color: #fff; vonalmagasság: 40px; szöveg-árnyék: 1px 1px 0px # 283744;

Egyszerű CSS-ben a gyermekelemeket úgy választjuk meg, hogy először a szülőt célozzuk meg minden beállított szabályban, ami jelentősen redundáns, ha követjük a “legjobb gyakorlatok” elv.

A LESS CSS-ben egyszerűsíthetjük a szabályokat a gyermekelemek beágyazása a szülők közé, alábbiak szerint;

 nav magasság: 40px; szélesség: 100%; háttér: # 455868; szegély alsó: 2px szilárdság # 283744; li szélesség: 600px; magasság: 40px; a szín: #fff; vonalmagasság: 40px; szöveg-árnyék: 1px 1px 0px # 283744;

Azt is hozzárendelheti pszeudo-osztályok, mint :lebeg, a szelektorhoz az (és) szimbólummal.

Tegyük fel, hogy szeretnénk hozzáadni :lebeg a fenti horgonycímkére, így írhatjuk:

 a szín: #fff; vonalmagasság: 40px; szöveg-árnyék: 1px 1px 0px # 283744; &: hover háttérszín: # 000; szín: #fff;

Művelet

A LESS-ben is végezhetünk műveleteket, például összeadás, kivonás, szorzás és osztás a stíluslapok számai, színei és változói.

Tegyük fel, hogy szeretnénk, hogy a B elem kétszer nagyobb legyen az A. elemnél. Ebben az esetben ezt írhatjuk:

 @height: 100px .element-A magasság: @ight;  .element-B magasság: @height * 2;

Amint a fentiekben látható, először tároljuk az értéket a @magasság változó, majd adja meg az értéket az A elemhez.

A B elemben a magasság kiszámítása helyett, a magasságot 2-gyel lehet megszorozni a csillagkezelő (*) használatával. Most, amikor megváltoztatjuk az értéket a @magasság változó, B elem mindig kétszerese lesz a magasságnak.

Nézze meg a fejlettebb működési példákat az előző bemutatónkban: A Slick Menu navigációs sáv tervezése.

terület

A LESS a terület koncepció, ahol a változók először a helyi hatókörből öröklődnek, és amikor nem elérhető helyi szinten, szélesebb körben fog keresni.

 fejléc @color: black; háttérszín: @color; nav @color: kék; háttérszín: @color; a szín: @color;

A fenti példában a fejléc van egy fekete háttérszín, de nava háttér színe lesz kék mivel a @color változó a helyi hatókörében van, míg a egy kék lesz, amely a közelebbi szülőtől örököl, nav.

Végső gondolat

Végül reméljük, hogy ez a hozzászólás alapos megértést adhat arról, hogyan tudunk jobb módon írni a CSS-t a LESS segítségével. Előfordulhat, hogy kicsit kényelmetlenül érzed magad, de ahogy gyakrabban próbálod, sokkal könnyebb lesz.

Néhány bemutató, amiket arra bátorítok, hogy vizsgálja meg további tippeket és gyakorlatokat, amelyek segíthetik a LESS készségeket a következő szintre.

LESS CSS bemutató: A Slick Menu navigációs sáv tervezése
A LESS színes funkciók megértése
3 Új LESS CSS funkciók, amelyeket tudnia kell