"Nested rules"
Syntaks
selektor { |
En (CSS-)selektor kan være et tag, et id, en class eller en pseudo-class.
Beskrivelse
tekst kommer snart
Eksempel 1
article { |
article { article hgroup { article hgroup h1 { article hgroup h2 { |
Mixins
Syntaks
.mixinNavn { |
Beskrivelse
Lige som det er tilfældet med variabler, kan mixins bruges til at at definere værdier for CSS-egenskaber, som man ønsker at bruge flere gange i et stylesheet. Mixins har desuden den fordel, at de kan indeholde flere egenskaber med tilhørende værdier. For at undgå forveksling med classes, som jo også starter med punktum, kan man fx vælge at skrive mixins med camelcase-notation (ord nr. 2 starter med stort bogstav, resten er små bogstaver).
Eksempel 1
.greenBox { nav { aside { article { |
nav { aside { article { |
Mixins i mixins
Et mixin kan indeholde andre mixins:
Eksempel 2
.greenBox { .introduction { |
Mixins i CSS3
En del CSS3-egenskaber skal skrives på flere måder for at kunne læses af forskellige browsere. Her er mixins en stor hjælp:
Eksempel 3
.box { article { aside {
|
article { aside { |
klik her for at læse om "nested rules"
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; |
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
@baseColor1: #01578C; h1 { p { |
h1 { p { |
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
LESS tutorial
Hvorfor lære LESS?
LESS er et hjælpeværktøj til CSS. Som navnet antyder, kan LESS spare dig for mange timers arbejde. Den tid du bruger på at lære principperne i LESS, er hurtigt indhentet, når du efterfølgende anvender LESS i praksis.
Forudsætninger
Et grundlæggende kendskab til CSS er nødvendigt for at forstå denne tutorial.
Før vi går i gang
- Din Joomla-version skal som minimum være 2.5.
- Browsere kan ikke læse LESS, så dine LESS-filer skal konverteres til CSS. Derfor skal du installere og aktivere programudvidelsen" LESS compiler". Du kan hente den her. Husk at aktivere den under programudvidelser.
klik her for at læse om variabler
Denne tutorial er endnu ikke færdig. Der kommer flere underemner, og de nuværende underemner vil blive revideret, hvis der er behov for det.