css – 在Less中组合多个“transform”条目

前端之家收集整理的这篇文章主要介绍了css – 在Less中组合多个“transform”条目前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有两个转换为-webkit-transform的mixin:
.rotate(@deg) {
  -webkit-transform: rotate(@deg);
}

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

当我们一起使用它们时:

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

…他们(如预期)显示为:

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

这似乎不是有效的CSS,因为第二个优先于第一个;第一个被丢弃.要组合转换条目应该是:

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

如何完成这样的CSS,由LESS生成,即正确组合的多个转换条目?

解决方法

将您的转换作为单个混合的参数:
.transform(@scale,@rotate) {
  -webkit-transform: @arguments;
}

我想,你也可以通过守卫的帮助来实现将你的单独组合连接成一个组合,但我并不完全确定;)

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

猜你在找的CSS相关文章