SASS-与var args和共享args的过渡混合物

Question

这是我要做的，我想创建一个允许属性数量的混合蛋白，还允许我使用单个干阀（在本示例中）过渡。因此，我可以说："过渡盒子阴影，边框和宽度 @ .2s，并放松。"

这是我头顶上一些非常严重的伪造代码。我最不确定的部分是如何获取列表，以便以正确的方式编译。我不确定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;
}

我知道有一些方法可以使用字符串插值＃{}之类的方法合并变量ARG，并将'...'作为参数（包括'...'）。但是我 - 理想情况下 - 想找到一种以我描述的方式执行此操作的方法。

Answer 1

这是您要寻找的混合物的方式。请注意，这确实需要使用指南针，但是在不使用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;
}