css - Some styles not rendered in the browser with sass --style compressed

Question

I refactored some vanilla CSS by renaming individual .css files as .scss and @importing them into one master file. The contents of that file looks like this:

@import file1
@import file2
@import file3

In the same directory, lives _file1.scss, _file2.scss, _file3.scss.

Everything works, but for some reason, when I add the flag --style compressed the minified output is missing classes, etc. It also works fine with --style compact so whatever is going wrong is specific to compressed.

I'm on OSX 10.9.2, with Sass v3.2.10 (Media Mark). I'm using the following command:

sass --watch style.style.min.css --style compressed

When I do NOT minify the output (by removing --style compressed) the resulting CSS works fine.

Any ideas what could be going wrong?

Specific code: I can't post the whole file but here's a sample with the code that's not working...

.scss

/*!XXXXXXXXXX*/
/* route colors */
.subway_metrorail_red       { background:#e45340; color:#fff; }
.subway_metrorail_orange    { background:#efaa49; color:#fff; }
.subway_metrorail_yellow    { background:#7a7a17; color:#fff; }
.subway_metrorail_green     { background:#52b05f; color:#fff; }
.subway_metrorail_blue      { background:#3f8cda; color:#fff; }

(minified) .css

... .subway_metrorail_blue h3{color:#000}/*!XXXXXXXXXX*/.subway_metrorail_red{background:#e45340;color:#fff}.subway_metrorail_orange{background:#efaa49;color:#fff} ...

UPDATE: I'm starting to think this has nothing to do with sass compiling the CSS... If I take the exact same code that results from --compact and add one line break or two, the styles get applied normally. Is there a maximum line length for CSS files or something?

UPDATE2:

The validator doesn't like this:

.car2go_icon {
    background-image:url("../images/car2go_logo_50.png");
    background-size: 158px 50px;
    background-position: 0px 20px;
    background-repeat:no-repeat;
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='../../../public/images/car2go_logo_50.png',
    sizingMethod='crop')";
}

UPDATE 3: I think the line breaks within the string after -ms-filter: are the problem! They fail validation when I leave the code as you see it above. But when I remove the line breaks they seem to pass. I have a feeling that this is breaking during magnification. Does anyone know more about the correct syntax for -ms-filter than me?

Answer 1

This may not working because number of css lines exceeding 4000+. If you try to put some of your sass in another files and make each file under 4000 lines I think that will work for you.