JOOMLA USER GROUP AARHUS

"Nested rules"

Syntaks

selektor {
   egenskab: værdi;
   selektor {
      egenskab: værdi;
      selektor {
         egenskab: værdi;
      }
   }
}

En (CSS-)selektor kan være et tag, et id, en class eller en pseudo-class.

Beskrivelse

tekst kommer snart

Eksempel 1
 LESS  CSS3

article {
   background-color: #e2e2e2;
   padding: 8px;
   hgroup {
      color: #014F80;
      h1 {
         font-size: 20px;
      }
      h2 {
      font-size: 16px;
      }
   }
}

article {
   background-color: #e2e2e2;
   padding: 8px;
}

article hgroup {
   color: #014F80;
}

article hgroup h1 {
   font-size: 20px;
}

article hgroup h2 {
   font-size: 16px;
}

Mixins

Syntaks

.mixinNavn {
   egenskab: værdi;
   egenskab: værdi;
   osv.
}

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
 LESS  CSS3

.greenBox {
   border: 2px solid green;
   border-radius: 8px;
   margin: 10px;
   padding: 4px;
}

nav {
   .greenBox;
   background-color: #eee;
}

aside {
   .greenBox;
   color: #006200;
}

article {
   .greenBox;
   background-color: #006200;
}

nav {
   border: 2px solid green;
   border-radius: 8px;
   margin: 10px;
   padding: 4px;
   background-color: #eee;
}

aside {
   border: 2px solid green;
   border-radius: 8px;
   margin: 10px;
   padding: 4px;
   color: #006200;
}

article {
   border: 2px solid green;
   border-radius: 8px;
   margin: 10px;
   padding: 4px;
   background-color: #006200;
}

Mixins i mixins

Et mixin kan indeholde andre mixins:

Eksempel 2

.greenBox {
   border: 2px solid green;
   border-radius: 8px;
   margin: 10px;
   padding: 4px;
}

.introduction {
   .greenBox;
   background-color: #dedede;
   font-size: 12px;
}

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
less-mellem css3-logo

.box {
   border-radius: 4px;
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   background: -moz-linear-gradient (top, #eee, #ccc);
   background: -webkit-linear-gradient (top, #eee, #ccc);
   background: -webkit-gradient (linear, 0% 0%, 0% 100%, from(#ccc), to(#eee));
   background: -ms-linear-gradient (top, #eee, #ccc);
   background: -o-linear-gradient(top, #eee, #ccc);
}

article {
   .box;
   margin: 5px;
   padding: 5px;
}

aside {
   .box;
   margin: 10px;
   padding: 0;
}

 

article {
   border-radius: 4px;
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   background: -moz-linear-gradient (top, #eee, #ccc);
   background: -webkit-linear-gradient (top, #eee, #ccc);
   background: -webkit-gradient (linear, 0% 0%, 0% 100%, from(#ccc), to(#eee));
   background: -ms-linear-gradient (top, #eee, #ccc);
   background: -o-linear-gradient(top, #eee, #ccc);
   margin: 5px;
   padding: 5px;
}

aside {
   border-radius: 4px;
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   background: -moz-linear-gradient (top, #eee, #ccc);
   background: -webkit-linear-gradient (top, #eee, #ccc);
   background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ccc), to(#eee));
   background: -ms-linear-gradient (top, #eee, #ccc);
   background: -o-linear-gradient (top, #eee, #ccc);
   margin: 10px;
   padding: 0;
}

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;
@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

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.