手寫筆 - 在mixin插值

Question

我有一個mixin，我想插入傳入的值，但我得到一個錯誤。

positionModifier(key, x, y) 
    &.{key} 
     background-position: {x}px {y}px; 

，我得到的錯誤是：

351|   positionModifier(key, x, y) 
    352|    &.{key} 
    353|     background-position: {x}px {y}px; 
------------------------------------------------^ 
    354| 
    355| 
    356| //  positionModifier(recyclebin, 4, 86); 

expected ":", got "}" 

，我試圖生成（在356得到的）的代碼是：

&.recyclebin { background-position: 4px 86px; } 

我在做什麼錯？我來自使用sass編譯css，並認爲我會嘗試使用觸控筆（這個mixin在sass中正常工作）。

SASS版本：

@mixin positionModifier($key, $x, $y) { 
     &.#{$key} { 
      background-position: #{$x}px #{$y}px; 
     } 
    } 

Answer 1

只需更換{}通過()：

positionModifier(key, x, y) 
    &.{key} 
    background-position: (x)px (y)px; 

body 
    positionModifier('test', 10px,20px)