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

Posted 2023-02-22

【中文标题】Mixin 属性作为另一个 mixin 的参数？

【英文标题】：Mixin property as an argument of another mixin?

【发布时间】：2014-01-30 10:22:29

【问题描述】：

如何创建一个将嵌套的 mixin 属性用作参数的 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' mixin 应该返回以下值之一：

 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;

【问题讨论】：

LESS 不允许重用属性值。你需要为此使用变量（虽然我不能给你一个例子，因为我不明白.transition-property(~"opacity, .transform"); 实际上应该做什么）。另请参阅 1 和 2 关于不使用转义值作为 mixin 参数。

我认为获得答案的更简单方法是发布您计划获得的所有这些 mixin 调用的 CSS 结果（然后建议的解决方案变得越来越不明显）。

transition-property mixin 是这样写的，以支持多个参数，这里支持“不透明度”和转换值。更多信息在这里：***.com/questions/11419741/…

阅读我上面评论中的“1”和“2”链接，在现代 LESS 中有更好的方法将值列表传递给 mixin。

【参考方案1】：

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

// 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 上测试

【参考方案2】：

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

无论哪种方式，这是一个（某种）通用解决方案（但考虑到代码量及其复杂性，我认为这实际上是一种矫枉过正，在这里我将使用 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作为前缀但看起来还是太疯狂，它可以简化一点）。

更新：修复了一些错误。

【讨论】：

我没有听说过这些“autoprofixer”工具。你会建议我们从 LESS 转换为 CSS，然后通过 autoprofixer 运行它，然后是 clean-css 吗？这将为我的工作流程增加 2 个额外步骤，因为 LESS 与 clean-css 捆绑在一起。源地图也变得更糟糕了。

如果我没记错的话 Autoprefixer (version > 1.0) 会保留 CSS 文件的缩小结构。

非常感谢@seven-phases-max！一个简单问题的复杂解决方案，希望下一个 LESS/SASS 版本更容易使用生成前缀，以简单的方式解决此类问题！

啊..看起来像这个问题的答案：***.com/questions/21511508/less-a-string-lessjs-1-6-x也许我可以使用它。