157 lines
1.6 KiB
Text
157 lines
1.6 KiB
Text
|
|
.demo (light, @color) {
|
|
color: lighten(@color, 10%);
|
|
}
|
|
.demo (@_, @color) {
|
|
display: block;
|
|
}
|
|
|
|
@switch: light;
|
|
|
|
.class {
|
|
.demo(@switch, #888);
|
|
}
|
|
|
|
// by arity
|
|
|
|
.mixin () {
|
|
zero: 0;
|
|
}
|
|
.mixin (@a: 1px) {
|
|
one: 1;
|
|
}
|
|
.mixin (@a) {
|
|
one-req: 1;
|
|
}
|
|
.mixin (@a: 1px, @b: 2px) {
|
|
two: 2;
|
|
}
|
|
|
|
.mixin (@a, @b, @c) {
|
|
three-req: 3;
|
|
}
|
|
|
|
.mixin (@a: 1px, @b: 2px, @c: 3px) {
|
|
three: 3;
|
|
}
|
|
|
|
.zero {
|
|
.mixin();
|
|
}
|
|
|
|
.one {
|
|
.mixin(1);
|
|
}
|
|
|
|
.two {
|
|
.mixin(1, 2);
|
|
}
|
|
|
|
.three {
|
|
.mixin(1, 2, 3);
|
|
}
|
|
|
|
//
|
|
|
|
.mixout ('left') {
|
|
left: 1;
|
|
}
|
|
|
|
.mixout ('right') {
|
|
right: 1;
|
|
}
|
|
|
|
.left {
|
|
.mixout('left');
|
|
}
|
|
.right {
|
|
.mixout('right');
|
|
}
|
|
|
|
//
|
|
|
|
.border (@side, @width) {
|
|
color: black;
|
|
.border-side(@side, @width);
|
|
}
|
|
.border-side (left, @w) {
|
|
border-left: @w;
|
|
}
|
|
.border-side (right, @w) {
|
|
border-right: @w;
|
|
}
|
|
|
|
.border-right {
|
|
.border(right, 4px);
|
|
}
|
|
.border-left {
|
|
.border(left, 4px);
|
|
}
|
|
|
|
//
|
|
|
|
|
|
.border-radius (@r) {
|
|
both: @r * 10;
|
|
}
|
|
.border-radius (@r, left) {
|
|
left: @r;
|
|
}
|
|
.border-radius (@r, right) {
|
|
right: @r;
|
|
}
|
|
|
|
.only-right {
|
|
.border-radius(33, right);
|
|
}
|
|
.only-left {
|
|
.border-radius(33, left);
|
|
}
|
|
.left-right {
|
|
.border-radius(33);
|
|
}
|
|
|
|
.hola(hello, @hello...) {
|
|
color: blue;
|
|
}
|
|
|
|
#hola {
|
|
.hola(hello, world);
|
|
}
|
|
|
|
.resty(@hello, @world, @the_rest...) {
|
|
padding: @hello @world;
|
|
rest: @the_rest;
|
|
}
|
|
|
|
.defaults(@aa, @bb:e343, @cc: "heah", ...) {
|
|
height: @aa;
|
|
}
|
|
|
|
#defaults_1 {
|
|
.defaults(one);
|
|
.defaults(two, one);
|
|
.defaults(three, two, one);
|
|
.defaults(four, three, two, one);
|
|
}
|
|
|
|
|
|
.thing() { color: green; }
|
|
.thing(...) { color: blue; }
|
|
.thing { color: red; }
|
|
|
|
#aa {
|
|
.thing();
|
|
}
|
|
|
|
#bb {
|
|
.thing;
|
|
}
|
|
|
|
|
|
#cc {
|
|
.thing(1);
|
|
}
|
|
|
|
|
|
|