Intro til LESS - Stefan Grage

Hvad er LESS og SASS?

LESS og SASS er “higher-level style syntaxes, der giver avancerede CSS features.” Det er CSS preprocessor sprog, som skal kompileres til CSS, før browseren kan rendere siden. Kort sagt byggger LESS videre på CSS og giver mulighed for: Variabler, genbrug af styling-regler (mixins), og man kan lave udregninger on-the-fly. Her vil jeg kun se på LESS.

Da LESS skal kompileres til CSS, skal der bruges et par værktøjer:

LESS biblioteket: http://lesscss.org
Client side compiler til LESS – f.eks. SimpLESS eller codeKit (min favorit)

Og alt det der ellers normalt skal bruges til at lave websites…

LESS og Sass kan nogenlunde det samme – så hvad skal man vælge? Tough one, men se artiklen på css-tricks for at tage et valg – og læs også kommentarerne. Kommentarerne er de vigtigste! Jeg ser kun på LESS her, da det er hurtigere at komme i gang med.

Godt i gang med LESS

LESS kan bruges både client-side og serverside. Her vil jeg kun gøre det client-side.

Først og fremmest skal der inkluderes et LESS-stylesheet, og dertil skal LESS JS-biblioteket inkluderet. LESS kodebiblioteket compiler koden i LESS-stylesheetet.

Det er dog ikke så godt, da vi så er afhængige af JS hos clienten, og giver dårligere performance. I stedet skal filerne kompiles v.hj.a. SimpLESS eller CodeKit. Det gøres ved at trække HELE mappen for ens website over i SimpLESS/CodeKit, og trykke på reload-knappen. Dermed kompiles LESS-stylesheetet til et .CSS-stylesheet. CSS-stylesheetet inkluderes i dit website. Lad SimpLESS/CodeKit være tændt – programmerne står og overvåger websitemappen, og opdaterer dit stylesheet hver gang du skriver nyt i LESS-filen.

Note: SimpLESS kan være lidt ustabil, og fejlrapporteringen er ikke god. Derfor kan jeg anbefale alternativet CodeKit.

Variable

En af de store fordele ved Sass og LESS er variable. Variable er “placeholdere” for værdier, der skal bruges flere gange i CSS’en (f.eks. farveværdier). Hvis f.eks. en farve bruges flere gange, kan den defineres ved hjælp af @ som en variabel i LESS:

@specielfarve: #09F;

Og derefter anvendes i CSS-deklarationerne:

a:hover{color: @specielfarve}

#sidebar {color: @specielfarve}

Så er der kun ét sted at udskifte farven, hvis den skal ændres. Smart!

Ligeledes kan man også lave string/streng, numeric/numeriske og multi-value/multi-værdi variable:

String: @stringvariabel: “ lidt ekstra tekst her”

(bruges med f.eks. :after pseudoselektor til at indsætte noget efter indholdet)

Numeric: @numeriskvariabel: 24px;

Multi: @paddingvariabel: 10px 15px 20px 10px

Mixins

Mixins er når man definerer typisk anvendte egenskaber én gang, og genbruger dem. Eksempelvis en klasse til styling af billeder:

.minBilledMixin{
   padding: 20px;
   background-color: #CCC;
}

Mixin-klassen kan så bruges i andre stylesheet-regler, eksempelvis:

.minThumbnailklasse{
   .minBilledMixin;
   border: 1px solid;
}

Nested styles/rules

Nedarvning af style-sheet regler kan blive drilske. Derfor tilladder LESS “nested rules,” som er regler der i højere grad følger DOM-strukturen, og dermed giver bedre overblik.

.indhold{
 p{ 
 //Child selector CSS-regler (p- elementer i .indhold-klassen)
 } // slutter p
 a{
 //Child selector CSS-regler (a-elementer i .indhold-klassen)
  &:hover{
   //Child & pseudo-class selector CSS-regler            
   // & til pseudo-klasser     
   //a:hover-elementer i .indhold-klassen
  }
 } // slutter a
} // slutter .indhold

Operatorer

Man kan også lave matematiske kalkulationer med LESS – f.eks. tilføje ekstra padding el. lign. Eksempelvis:

@defaultpadding: 10px; // Variabel, der bruges til at give alle elementer, der bruger variablen, 10px padding på alle sider

