123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112 |
- @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;});
- }
|