JOOMLA USER GROUP AARHUS

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"