LESS Demo

<isol>

!!! Listing 1: Kopf mit Less-Einbindung

<head>
  <title>LESS Demo</title>
  <meta charset="UTF-8">
  <link rel="stylesheet/less" type="text/css" href="stylesheet.less">
  <script type="text/javascript" src="less.min.js"></script>
</head>

!!! Listing 2: stylesheet.less

!!! "stylesheet.less" bitte kursiv

 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
  }
}