104 lines
1.7 KiB
Plaintext
104 lines
1.7 KiB
Plaintext
@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;
|
|
}
|
|
}
|
|
} |