SASS mixin输出的CSS规则被忽略

Question

正在忽略产生一些CSS规则的SASS mixin。 Chrome Dev Tools显示已注册但已划掉的规则，我无法弄清楚原因。我最初认为存在特异性冲突，但没有相互矛盾的规则。

这是SASS：

span.icon {
    display: inline-block;
    background-image: url('images/sprite.png');
    background-repeat: no-repeat;

    &.telephone {
        @include sprite('19px', '25px', '-300px 0');
    }
}

这是mixin：

@mixin sprite($width, $height, $bg-position) {
    width: $width;
    height: $height;
    background-position: $bg-position;
}

以下是Chrome开发工具的输出

在其他地方没有为该元素指定宽度，高度和background-poisition属性，因此我不明白为什么忽略这些规则。

Answer 1

浏览器忽略了CSS，因为它无效。宽度，高度和背景位置属性不接受字符串，它们接受长度（在背景位置的情况下，长度列表）。

.foo {
   @include sprite(19px, 25px, -300px 0);
}

除非你想要一个字符串，否则不要使用引号。