3

这是我正在尝试做的事情，我想创建一个允许可变数量的属性的 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，并将 '...' 作为参数包含在内。但我 - 理想情况下 - 想找到一种按照我描述的方式执行此操作的方法。

4

1 回答 1

3

下面是你如何构建你正在寻找的 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;
}
于 2013-02-09T20:12:03.227 回答