specielstyling{
   color: @color;

   border: 1px solid blue; // Stylesheet-regler for specielstyling-klassen

   padding: @ defaultpadding @defaultpadding + 10; // top og bottom får 10px padding fra “defaultpadding” variablen - right og left får 20px - altså defaultpadding + 10px
}

Mixins og parametre

Man kan lade en mixin tage imod parametre. Det minder meget om en JS/PHP-funktion. Eksempel med radius:

.border-radius (@radius: 5px){
   -moz-border-radius: @border-radius;
   -webkit-border-radius: @border-radius;
   -ms-border-radius: @border-radius;
   border-radius: @border-radius;
}

Når .border-radius mixinen bruges, vil alle hjørner på det pågældende element få en default radius på fem. Medmindre: Mixinen kaldes med en anden værdi: .border-radius(10px); Så vil default-værdien på fem pixels overskrives til 10px.

Tager en mixin imod flere parametre, og er de ellers opgivet som foreskrevet af w3c, kan man bruge shorthand-ordet “@arguments” til blot at få LESS til at udfylde alle argumenternes værdier til alle egenskaberne. Eks.:

.box-shadow(@x: 1, @y: 2, @blur: 1px, @color: #f90){
   -moz-box-shadow: @arguments;
   -webkit-box-shadow: @arguments;
   -ms-box-shadow: @arguments;
   box-shadow: @arguments;
}

Mixins og pattern matching

Pattern matching går ud på at opfatte en mixin som en variabel – alt efter om der er tale om en situation eller en anden (altså: om det ene eller andet udtryk matches), kan vi anvende forskellige mixins på en deklaration i vores CSS… Eksempel:

/Her oprettes mixins/
.alert(advarsel){ // alert defineret én gang
   @color: #f90;
   color: @color;
   border-color: darken(@color, 10%);
}
.alert(fejl){ // alert defineret anden gang
   @color: red;
   color: @color;
   border-color: darken(@color, 10%);
}
.alert(@_){ // alert defineret tredje gang
   display: block;
   border: 2px solid;
   padding: 5px;
}
/Her bruger vi så vores mixins/
@type: advarsel;
customparagraph{
   .alert(@type); //mixin med parameter - variablen 
   @type tilskrives værdi ovenfor!
}
// #customparagraph får styles på fra den @type, der matcher, samt alert(@)-reglerne. @ betyder “match altid denne, uanset om “advarsel” eller “fejl” matches. Derfor får #customparagraph både @type reglerne på samt @_-reglerne.

Antallet af argumenter skal matche med mixin-kaldets argumenter.

Guarded mixins

Minder meget om pattern matching mixins, men matcher på udtryk (ligninger) i stedet for simple værdier (sandt/falsk). Eksempel:

.text3d(@color) when (lightness(@color) =< 50%){
   //CSS-regler
}

Evt med mere…:

.text3d(@color) when (lightness(@color) > 50%){
   //CSS-regler
}
.text3d(@_){
   //CSS-regler der altid matches…
}

Evt. flere betingelser i hver mixin – adskilles med , (ny betingelse) – opfører sig som || (OR: alt + i på mac)

Indbyggede funktioner

Der er en række funktioner i LESS-biblioteket.

Farver:

lighten(color, amount)
darken(color, amount)
saturate(color, amount)
desaturate(color, amount)
fadein(color, amount)
fadeout(color, amount)
fade(color, amount)
spin(color, amount)
mix(color, amount)

Matematiske:

round(number)
ceil(number)
floor(number)
percentage(number)

Importere filer…

Det kan være en fordel at dele op i flere stylesheet for overskuelighedens skyld. Det gøres ved hjælp af:

@import “importer_filnavn.less”;

Skal gøres før der compiles…

Hva’ så nu?

Det var al LESS-teorien. Nu gælder det bare om at prøve sig frem med det!

Husk at en LESS fil også kan indeholde helt almindelig CSS – det er trods alt det den ender med at compile filerne til. Så synes du at det er en stor omgang til at starte med, kan du tage det bid for bid.

Start med at bruge et par LESS-variable, gå dernæst i gang med at bruge et par mixins, og lad være med at tænke at nu skal al CSS skrives i LESS-format. Tag det bid for bid, og vigtigst af alt: Tag det du kan bruge!