Stylus

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)

Stylus - 混合中的插值

Stylus - interpolation in a mixin

css