For at gøre css mere dynamisk er der udviklet såkaldte preprocessorer – der er to systemer Less og Sass som tilføjer dynamiske features til udviklingen af stylesheets. Egentligt er det meget simpelt – det er simple funktioner som er bygget ind i Less og Sass som gør at man kan angive variable – farvenavne mv som så køres ud som et almindeligt stylesheet. Css’en er den samme – man får bare nogle smarte funktioner som gør det hurtigere og mere effektivt at skrive css.

Som i så mange andre tilfælde er der to systemer som variere lidt: Less er ret brugevenligt med en god tutorial og let at sætte i spil. Sass virker pt. lidt mere utilgængeligt men har flere funktioner. Men i pricippet fungere de meget på samme måde! Lidt forskel i syntax og funktionalitet med basis er det samme.

Man skriver sit style sheet i formatet Less og når man gemme Sass-filen – vil preprocessoren generer en almindelig css-fil. Og til Sublime text kan man få en udvidelse til at vise farvekoder på Less syntaxen.

Preprocessorern Crunch vil hele tiden opdatere css-filen når man lave ændringer i less-filen:

Sass er det andet preprocessor sprog:

Det kan lidt mere en less og ser ud til at vinde kampen pt : less kan kompileres vha en række programmer bl.a. Scout prøv at hente den og lav en testmappe med en style.scss fil og en style.css fil i Scout skal du nu pege på mappen med filerne. Når du har skrevet din første scss skal du kører preprocessoren. Den vil så genere en css-fil som kan læses af browseren.

/*variable*/
 
$bordecolor: #34ee22;
$green:#00FF88;
$border: 1px solid $bordecolor;
$body-color:#66ffb8;
 
h1 {color:$green;
border:$border;
}
 
/*mixin*/
 
@mixin default-type {
margin-bottom: 20px;
font-size: 14px;
line-height: 1.5;
}
 
p {
@include default-type;
}
 
*nesting*/
 
ul {
margin: 10px 0;
padding: 10px 0; }
ul li {
font-size: 2em;
line-height: 1.4; }
ul li p {
color: #333; }
 
/*nest pseudo-selector med &*/
 
a {font-weight:bold;
color:green;
 
&:hover {color:red;}
 
}