MENU


Detached Rulesets

A detached ruleset is a group of css properties, nested rulesets, media declarations or anything else stored in a variable.
You can even pass a ruleset into a mixin. Parentheses after a detached ruleset call are mandatory.
@detached-ruleset: { background: red; };
.top {
    @detached-ruleset(); 
}


.desktop-and-old-ie(@rules) {
  @media screen and (min-width: 1200px) { @rules(); }
  html.lt-ie9 &                       { @rules(); }
}

header {
  background-color: blue;

  .desktop-and-old-ie({
    background-color: red;
  });
}

.top {
  background: red;
}
header {
  background-color: blue;
}
@media screen and (min-width: 1200px) {
  header {
    background-color: red;
  }
}
html.lt-ie9 header {
  background-color: red;
}
A detached ruleset sees the caller's variables and mixins.
@D: {
   color: @var;
   .m();
};

div {
  @D(); 
  @var: green;
  .m() {
     background: red;
  }
}

div {
  color: #008000;
  background: red;
}
Referencing won't modify detached ruleset scope.
@detached-1: { scope-detached: @one @two; };
.one {
  @one: visible;
  .two {
    @detached-2: @detached-1;
    @two: visible;
  }
}

.use-place {
  .one > .two(); 
  @detached-2();
}

ERROR 1:32 The variable "@one" was not declared.
Unlocking will modify detached ruleset scope.
#space {
  .importer-1() {
    @detached: { scope-detached: @variable; }; // define detached ruleset
  }
}

.importer-2() {
  @variable: value; // unlocked detached ruleset CAN see this variable
  #space > .importer-1(); // unlock/import detached ruleset
}

.use-place {
  .importer-2(); // unlock/import detached ruleset second time
   @detached();
}

.use-place {
  scope-detached: value;
}