Question

我正在寻找一种使用Sass使用几个参数构建单个CSS规则的方法。

假设我想创建一个mixin transition，它将目标作为参数来编写一个transition CSS规则（其他参数，如转换时间等等）是不变的。

@mixin transition($targets...) {
    @each $t in $targets {
        // construct the rule target by target
    }
    // and then transition: $rule; or something similar
}

我想称之为

.foo {
    @include transition(color, width);
}

并获取

.foo {
    transition: color 100ms ease-out, width 100ms ease-out;
}

问题是，我无法通过连接找到构造字符串的方法。它是否可能，或者有不同的方法来做到这一点？

Answer 1

以这种方式：

@mixin transition($targets...) {
    $items: "";
    @each $item in $targets {
        $i: index($targets, $item);
        @if $i == length($targets) {
          $items: $items + $item + " 100ms ease-out";
        }

        @else {
          $items: $items + $item + " 100ms ease-out, ";
        }
    }
    transition: unquote($items);
}

Codepen（参见编译过的css）

1）设置变量以保存字符串

$items: "";

2）在$ each循环迭代中获取索引：

$i: index($targets, $item);

3）将每个项目连接到$items变量。如果它是最后一项 - 则字符串不会以逗号结尾 - 否则它将

@if $i == length($targets) {
  $items: $items + $item + " 100ms ease-out";
}

@else {
  $items: $items + $item + " 100ms ease-out, ";
}

4）最后使用unquote

删除字符串中的引号

transition: unquote($items);

用法：

.foo {
    @include transition(color, width);
}

生成编译的CSS：

.foo {
  transition: color 100ms ease-out, width 100ms ease-out;
}

用@each构造单个CSS规则

1 个答案:

Codepen（参见编译过的css）

用法：