在mixin中为变量添加后缀？答案

【问题标题】：Adding a suffix to the variable in a mixin?在mixin中为变量添加后缀？
【发布时间】：2014-02-09 05:58:36
【问题描述】：

我有一个混合：

@mixin transition($duration) {
  -webkit-transition: all $durations ease-in-out;
     -moz-transition: all $durations ease-in-out;
      -ms-transition: all $durations ease-in-out;
       -o-transition: all $durations ease-in-out;
          transition: all $durations ease-in-out;
}

但在当前状态下，它已损坏，因为它显然会寻找名为 $durations 而不是 $duration 的变量，然后在后缀 s 几秒钟。有没有办法解决这个问题？

【问题讨论】：

标签： css sass

【解决方案1】：

你需要使用字符串插值：

@mixin transition($duration) {
  -webkit-transition: all #{$duration}s ease-in-out;
     -moz-transition: all #{$duration}s ease-in-out;
      -ms-transition: all #{$duration}s ease-in-out;
       -o-transition: all #{$duration}s ease-in-out;
          transition: all #{$duration}s ease-in-out;
}

.foo {
  @include transition(1);
}

【讨论】：