@ruleset: {
color: black; background: white; };
@a: 1px; .wrap-mixin(@ruleset) {
@a: hidden and if you see this in the output its a bug; @b: visible; @d: magic-frame; // same behaviour as mixin calls - falls back to this frame .wrap-selector { @c: visible; @ruleset(); visible-one: @b; visible-two: @c; }
};
.wrap-mixin({
color: black; one: @a; @b: hidden and if you see this in the output its a bug; @c: hidden and if you see this in the output its a bug; four: @d;
});
.wrap-mixin(@ruleset: {
color: red;
});
.wrap-mixin(@ruleset);
.desktop-and-old-ie(@rules) {
@media screen and (min-width: 1200) { @rules(); } html.lt-ie9 & { @rules(); }
}
header {
background: blue; .desktop-and-old-ie({ background: red; });
}
.wrap-mixin-calls-wrap(@ruleset) {
.wrap-mixin(@ruleset);
};
.wrap-mixin({
test: extra-wrap; .wrap-mixin-calls-wrap({ test: wrapped-twice; });
});
.wrap-mixin({
test-func: unit(90px); test-arithmetic: unit((9+9), px);
}); // without mixins @ruleset-2: {
b: 1;
}; .without-mixins {
@ruleset-2();
} @my-ruleset: {
.my-selector { @media tv { background-color: black; } } };
@media (orientation:portrait) {
@my-ruleset(); .wrap-media-mixin({ @media tv { .triple-wrapped-mq { triple: true; } } });
} .wrap-media-mixin(@ruleset) {
@media widescreen { @media print { @ruleset(); } @ruleset(); } @ruleset();
} // unlocking mixins @my-mixins: {
.mixin() { test: test; }
}; @my-mixins(); .a {
.mixin();
} // as mixin argument default .mixin-definition(@a: {}; @b: {default: works;};) {
@a(); @b();
} .argument-default {
.mixin-definition(); .mixin-definition({direct: works;}; @b: {named: works;});
}