SASS mixin 输出的 CSS 规则被忽略答案

【问题标题】：CSS rules output by SASS mixin being ignoredSASS mixin 输出的 CSS 规则被忽略
【发布时间】：2014-06-23 03:50:21
【问题描述】：

产生一些 CSS 规则的 SASS mixin 被忽略。 Chrome 开发工具显示已注册但被划掉的规则，我不知道为什么。我最初认为存在特异性冲突，但没有冲突的规则。

这是 SASS：

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

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

这里是混合：

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

这是 Chrome 开发工具的输出

其他地方没有为该元素指定宽度、高度和背景位置属性，所以我不明白为什么忽略这些规则。

【问题讨论】：

标签： sass mixins css-specificity

【解决方案1】：

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

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

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

【讨论】：

是的！就是这样。我从来没有考虑过。谢谢。