@import reset.css;
@import "test2.less"
@light-blue: #111 + #111;
@default-border: .4em;
@max-border: 2em;
.func1(@v1) {
@v1 * 2;
}
.func2(@v2) {
border: @v2 + 1 solid red;
}
/**
* First comment
**/
.bordered (@radius: 3px; @shadow-color: rgba(100, 100, 100, .5)) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
box-shadow: 0 0 @radius @shadow-color;
-moz-box-shadow: 0 0 @radius @shadow-color;
-webkit-box-shadow: 0 0 @radius @shadow-color;
}
#header, #content {
// second comment
@red-color: #abcdef + #111; // other comment
a:active, a:hover {
text-decoration: none; // one more comment
border: @default-border + .2 solid black;
background: url(some/file.png) left center repeat-x;
}
color: @light-blue * 2;
.bordered ( 5px; );
:hover { color: @red-color; }
.item {
color: #af6788;
}
&.item {
color: red;
}
}
#nav {
margin: min(@max-border, 1em, .5em);
color: darken(#ccc, 20%); // same as lighten(#ccc, -20%)
background: greyscale(#f00) dataurl(test.gif);
}
.foo { &.bar { color: black }}
input{
width: 100px;
&[type=text]{
width: 200px;
}
}
@font-face {
font-family: SketchRockwell;
src: url(‘SketchRockwell.ttf’);
}
@-webkit-keyframes greenPulse {
from { background-color: #749a02; -webkit-box-shadow: 0 0 9px #333; }
50% { background-color: #91bd09; -webkit-box-shadow: 0 0 18px #91bd09; }
to { background-color: #749a02; -webkit-box-shadow: 0 0 9px #333; }
}
.function-tests {
border: max(min(3px, 10px), 7px, round(8.49px)); // nested functions
color: rgb( 3, 3 ,3) * 3;
.bordered(;#aaa);
outline: if(@max-border < 2.5em, 2.5em - @max-border, none);
}
p:after {
@if(@max-border > 3em) {
content: "max border is > 3em";
} @elseif(@max-border < 3em) {
content: "max border is < 3em";
} @else {
content: "max border is = 3em";
}
}
|