SASS mixin输出的CSS规则将被忽略 [英] CSS rules output by SASS mixin being ignored

问题描述

产生一些CSS规则的SASS混合被忽略. Chrome Dev Tools显示已注册但已划掉的规则，我不知道为什么.我最初以为存在特异性冲突，但是没有冲突的规则.

A SASS mixin which produces some CSS rules is being ignored. Chrome Dev Tools is showing the rules registered but crossed out and I cannot figure out why. I initially thought there was a conflict of specificity but there are no conflicting rules.

以下是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开发工具的输出

没有在其他地方为该元素指定width，height和background-poisition属性，所以我不明白为什么这些规则会被忽略.

The width, height and background-poisition property is not being specified for that element elsewhere so I don't understand why those rules are being ignored.

推荐答案

浏览器正在忽略您的CSS，因为它是无效的. width，height和background-position属性不接受字符串，而是接受长度(对于背景位置，则为长度列表).

The browser is ignoring your CSS because it is not valid. The width, height, and background-position properties do not accept strings, they accept lengths (in the case of background-position, a list of lengths).

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

除非您想要一个字符串，否则请不要使用引号.

Unless you want a string, do not use quotes.

这篇关于SASS mixin输出的CSS规则将被忽略的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！