更改混音中的单位

Question

假设我有一个 LESS mixin 可以将任何单位更改为 vw。

.change-unit (@property, @value) {
  @{property}: unit(@value, vw);
}

然后调用 .change-unit(width, 10px) 将导致 width: 10vw;

我想以类似的方式将 px 更改为 vw，并在滤镜中使用模糊效果。

如果在调用 .change-unit(filter, blur(5px)) 之后我想得到 filter: blur(5vw);，我应该如何更改我的 mixin？这可能吗？

Answer 1

您可以在使用修改值的过滤器时添加第三个参数：

.change-unit (@property, @value) {
  @{property}: unit(@value, vw);
}

.change-unit (@property, @value, @function) {
  @converted: unit(@value, vw);
  @{property}: ~'@{function}(@{converted})';
}

#no-filter {
    .change-unit(width, 10px);
}

#filter {
    .change-unit(filter, 5px, blur); 
}

大多数时候你会按原样使用mixin，但是当你需要使用一个函数时，你只需添加函数的名称作为第三个参数。

更改混音中的单位

Change unit in a mixin

less