Ilgą laiką naudodami CSS prieiname išvadą, jog ši pakopinių stilių kalba nėra itin lanksti ar „protinga“. Mažesniems projektams įprastinė CSS sintaksė puikiai tinka ir didesnių problemų nekelia, tačiau kuriant didelius projektus, kur rašome šimtus eilučių CSS kodo, įklipstame į besikartojančio kodo (angl. „code repetition“) liūną. Tad ar galime kaip nors to išvengti? Džiaugiuosi jums pranešdamas, kad taip, galime to išvengti naudodami lankstesnę CSS sintaksę — LESS.

LESS istorija

Pradžioje LESS buvo kaip atskiras papildinys (angl. „gem“) Ruby programavimo kalbai. Kadangi Ruby on Rails karkasas (angl. „framework“), sukurtas ant Ruby programavimo kalbos, išpopuliarėjo reliatyviai neseniai, mažai buvo girdėti apie LESS. Su laiku atsirado LESS implementavimas PHP kalboje, tačiau tai visgi nebuvo ypatingai patogi išeitis. Daug dėmesio LESS susilaukė, kai ši nauja sintaksė buvo pritaikyta JavaScript. LESS veikia kur kas sparčiau su JavaScript, o ir implementavimas daug paprastesnis. Tad čia mes ir turėsime omenyje LESS palaikymą su JavaScript.

Tad kaip tiksliai galime apibūdinti LESS?

Noriu atkreipti dėmesį, jog LESS nėra CSS alternatyva ar nauja technologija, integruota naršyklėse. Tai paprasčiausiai yra išankstinis CSS kodo apdorojimas (angl. „preprocessing“), kurio pagalba LESS sintaksė, kuri, beje, yra beveik identiška įprastiniam CSS kodui, yra apdorojama su JavaScript ir paverčiama į tikrąjį CSS kodą.

Kuo ypatinga LESS sintaksė ir kaip ji skiriasi nuo CSS?

Sintaksė skiriasi labai nežymiai: su LESS galime sukurti ir naudoti kintamuosius, supaprastintai aprašyti hierarchiją ir net atlikti aritmetines operacias. Šios savybės padeda išvengti besikartojančio kodo, o tai reiškia mažiau eilučių kodo, kas, be abejo, mums labai paranku.

LESS diegimas (integravimas)

LESS naudojimui yra du esminiai reikalavimai:

• Vietoj *.css failo plėtinio (angl. „extension“) turime naudoti *.less plėtinį.
• Būtina įkrauti kompiliatorių, kuris sukompiliuotų LESS į tikrąjį CSS kodą.

Kadangi čia aptariame LESS kompiliavimą su JavaScript, naudosime būtent JavaScript kompiliatorių.

LESS.js oficialus tinklalapis: http://lesscss.org.

Stilistinių aprašų failą nurodome taip pat kaip ir įprastai, tik nepamirštame, jog LESS kodas turi būti faile su *.less plėtiniu.

<link rel="stylesheet/less" type="text/css" href="stilius.less">

Parsisiunčiame JavaScript failą iš anksčiau nurodyto tinklalapio („Download less.js“) ir šį failą įdedame mums patogioje vietoje. Aš įprastai JavaScript failus saugoju atskiroje direktorijoje „js“. Galiausiai belieka tik įterpti parsiųstą failą HTML dokumente.

<script src="js/less.js" type="text/javascript"></script>

LESS sintaksė ir pavyzdžiai

Taigi nebedelskime daugiau laiko ir pažiūrėkime, ką mums siūlo LESS.

Kintamieji

Jeigu turite šiek tiek patirties programavime, nesunkiai įsivaizduosite, kam naudojami kintamieji. Tiems, kurie su kintamaisiais susiduria pirmą kartą, trumpai paaiškinsiu, kam jie reikalingi LESS sintaksėje.

