lesscss - Are mixins also “Lazy loaded” like variables?

问题

I just found out that variables in less are "lazy loaded" (as discribed here: http://lesscss.org/features/#variables-feature-lazy-loading ) in the sense that if you set up a variable, use it and then set it to another value the complied code will use that last set value.

i.e.

@w: 30%;

.myclass {
   width: @w;
}

would compile to:

.myclass {
   width: 50%
}

would the same apply to mixins?

i.e. will

.mycolor() {
   color: red;
}

.myclss {
  .mycolor()
}

.mycolor() {
   color: blue;
}

compile to: (no lazy)

.myclass {
   color:red;
}

or (lazy):

.myclass {
   color:blue;
}

回答1:

No, They are not Lazy-loaded

As noted in a comment, mixins "merge" their values if they have the same name. So your code will produce this:

.myclss {
  color: red;
  color: blue;
}

Which, in the case of calling the same property twice (as your code does), effectively makes the CSS become equivalent to it having been "Lazy-loaded" because the "final" property value is the one used. So the above will be translated by browsers as:

.myclss {
  color: blue;
}

But it is not correct to view it as lazy loading, because if other properties are present, they just merge. So:

.mycolor() {
   color: red;
   opacity: 0.3;
}

.myclss {
  .mycolor()
}

.mycolor() {
   color: blue;
   border: 1px solid black;
}

Becomes:

.myclss {
  color: red;
  opacity: 0.3;
  color: blue;
  border: 1px solid black;
}

True "Lazy-loading" like the variables would have just overwritten the first set of property calls.

来源：https://stackoverflow.com/questions/22426620/lesscss-are-mixins-also-lazy-loaded-like-variables

标签

less

mixins