本文介绍了组合多个“变换”条目在Less的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有两个mixins,它们都转换为 -webkit-transform

I have two mixins which both convert to -webkit-transform:

.rotate(@deg) {
  -webkit-transform: rotate(@deg);
}

.scale(@factor) {
  -webkit-transform: scale(@factor);
}

当我一起使用它们时:

div {
  .rotate(15deg);
  .scale(2);
}

...(如预期)显示为:

... they (as expected) show up as:

div {
  -webkit-transform: rotate(15deg);
  -webkit-transform: scale(2);
}

这似乎不是有效的CSS,因为第二个优先级高于第一;第一个被丢弃。要组合 transform 条目,它应该是:

This doesn't seem to be valid CSS as the second has precedence over the first; the first is discarded. To combine transform entries it should be:

-webkit-transform: rotate(15deg) scale(2);

如何实现这样的CSS由LESS生成,即多个 transform

How can I accomplish such CSS to be generated by LESS, i.e. multiple transform entries that are combined correctly?

推荐答案

提供您的转换作为单个mixin的参数:

Provide your transforms as arguments for a single mixin:

.transform(@scale,@rotate) {
  -webkit-transform: @arguments;
}

我认为你不能以另一种方式实现这一点,因为解析器将不得不修改代码,这是不可能的。

I think you are not able to achieve this in another way, since the parser would have to modify code afterwards which should not be possible.

这篇关于组合多个“变换”条目在Less的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

10-21 23:19