Why does Sass prepend an incorrect @charset rule?

Question

I use

sass --watch scss:css

to have Sass automatically create CSS files (and put them in the /css directory) for each SCSS file (from my /scss directory).

In my SCSS file I have this:

.foo::before {
    content: "▶";
}

When I test the web page in the browser, that "play" character is not displayed - instead I see a bunch of weird letters with carons and other accents.

I inspected the generated CSS file and noticed this in the first line:

@charset "CP852";

I then manually changed that to this:

@charset "UTF-8";

which resulted in my "play" button being rendered correctly.

Now, why does Sass set the charset to "CP852"? I'm writing the SCSS file in PhpStorm which reports that the SCSS file indeed is UTF-8 encoded (I see that in the status bar of PhpStorm).

Aglow

What happens if you use its escaped notation: \25B6? – Threeply

+1 Wow! I had no idea that content: "\25B6" works. :) However, the question is why SASS sets an incorrect charset, so I cannot accept this answer. – Distichous

Also, using the escaped notation is NOT a good choice because you're seeing incorrect character display BECAUSE of the bad charset, meaning you have not solved this issue for all of the other characters in the incorrect charset which is potentially a HUGE issue when it comes to localization. Better fix this problem at the source rather than hacking it: explicit charset definition per the excepted answer. – Connieconniption

@Connieconniption I switched to Stylus. My webfont CSS code (from Fontello) uses some kind of \e-based escapement, e.g. .icon-star:before { content: '\e800'; }. Seems to work fine without any form of explicit UTF-8 setting. – Distichous

Answer 1

Try adding @charset "UTF-8"; to your original SCSS file, SASS shouldn't override it/add its own then.

Tuberous

It seems that @charset "UTF-8" has to be in the first line of the style sheet. – Vyky

Quote from SASS_REFERENCE: Add @charset "encoding-name"; at the beginning of the stylesheet (before any whitespace or comments) and Sass will interpret it as the given encoding. – Vyky

That was my issue too, I had a comment above it. Putting it in the first line fixed it, cheers. – Dispatcher

This causes a problem with the banner option, which gets placed as first in the script. – Tildatilde

Thanks! Very strange that they don't assume UTF-8 as default. Who would want to handle special characters in Latin-1 these days? – Hypsography

Adding a "@charset" declaration in your SCSS will be included in the CSS only_if the CSS file contains any non-ASCII characters. In compressed mode a UTF-8 BOM will be added instead of a @charset declaration – Giantess

Answer 2

Like @Alireza-Fatahi states in this answer, you could save a line in CSS output and instead go for a default Charset on external files, by adding this line to your config.rb in your project folder:

Encoding.default_external = "UTF-8"

Colettecoleus