JOOMLA USER GROUP AARHUS

Variabler

Syntaks

@variabelnavn: værdi;

Beskrivelse

Variabler bruges til at definere værdier for CSS-egenskaber, som man ønsker at bruge flere gange i et stylesheet. Ønsker man fx at bruge 2 bestemte farver til forskellige overskrifter og afsnit, kan man med fordel definere dem i disse 2 variabler:

Eksempel 1

@baseColor1: #01578C;
@baseColor2: #A80303;

I stedet for at skrive fx hex-koden hver gang, kan man nu skrive @baseColor1 eller @baseColor2, som er meget lettere at huske. Desuden kan man nøjes med at ændre hex-koden ét sted, hvis man ønsker at ændre farven for hele sit stylesheet.

Eksempel 2
LESS CSS3

@baseColor1: #01578C;
@baseColor2: #A80303;
@smallFontSize: 12px;
@bigFontSize: 18px;
@thinPadding: 4px;
@thickPadding: 8px;

h1 {
color: @baseColor1;
font-size: @bigFontSize;
padding: @thickPadding;
}

p {
color: @baseColor2;
font-size: @smallFontSize;
padding: @thinPadding;
}

h1 {
color: #01578C;
font-size: 18px;
padding: 8px;
}

p {
color: #A80303;
font-size: 12px;
padding: 4px;
}

Variabler i variabler

En variabel kan også indeholde andre variabler

Eksempel 3

@thinBorder: 1px solid @baseColor2;

Variablerne i eksemplerne er på engelsk for at man tydeligt kan se, hvilke CSS-egenskaber det drejer sig om. Man kan sagtens bruge danske ord, hvis man foretrækker det.

klik her for at læse om mixins