Question

我怎么能创建一个mixin作为参数使用嵌套的mixin属性？

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

我有一个'transition-property'mixin：

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

从这个mixin我想使用'transform'mixin属性，所以我试着这样称呼：

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

'.transform'coinin应该返回下一个值之一：

 transform
 -ms-transform
 -webkit-transform

问题是我找不到将这些属性名称注入“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或其他）来生成供应商前缀实际上是目前最重要的一个问题（实际上，没有必要使用由于Autoprefixer，-prefix-free等类似工具的出现，因此编写此类mixin会占用前缀并浪费时间。

无论哪种方式都是（某种）通用解决方案（但考虑到代码量及其复杂性，我认为它实际上是一种矫枉过正，在这里我将使用LESS 1.6.0示例，因为在早期版本中它会更加冗长和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作为前缀但仍然看起来太疯狂，可以简化一下。

upd：修正了一些错误。

Answer 2

以前是一个更简单的解决方案：

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

// here we specialize what values are to be prefixed:
@prefvendor: ~'(transform|filter|box-shadow)'; // etc...

// 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);
        @pref: extract(@prefixes, @i);
        @{pref}@{property}+: replace(~'@{values}', '@{prefvendor}', '@{pref}$1', 'gi');
    }
}

用法：

element1{
    .vendorize(transition; opacity 1s ease-out, transform 3s ease-in);
}

输出：

element1 {
  -webkit-transition: opacity 1s ease-out, -webkit-transform 3s ease-in;
  -moz-transition: opacity 1s ease-out, -moz-transform 3s ease-in;
  -ms-transition: opacity 1s ease-out, -ms-transform 3s ease-in;
  -o-transition: opacity 1s ease-out, -o-transform 3s ease-in;
  transition: opacity 1s ease-out, transform 3s ease-in;
}

在LessCSS 1.7.0.1上测试

少js：Mixin属性作为另一个mixin的参数？

2 个答案: