Less js：Mixin属性作为另一个mixin的参数？ [英] Less js: Mixin property as an argument of another mixin?

问题描述

如何创建一个使用嵌套mixin属性作为参数的mixin？

How could I create a mixin that uses as an argument a nested mixin property?

我用下面的例子解释自己。

I explain myself with the next example.

我有一个'transition-property'mixin：

I have a 'transition-property' mixin:

.transition-property (@props){
  -webkit-transition-property: @props;
  -moz-transition-property: @props;
  -o-transition-property: @props;
  transition-property: @props;
}

从这个mixin我想使用一个'transform'mixin属性，所以我尝试调用这样：

From this mixin I want to use a 'transform' mixin property, so I tried to call this like:

 .transition-property(~"opacity, .transform");

'.transform'mixin应返回以下值之一：

The '.transform' mixin should return one of the next values:

 transform
 -ms-transform
 -webkit-transform

事情是，我没有找到方法来注入这些属性名称到'transition-property'mixin，有人可以阐明这一点吗？

The thing is that I don't find the way to inject these property names to the 'transition-property' mixin, could someone shed some light on this?

FINAL DESIRED CSS

element {
  -webkit-transition-property: opacity, -webkit-transform;
  -moz-transition-property: opacity, -moz-transform;
  -o-transition-property: opacity, -o-transform;
  transition-property: opacity, transform;
}

推荐答案

，一个一般的注释：使用CSS预处理器（例如LESS，SASS或其他）生成供应商前缀实际上是一个伟大的滥用这些天（真的，没有必要膨胀你的代码的前缀，浪费你的时间写这样的混合，因为 Autoprefixer 等工具， - 无前缀和类似的）。

OK, so first of all, a general remark: using a CSS preprocessor (e.g. LESS, SASS or whatever) to generate vendor prefixes is actually one of the greatests misuses these days (really, there's no need to bloat your code with prefixes and waste your time writing such mixins since tools like Autoprefixer, -prefix-free and similar came in).

这里是一个（种类）通用解决方案它的复杂性我认为这实际上是一个过度，在这里我将使用LESS 1.6.0示例，因为在早期版本中它会更加冗长和hackish）：

Either way here's a (sort of) generic solution (but considering amount of code and its complexity I think it's actually an overkill, here I will use LESS 1.6.0 example because in earlier versions it would be even more verbose and hackish):

// usage:

element1 {
    .vendorize(transition-property; opacity, transform);
}

element2 {
    .vendorize(transition-property; width, box-shadow, color);
}

element3 {
    .vendorize(transition-property; height);
}

// implementation:

// prefixes we want to be used:
@prefixes: -webkit-, -moz-, -o-, ~'';

// here we specialize what values are to be prefixed:
.vendorize-value(transform)  {.true}
.vendorize-value(box-shadow) {.true}
// etc.
.vendorize-value(...) when (default()) {.false} // to handle not prefixed values

// and now the mixin that can apply all of above specializations:
.vendorize(@property, @values) {

    .-1();
    .-1(@i: length(@prefixes)) when (@i > 0) {
        .-1((@i - 1));
        @prefix: extract(@prefixes, @i);
        .-2();
    }

    .-2(@j: length(@values)) when (@j > 0) {
        .-2((@j - 1));
        @value: extract(@values, @j);
        .vendorize-value(@value);
    }

    .false() {@{prefix}@{property}+: @value}
    .true()  {@{prefix}@{property}+: ~'@{prefix}@{value}'}
}

可以简化一下，如果你只需要 transform 为前缀，但仍然看起来太疯狂）。

(Of course it can be simplified a bit if you need only transform to be prefixed but still looks too crazy).

upd：修正了一些错误。

upd: fixed some errors.

这篇关于Less js：Mixin属性作为另一个mixin的参数？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！