5

Are there substantial differences between detached ruleset, e.g.

@detached-ruleset: {
  @margin: 1px;
  margin: @margin;
};

and non-parametric mixin? E.g.

.mixin() {
  @margin: 1px;
  margin: @margin;
}

Do they behave the same with nested operators?

The most obvious difference is syntactic (semicolon is mandatory for a ruleset), and the ruleset keeps its variables private, but that's all I could find. The manual doesn't go into details too much on that.

Estus Flask
  • 206,104
  • 70
  • 425
  • 565

1 Answers1

6

The detached ruleset is a variable. For variables in Less the last declaration wins and variables are lazy loaded.

For reusable code you can easily extend the .mixin() by defining a second mixin() with the same name:

.mixin() {
  @margin: 1px;
  margin: @margin;
}

.mixin() {
  color: red;
}

When using a detached ruleset in the above you should repeat all propperties cause the second declaration overrides the first:

@detached-ruleset: {
  @margin: 1px;
  margin: @margin;
};

@detached-ruleset: {
  @margin: 1px;
  margin: @margin;
  color: red;
};

See also: https://stackoverflow.com/a/30384948/1596547

Community
  • 1
  • 1
Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224