Preprocessoren Less.js med eksempler

Når hjemmesiden layoutes ved hjælp af CSS, er der ofte mange gentagelser i koden - for eksempel bruges de samme farver og stylingen for tekst igen og igen i mange af websitets elementer.

Det kan være tidskrævende og kedsommeligt at gentage de samme linier kode i stylesheet'et, så derfor har kloge hjerner udviklet metoder til at omskrive CSS'en, så styling som bruges ofte ved hjælp af små "regler" let og hurtigt kan indsættes i sheetet - stylingen for et enkelt element bliver dermed let at overskue, og kan reduceres til måske ganske få liner.

Der findes flere forskellige typer af preprocessorer - nogle bruger PHP som fundament, mens andre bruger Javascript. Hver preprocessor benytter egen syntaks til at skrive "regler" med.

2 meget populære preprocessorer er SASS og Less.js - mens syntaksen i de 2 preprocessorer minder en del om hinanden, er Less.js klart den letteste at installere, og SASS den med de fleste muligheder.

Et eksempel på en "regel" i en preprocessor kan være en omskrivning af de 3 værdier tilhørende selectoren 'border':

border: 1px solid red;

Når man som jeg bruger 'border' på næsten alle elementer i layout-processen, bliver det ret irriterende at skrive alle 3 værdier igen og igen - især når det oftest kun er farven der skal ændres.

I en situation som denne, er det smart at have mulighed for at reducere koden ved hjælp af en preprocessor - her er "reglen" udformet ved hjælp af preprocessorem 'Less.js'. Læg mærke til hvordan rækkefølgen af værdierne har skiftet plads, så den værdi jeg oftest ændrer er placeret som den første:

.bdr(@color:red, @width:1px, @type:solid){
    border:@arguments;
}

Nu kan jeg meget let skifte farve-værdien - ønsker jeg for eksempel en blå i stedet for en rød 'border', er alt jeg behøver at skrive 'blue' - de 2 øvrige værdier er allerede definerede i reglen ovenfor:

header {
.bdr(blue);
	width: 300px;
	height: 300px;
	margin: 0 auto;
	background: grey;
}

Bredden af 'border' kan stadig defineres, men det er nødvendigt at definere den første værdi i "reglen", før den næste kan defineres - her sættes farven til 'blue' og bredden til '4px' i stedet for '1px' som angivet i reglen:

header {
.bdr(blue, 4px);
	width: 300px;
	height: 300px;
	margin: 0 auto;
	background: grey;
}

Så vil jeg ændre udformningen af 'border' fra 'solid' til 'dotted', er det altså nødvendigt at medtage de 2 forreste værdier:

header {
.bdr(blue, 4px, dotted);
	width: 300px;
	height: 300px;
	margin: 0 auto;
	background: grey;
}

Der findes mange forskellige muligheder for opstilling af "regler" - nogle er mere komplicerede end andre, og nogle "regler" er måske ikke umagen værd med tanke på, at "reglerne" alligevel skal omskrives til almindelig browser-venlig CSS, når hjemmesiden skal på internettet.

Her er en rigtig god dansk introduktion til hvordan man opstiller regler i Less.js.

For at afvikle Less.js lokalt på computeren kræves der en test-server som WAMP. Herefter skal Less.js installeres, hvilket kan gøres på flere måder:

• med Node.js som fundament
• ved at bruge javascriptet Less.js

Medmindre Node.js skal bruges i projektet alligevel, er det lettest at nøjes med Javascript-delen, når Less skal sættes op i computeren.

Download Less.js herfra i en minified version, og placer Less.js i for eksempel mappen "scripts". Indsæt derefter et link til scriptet i bunden af sidens body:

Link til Less.js

<script src="/scripts/less.js"></script>

Åbn et nyt stylesheet, og navngiv det med endelsen '.less' – indsæt et link til sheet'et i head af siden. Læg mærke til at 'rel'-delen af tag'et skal tilføjes ”/less” - det er vigtigt, at får dette tilføjes, ellers vil Less.js ikke fungere:

Link til less-stylesheet:

<link rel="stylesheet/less" href="/css/main.less">

