112 lines
1.8 KiB
Plaintext
112 lines
1.8 KiB
Plaintext
@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;});
|
|
} |