SASS - 带有 var args 和 shared args 的转换 mixin答案

【问题标题】：SASS - Transition mixin with var args and shared argsSASS - 带有 var args 和 shared args 的转换 mixin
【发布时间】：2012-10-26 14:16:09
【问题描述】：

这就是我想要做的，我想创建一个 mixin，它允许可变数量的属性，并且还允许我使用单个 DRY val 进行（在此示例中）转换。所以我可以说，“在 .2s 处轻松过渡 box-shadow、border 和 width。”

这是我脑海中一些非常严重的伪代码。我最不确定的部分是如何获取列表以便它以正确的方式编译。我不确定 append 是否是正确的方法，或者我是否需要连接一个字符串 var，或者什么？

/* move object*/
.moveit{
    @include grouped-trans((box-shadow, border, width), 0.2s, ease-in);
}

/* mixin */
@mixin grouped-trans($list, $time, $ease)
{
    @each $prop in $list {
        //transition: append($prop, $time, $ease);
        // - or -
        //$tmp_var + $list, $time, $ease;
}

我知道有一些方法可以使用字符串插值 #{} 之类的方法来合并变量 args，并将“...”作为参数包含在内。但我 - 理想情况下 - 想找到一种按照我描述的方式执行此操作的方法。

【问题讨论】：

请注意，如果您在 transition-property 中指定了多个属性，并且在每个其他属性中只指定了一个值（例如 transition-duration），那么每个属性都会重复该值。这意味着随着要转换的属性列表的增加，不需要循环和更短的代码。
@JordanGray 这实际上是我想要的。我希望保留使用循环之类的转换的简写符号，这样就不需要我单独输入每个转换属性、转换持续时间和转换时间函数。
有理由不使用transition: all .2s ease-in吗？
@bookcasey 我当前的配置要求我从过渡中排除几个道具。否则，是的，我会使用一个简单的“全部过渡”

标签： sass mixins

【解决方案1】：

以下是构建您正在寻找的 mixin 的方法。请注意，这确实需要使用Compass，但是不使用 Compass 就使用 Sass 是很愚蠢的。

@import "compass";

@mixin grouped-trans($list, $time, $ease) {
  @include transition-property($list);
  @include transition-duration($time);
  @include transition-timing-function($ease);
}

.moveit {
  @include grouped-trans((box-shadow, border, width), 0.2s, ease-in);
}

上面的 SCSS 会编译成下面的 CSS：

.moveit {
  -webkit-transition-property: box-shadow, border, width;
  -moz-transition-property: box-shadow, border, width;
  -o-transition-property: box-shadow, border, width;
  transition-property: box-shadow, border, width;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-in;
  -moz-transition-timing-function: ease-in;
  -o-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
}

【讨论】：

我想知道在普通的 sass 中这是不可能的......因为我目前不使用指南针。不管这太棒了，谢谢你碰旧帖子。