SASS Invalid top level expression on @-ms-keyframes

Question

I have a basic scss file that contains (among other things) this:

@keyframes fade{
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

@-moz-keyframes fade{
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

@-webkit-keyframes fade{
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

@-ms-keyframes fade{
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
    // <--- Error thrown on this line
@-o-keyframes fade{
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

When trying to compile, I get an invalid top level expression on the line that I indicated in my code above. Okay, so I tried removing the following code:

@-ms-keyframes fade{
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

And now it compiles just fine. Why would sass have an issue with this block of code? I'm using node-sass (libsass 3.2).

score 1 · Answer 1 · answered Apr 22 '15 at 05:44

1

I think you may have copy pasted an accidental character in your SASS or someone is purposely messing with you. Your SASS compiles perfectly fine on SassMeister with Libsass 3.1.0. Notice however if you copy paste your code snippet into SassMeister, you get this weird unknown character right where the error is thrown. Upon further inspection there was a  entity in your code snippet on here. So... That's either an SO bug or an accidental copy paste.

...please tell I'm not insane.

HTML Entity

answered Apr 22 '15 at 05:44

allejo

2,076
4
25
40

Please do not answer obvious duplicates. This question should have been closed, not answered. – cimmanon Apr 22 '15 at 10:34
1

This is not the same error, it needs to be answered – wart Jul 21 '15 at 15:07

SASS Invalid top level expression on @-ms-keyframes

1 Answers1