@x: red; @x: blue; @z: transparent; @mix: none;
.mixin {
@mix: #989;
} @mix: blue; .tiny-scope {
color: @mix; // #989 .mixin;
}
.scope1 {
@y: orange; @z: black; color: @x; // blue border-color: @z; // black .hidden { @x: #131313; } .scope2 { @y: red; color: @x; // blue .scope3 { @local: white; color: @y; // red border-color: @z; // black background-color: @local; // white } }
}
namespace {
.scoped_mixin() { @local-will-be-made-global: green; .scope { scoped-val: @local-will-be-made-global; } }
}
namespace > .scoped_mixin();
.setHeight(@h) { @height: 1024px; } .useHeightInMixinCall(@h) { .useHeightInMixinCall { mixin-height: @h; } } @mainHeight: 50%; .setHeight(@mainHeight); .heightIsSet { height: @height; } .useHeightInMixinCall(@height);
.importRuleset() {
.imported { exists: true; }
} .importRuleset(); .testImported {
.imported;
}
@parameterDefault: ‘top level’; @anotherVariable: ‘top level’; //mixin uses top-level variables .mixinNoParam(@parameter: @parameterDefault) when (@parameter = ‘top level’) {
default: @parameter; scope: @anotherVariable; sub-scope-only: @subScopeOnly;
}
allAreUsedHere {
//redefine top-level variables in different scope @parameterDefault: 'inside'; @anotherVariable: 'inside'; @subScopeOnly: 'inside'; //use the mixin .mixinNoParam();
} parentSelectorScope {
@col: white; & { @col: black; } prop: @col; & { @col: black; }
} .test-empty-mixin() { } parentSelectorScopeMixins {
& { .test-empty-mixin() { should: never seee 1; } } .test-empty-mixin(); & { .test-empty-mixin() { should: never seee 2; } }
}