Tarkime, jog tinklalapio dizainas turi tam tikrą spalvų schemą. Žinoma, kai kuriems elementams naudosime tą pačią spalvą iš schemos (paletės), tad CSS kodu galbūt turėtume kažką panašaus:

a { color: #c6382f; text-decoration: none; }
a:hover { color: #800800; text-decoration: underline; }

#blokas { width: 400px; height: 200px; border: 1px solid #c6382f; }
#blokas:hover { border-color: #800800; }

#nuorodos { background: #c6382f; }
#nuorodos: hover { background: #800800; }

Iš šio CSS kodo matome, jog kiekviename selektoriuje kartojasi tos pačios spalvų HEX reikšmės. Galėtume į tai ypatingai nekreipti dėmesio, tačiau įvertinkime situaciją, kai nutariame, jog pasirinktos spalvos netinka ir norime jas pakeisti. Aišku, tokiu atveju turėsime peržiūrėti visą CSS kodą ir pakesti reikšmes naujomis. Galbūt čia neatrodo viskas labai klaikiai ir sudėtingai, bet jeigu turėsime 100, 200 ar daugiau eilučių CSS kodo? Neabejotinai tokioje situacijoje turime problemą. Štai kur mes galime pasinaudoti kintamaisiais.

Kintamieji saugo iš anksto nustatytą informaciją, kurią galime panaudoti daug kartų, žinodami tik kintamojo pavadinimą, o ne jo reikšmę. Apačioje pateiksiu pavyzdį, kaip anksčiau nurodytas CSS kodas gali būti perrašytas į LESS.

@pirma: #c6382f;
@antra: #800800;

a { color: @pirma; text-decoration: none; }
a:hover { color: @antra; text-decoration: underline; }

#blokas { width: 400px; height: 200px; border: 1px solid @pirma; }
#blokas:hover { border-color: @antra; }

#nuorodos { width: 250px; background: @pirma; padding: 5px; }
#nuorodos:hover { background: @antra; }

Taigi šiuo atveju norėdami pakeisti spalvas, turime tik pakeisti kintamųjų reikšmes failo pradžioje! Beje, atkreipkite dėmesį, jog kintamojo reikšmė nėra tarp kabučių kaip įprasta programavimo kalbose priskiriant eilutės tipo (angl. „string“) duomenis. Taip pat nepamirškite, kad kintamieji turėtų būti informatyvūs tiek jums, tiek kitiems, kurie dirbs su dizainu. Rekomenduoju kintamųjų varduose nedėti nestandartinių simbolių. Jeigu kintamojo negalite tiksliai įvardinti vienu žodžiu, atskirkite juos minuso ženklu.

@pirma-spalva: #c6382f;
@antra-spalva: #800800;

Funkcijos (mixins)

Čia turime omenyje ne tikrąsias funkcijas, kurias sutinkame programavimo kalbose, tačiau šiek tiek kitokią koncepciją, apie kurią galite paskaityti Vikipedijoje. Tačiau mes vadinsime tai tiesiog funkcijomis patogumo dėlei.

Tad kuo naudingos funkcijos LESS sintaksėje? Paprastai sakant, galime priskirti grupę savybių su reikšmėmis, kurios nurodomos kaip funkcijos parametrai. Elementariausias pavyzdys — apvalinti kampai su CSS3. Kadangi skirtingos naršyklės vis dar naudoja prefiksus (priešdėlius) prie border-radius savybės, bendrai turime iš viso nurodyti 3 savybes: border-radius, -webkit-border-radius ir -moz-border-radius.

selektorius 
{
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

Tai, savaime suprantama, nelabai patogu, ypatingai tada, kai nusprendžiame pakeisti reikmę, o tai reiškia, kad turime ją pakeisti visose trijose savybėse. Su LESS galime aprašyti funkciją, kuri priima vieną parametrą apvalinimo reikšmei, o funkcijos viduje yra visos trys savybės.

.apvalinti-kampai (@apvalinimas: 5px) 
{
	border-radius: @apvalinimas;
	-webkit-border-radius: @apvalinimas;
	-moz-border-radius: @apvalinimas;
}

Atkreipkite dėmesį, jog taip pat nurodėme numatytąją apvalinimo reikšmę, o tai reiškia, kad jeigu norime apvalinimo 5px, tai iškviesdami funkciją nebūtinai turime nurodyti parametrą.

.apvalinti-kampai (@apvalinimas: 5px) 
{
	border-radius: @apvalinimas;
	-webkit-border-radius: @apvalinimas;
	-moz-border-radius: @apvalinimas;
}

/* Blokas apvalinamas 5px */
#pirmas-blokas
{
	width: 200px;
	height: 200px;
	.apvalinti-kampai();
}

/* Blokas apvalinamas 10px */
#antras-blokas
{
	width: 300px;
	height: 150px;
	color: red;
	.apvalinti-kampai(10px);
}

Paprastesnė hierarchija

Tarkime, turime tokį hierarchišką CSS kodą:

#meniu 
{
	width: 100%;
	height: 40px;
}

#meniu ul 
{
	font-size: 1.2em;
}

#meniu ul li
{
	display: inline;
}

#meniu ul li a 
{ 
	display: block;
	float: left;
	padding: 5px 8px;
	color: orange;
}

#meniu ul li a:hover
{
	color: blue;
}

Su LESS galime šį kodą perrašyti taip, kad jis vizualiai atrodytų logiškesnis ir lengviau suprantamas.

#meniu
{
	width: 100%;
	height: 40px;

	ul
	{
		font-size: 1.2em;

		li
		{
			display: inline;

			a
			{
				display: block;
				float: left;
				color: orange;
				&:hover { color: blue; }
			}
		}
	}
}

Jeigu neturime itin daug savybių, galime kodą užrašyti dar paprasčiau.

#meniu 			{ width: 100%; height: 40px;
  ul 			{ font-size: 1.2em;
    li 			{ display: inline;
      a 		{ display: block; float: left; color: orange;
        &:hover	{ color: blue; }
      }
    }
  }
}

Atkreipkite dėmesį, jog turime gan neįprastą žymėjimą prie pseudo-klasės (:hover), t.y. &:hover. „Ampersandas“ (&) reiškia, kad vietoje jo bus paimtas tėvinio selektoriaus pavadinimas (šiuo atveju tai a elementas).

Aritmetinės operacijos

Atrodo juokinga, tačiau iš tikrųjų kartais koduojant dizainą reikia išsitraukti skaičiuotuvą savybių reikšmėms apskaičiuoti. Su LESS galime to išvengti atlikdami aritmetines operacijas kode!

@bazinis-ilgis: 960px;
@teksto-dydis: 12px;
@spalva: #111;

#blokas
{
	width: @bazinis-ilgis / 2;
	height: @bazinis-ilgis - 400;
	font-size: @teksto-dydis + 2;
	color: @spalva * 3;
}

Naršyklė po kompiliavo gaus tokį CSS kodą:

#blokas
{
	width: 480px;
	height: 560px;
	font-size: 14px;
	color: #333;
}

Taigi tokiu būdu galime palengvinti sau darbą.

Suderinamumas su naršyklėmis

Galiu jus nudžiuginti, jog LESS (o tiksliau LESS JavaScript kompiliatorių) palaiko visos pagrindinės naršyklės, įskaitant ir mūsų taip mylimą IE6, tad galite naudotis LESS praktiškai be jokių problemų.

Apibendrinimas

Naudodamiesi LESS ne tik palengviname darbą, tačiau ir sutrumpiname jo atlikimo laiką bei sukuriame palankias sąlygas lengvam stilių redagavimui ateityje. Norėdami sužinoti daugiau bei panagrinėti sudėtingesnių pavyzdžių, rekomenduoju pasikapstyti oficialiame LESS.js tinklalapyje.

Sėkmės!