123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167 |
- .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);
- .hola(jello, world);
- }
- .resty(@hello, @world, @the_rest...) {
- padding: @hello @world;
- rest: @the_rest;
- }
- #nnn {
- .body(10, 10, 10, 10, 10);
- .body(10, 10, 10);
- .body(10, 10);
- .body(10);
- .body();
- }
- .defaults(@aa, @bb:e343, @cc: "heah", ...) {
- height: @aa;
- }
- #defaults_1 {
- .defaults();
- .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);
- }
|