在mixin中为变量添加一个后缀？ [英] Adding a suffix to the variable in a mixin?

问题描述

我有一个mixin：

@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 秒。有没有办法解决这个问题？

but in its current state it's broken because it's clearly going to look for a variable named $durations instead of $duration and then suffixing an s for seconds. Is there a way to pull this off?

推荐答案

您需要使用字符串插值：

You need to use string interpolation:

@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);
}

这篇关于在mixin中为变量添加一个后缀？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！