123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104 |
- @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;
- }
- }
- }
|