CSS rules output by SASS mixin being ignored

Question

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.

Here is the SASS:

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

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

Here is the mixin:

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

Here is the out output from Chrome Dev Tools

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.

Answer 1

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.