Forskellige typer stylesheets

Bruger hjemmesiden stylesheets med både '.css'- og '.less'-endelser, KAN der opstå problemer med renderingen i browserne, når elementer fra begge sheets "blandes" i HTML.

Navngiv derfor alle hjemmesidens stylesheets med endelsen '.less', når Less.js er i brug:

Eksempel på blanding af stylesheets der kan give problemer:

<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet/less" href="/fonts/text.less">

<header>  <!-- 'header' placeret i main.css -->
	<h1>Dette er en overskrift</h1>  <!-- 'h1' placeret i text.less --> 
</header> 

Less.js bør nu være klar til at begynde at arbejde med. Der kan oprettes en HTML-side og laves en hurtig test for at tjekke, om tingene virker som de skal - fungerer tingene ser det sådan ud:

• når baggrundsfarven på siden er gul downloades og virker JQuery
• når farven på bogstaverne i overskriften er røde virker Less.js

Opsætning af HTML til test:

<!doctype html>
<head>
<meta charset="utf-8" /> 
<link rel="stylesheet/less" href="less/main.less">
</head>
<body>
	<h1>Er overskriften rød?</h1>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="scripts/less.js"></script>
<script>
$(document).ready(function() {
	$('body').css({'background':'yellow'});
});
</script>
</body>
</html>

Indsæt i "main.less" til test:

	
@red: #FF0000;  /* LESS-VARIABEL = RØD */

h1 {
	color: @red; /* LESS-VARIABEL INDSAT I h! */
}

Ulempen ved at bruge en preprocessor er, at browserne ikke kan læse og forstå "reglerne". Derfor omskriver preprocessoren alle "regler" til almindelig CSS, før hjemmesiden kan vises i browseren. Omskrivningen tager lidt tid med det resultat, at visningen af hjemmesiden bliver tydeligt forsinket.

Dette er som udgangspunkt ikke et problem, mens hjemmesiden stadig er under udvikling lokalt på min egen computer. Men lige så snart hjemmesiden lægges ud på en server og adgangen sker via internettet, vil forsinkelsen blive generende for en besøgende.

Alternativet til at lade preprocessoren håndtere omskrivningen er, at omskrive "reglerne" allerede før stylesheetet lægges ud på serveren - på denne måde undgås forsinkelsen, da stylesheetet nu består af almindelig browser-venlig CSS, og kan renderes straks.

Skal omskrivningen af preprocessorens regler ske før hjemmesiden lægges på serveren, er det nødvendigt at bruge en såkaldt 'compiler' - et værktøj som omskriver preprocessorens "regler" til almindelig CSS.

Der findes en række forskellige typer af compilere: Man kan downloade 'compileren' som et stykke software - der findes både versioner som er freeware og mod betaling - eller man kan bruge en online-compiler.

Et ultra-simpel freeware "compiler" er Winless - se en beskrivelse af funktionerne her.

Bruger jeg stylesheets med filendelsen '.less' sammen med Dreamweaver, vil jeg miste nogle af Dreamweavers indbyggede funktioner - formodentlig vil Less.js fungere fint, men da Dreamweaver ikke genkender endelsen '.less', vil programmet ikke vise farver på koden i stylesheet'et, og heller ikke komme med automatiske forslag, når der skrives.

Der findes flere løsninger på problemet:

• indstille Dreamweaver til acceptere '.less'-filer (se hvordan på engelsk)
• være lidt kreativ i forhold til mappestruktur og navngivning af filer

Skal jeg bruge Less.js på den "kreative" måde sammen med Dreamweaver, kan jeg benytte stylesheets med endelsen '.less.css' mens hjemmesiden udvikles lokalt, og almindelige 'css'-stylesheets når hjemmesiden lægges på internettet - se en grafisk illustration af hele opsætningen nederst på siden.

For overskuelighedens skyld kan de 2 typer stylesheets '.css' og '.less.css' placeres i forskellige mapper - start med at oprette en mappe til 'less.css'-filerne:

Når hjemmesiden skal lægges på en server og kunne findes på internettet, bruges en 'compiler' til at omskrive 'less.css'-filerne til almindelig browser-venlig '.css':