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)

手写笔 - 在mixin中插值

1 个答案: