!!! Listing 1: Kopf mit Less-Einbindung
LESS Demo
!!! Listing 2: stylesheet.less
1 @colorWhite: #fff;
2 @colorDarkGrey: #333;
3 @colorLightGrey: #ccc;
4 @colorError: #c00;
5
6 @widthBox: 500px;
7 @paddingBox: 20px;
8 @borderBox: 1px;
9
10 .shadow(@width:10px,@color:#000){
11 -webkit-box-shadow: 0 0 @width @color;
12 -moz-box-shadow: 0 0 @width @color;
13 -ms-box-shadow: 0 0 @width @color;
14 -o-box-shadow: 0 0 @width @color;
15 box-shadow: 0 0 @width @color;
16 }
17
18 .borderRadius(@radius:0){
19 -webkit-border-radius:@radius;
20 -moz-border-radius:@radius;
21 -o-border-radius:@radius;
22 -ms-border-radius:@radius;
23 border-radius:@radius;
24 }
25
26 #boxShadow{
27 .big { .shadow(60px,@colorLightGrey); }
28 }
29
30 #borderRadius {
31 .tiny { .borderRadius(3px); }
32 .big { .borderRadius(10px); }
33 }
34
35 #fonts {
36 .Helvetica(){font-family:Helvetica,Arial,sans-serif;}
37 .Verdana(){font-family:Verdana,Arial,sans-serif;}
38 }
39
40 body {
41 background: @colorWhite;
42 color: @colorDarkGrey;
43 padding: 100px 0 0;
44 #fonts .Verdana;
45 }
46
47 .box {
48 margin: 0 auto;
49 border: @borderBox solid @colorLightGrey;
50 padding: @paddingBox;
51 width: @widthBox - 2 * @paddingBox - 2 * @borderBox;
52 #boxShadow .big;
53 #borderRadius .big;
54 #fonts .Helvetica;
55 &:hover{
56 color: lighten(@colorDarkGrey,20%);
57 }
58 h1 {
59 text-align: center;
60 }
61 :last-child {
62 margin-bottom: 0;
63 }
64 }
65
66
67 p {
68 @lineheight: 16px;
69 margin: 0 0 @lineheight;
70 line-height: @lineheight;
71 &.error {
72 padding: 10px 20px;
73 background: @colorError;
74 color: @colorWhite;
75 text-align: center;
76 #borderRadius .tiny;
77 }
78 + p{
79 border-top: @borderBox solid @colorLightGrey;
80 padding-top: @lineheight;
81 }
82 }
!!! Listing 3: Mixin für Header und Footer
#header {
#metanav {
position: absolute;
top: 0;
/* weitere angaben zum layout */
}
}
#footer {
#footernav {
#header #metanav; // Einfügen der #metanav Regeln
top: auto; bottom: 0; // Überschreiben der Positionierung
}
}