120 lines
1.6 KiB
Text
120 lines
1.6 KiB
Text
// these are the demos from the lessphp homepage
|
|
|
|
default {
|
|
@base: 24px;
|
|
@border-color: #B2B;
|
|
|
|
.underline { border-bottom: 1px solid green }
|
|
|
|
#header {
|
|
color: black;
|
|
border: 1px solid @border-color + #222222;
|
|
|
|
.navigation {
|
|
font-size: @base / 2;
|
|
a {
|
|
.underline;
|
|
}
|
|
}
|
|
.logo {
|
|
width: 300px;
|
|
&:hover { text-decoration: none }
|
|
}
|
|
}
|
|
}
|
|
|
|
variables {
|
|
@a: 2;
|
|
@x: @a * @a;
|
|
@y: @x + 1;
|
|
@z: @x * 2 + @y;
|
|
|
|
@nice-blue: #5B83AD;
|
|
@light-blue: @nice-blue + #111;
|
|
|
|
@b: @a * 10;
|
|
@c: #888;
|
|
@fonts: "Trebuchet MS", Verdana, sans-serif;
|
|
|
|
.variables {
|
|
width: @z + 1cm; // 14cm
|
|
height: @b + @x + 0px; // 24px
|
|
color: @c;
|
|
background: @light-blue;
|
|
font-family: @fonts;
|
|
}
|
|
}
|
|
|
|
mixins {
|
|
.bordered {
|
|
border-top: dotted 1px black;
|
|
border-bottom: solid 2px black;
|
|
}
|
|
#menu a {
|
|
color: #111;
|
|
.bordered;
|
|
}
|
|
|
|
.post a {
|
|
color: red;
|
|
.bordered;
|
|
}
|
|
}
|
|
|
|
nested-rules {
|
|
#header {
|
|
color: black;
|
|
|
|
.navigation {
|
|
font-size: 12px;
|
|
}
|
|
.logo {
|
|
width: 300px;
|
|
&:hover { text-decoration: none }
|
|
}
|
|
}
|
|
}
|
|
|
|
namespaces {
|
|
#bundle {
|
|
.button {
|
|
display: block;
|
|
border: 1px solid black;
|
|
background-color: grey;
|
|
&:hover { background-color: white }
|
|
}
|
|
}
|
|
#header a {
|
|
color: orange;
|
|
#bundle > .button; // mixin the button class
|
|
}
|
|
}
|
|
|
|
mixin-functions {
|
|
@outer: 10px;
|
|
@class(@var:22px, @car: 400px + @outer) {
|
|
margin: @var;
|
|
height: @car;
|
|
}
|
|
|
|
@group {
|
|
@f(@color) {
|
|
color: @color;
|
|
}
|
|
.cool {
|
|
border-bottom: 1px solid green;
|
|
}
|
|
}
|
|
|
|
.class(@width:200px) {
|
|
padding: @width;
|
|
}
|
|
|
|
body {
|
|
.class(2.0em);
|
|
@group > @f(red);
|
|
@class(10px, 10px + 2);
|
|
@group > .cool;
|
|
}
|
|
}
|
|
|