问题描述

如何创建使用嵌套混合属性作为参数的混合？

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

我有一个"Transition-Property"混合：

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

从这个混合中，我想使用一个‘Transform’混合属性，所以我尝试这样调用：

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

".Transform"混合应返回下列值之一：

 transform
 -ms-transform
 -webkit-transform

问题是我找不到将这些属性名称注入到"转换-属性"混合中的方法，有人能解释一下这一点吗？

最终所需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、-prefix-free和类似的工具问世以来，没有必要用前缀来膨胀您的代码并浪费您的时间来编写这样的混合代码)。

无论哪种方式，这里都是一个通用的解决方案(但是考虑到代码量和它的复杂性，我认为它实际上是矫枉过正的，这里我将使用更少的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}'}
}

(如果只需要transform但看起来还是太疯狂，当然可以简化一点)。

更新：已修复一些错误。

这篇关于是否将Mixin属性作为另一个Mixin的参数？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！