lesscss-mixins是否也“延迟加载"?喜欢变量吗?

本文介绍了lesscss-mixins是否也“延迟加载"?喜欢变量吗?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我刚刚发现less中的变量是延迟加载的"(如此处所述: http://lesscss.org/features/#variables-feature-lazy-loading )，如果您设置了变量，请先使用它，然后将其设置为另一个值，编译后的代码将使用该变量最后设置的值.

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.

即

@w: 30%;

.myclass {
   width: @w;
}

将编译为:

.myclass {
   width: 50%
}

mixins是否也一样?

would the same apply to mixins?

即将会

.mycolor() {
   color: red;
}

.myclss {
  .mycolor()
}

.mycolor() {
   color: blue;
}

编译为:(不偷懒)

.myclass {
   color:red;
}

或(懒惰):

.myclass {
   color:blue;
}

否，它们不是延迟加载的

如注释中所述，如果混入名称相同，则它们会合并"它们的值.因此，您的代码将产生以下结果:

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

在两次调用同一属性的情况下(如您的代码一样)，有效地使CSS等效于被延迟加载"的CSS，因为"final"属性值就是所使用的属性值.因此，以上内容将被浏览器翻译为:

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

成为:

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

这篇关于lesscss-mixins是否也“延迟加载"?喜欢变量吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

the