css - Mixin 属性作为另一个 mixin 的参数？

Question

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

我用下一个例子来解释自己。

我有一个“过渡属性”mixin:

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

从这个 mixin 我想使用一个“转换”mixin 属性，所以我试着这样调用它:

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

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

 transform
 -ms-transform
 -webkit-transform

问题是我找不到将这些属性名称注入(inject)“transition-property”mixin 的方法，有人可以解释一下吗？

最终需要的 CSS

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

Answer 1

好的，首先，一般性评论:使用 CSS 预处理器(例如 LESS、SASS 或其他)生成供应商前缀实际上是当今最严重的误用之一(真的，没有必要让你的代码膨胀前缀并浪费你的时间编写这样的 mixin，因为像 Autoprefixer ， -prefix-free 和类似的工具出现了)。

无论哪种方式，这都是一个(某种)通用解决方案(但考虑到代码量及其复杂性，我认为这实际上是一种矫枉过正，在这里我将使用 LESS 1.6.0 示例，因为在早期版本中它会更加冗长和骇人听闻):

// 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}'}
}

(当然如果你需要only transform 做前缀，当然可以简化一点但是看起来还是太疯狂了)。

更新:修复了一些错误。