向mixin中的變量添加後綴？

Question

我有一個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爲秒變量。有什麼辦法可以解決這個問題嗎？

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