简体   繁体   中英

LESS detached ruleset vs non-parametric mixin

Are there substantial differences between detached ruleset, eg

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

and non-parametric mixin? Eg

.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.

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM