Compass compiled everything well if I didn't put a #charset "UTF-8"; in my root scss, its output like this:
#charset "IBM437";
my css output still keeps the right Unicode character, just like this:
content: "ĐĂNG";
content: "TRẢ LỜI";
Its css still work with Chrome and Firefox but fail in IE because it didn't render the Unicode character and the output will completely be wrong if I put #charset "UTF-8";
content: "─É─éNG";
content: "TRẢ LỜI";
At this time, with just two properties use Unicode characters, I can still modify it but if I have more Unicode characters, it would be a nightmare.
Do I need to modify config.rb?
If You import files with #import, also declare #charset "UTF-8"; in the first line of root file ( for example styles.scss ) - it helped me.
Your source file is encoded using IBM437 instead of UTF-8, so Sass adds an appropriate #charset declaration in your output files. Try to save your files using the UTF-8 charset.
Related
This question already has answers here:
Why does Sass prepend an incorrect #charset rule?
(2 answers)
Closed 5 years ago.
I have the following rule in my .scss file:
.listing-price:before {
...
content: "♥";
For whatever reason, running sass --update foo.scss:foo.css --style expanded converts it to:
.listing-price:before {
...
content: "ΓÖÑ";
Why does this happen and what do I need to do to prevent it?
Sass should be auto-detecting character encoding on your documents. If not for some reason, you can explicitly set it to UTF-8 using #charset "UTF-8";
From the SASS docs:
When running on Ruby 1.9 and later, Sass is aware of the character encoding of documents. Sass follows the CSS spec to determine the encoding of a stylesheet, and falls back to the Ruby string encoding. This means that it first checks the Unicode byte order mark, then the #charset declaration, then the Ruby string encoding. If none of these are set, it will assume the document is in UTF-8.
To explicitly specify the encoding of your stylesheet, use a #charset declaration just like in CSS. Add #charset "encoding-name"; at the beginning of the stylesheet (before any whitespace or comments) and Sass will interpret it as the given encoding. Note that whatever encoding you use, it must be convertible to Unicode.
Sass will always encode its output as UTF-8. It will include a #charset declaration if and only if the output file contains non-ASCII characters. In compressed mode, a UTF-8 byte order mark is used in place of a #charset declaration.
#charset "UTF-8";
.listing-price:before {
content: "♥";
}
Demo:
https://www.sassmeister.com/gist/6326e75075795d1c265d26467c06518c
Docs:
http://sass-lang.com/documentation/file.SASS_REFERENCE.html
Set
#charset "utf-8";
at the top of your scss files where you use characters in the UTF range
https://github.com/sass/sass/issues/1663
I'm having an issue when my Sass compiles my .scss file. It seems that Sass compiles the « special characters and transform it in another one ┬½. But I want to keep my « in my .css file.
Does anybody know how to fix this?
Or maybe who knows how to ask Sass not to compile specific lines?
Here's my scss code:
/* SCSS file sample */
&::before{
content: "«";
}
&::after{
content: "»";
}
And here's how it compiles it:
/* Compiled CSS */
.textBox--quotation::before {
content: "«";
}
.textBox--quotation::after {
content: "┬╗";
}
Thank you for your help.
Use the CSS equivalent of your special character:
\00AB
(As converted here)
div:after {
content: "\00AB";
}
<div>hello </div>
I can confirm this under Windows Sass 3.5.1 (Bleeding Edge).
When the file is encoded as UTF-8 with BOM this does not happen. Only when the file is encoded without BOM (which basically means, you encode UTF-8, but you are not telling anyone). My guess: Sass will parse the file as plain ANSI and thus sees these 2 characters.
Funny thing: When the file was encoded with BOM, sass removes it and adds an annotation #charset "UTF-8"; Never mind, it always does this
I ran into the same charset problem.
Especially on OSX there seams to be a problem with ruby Encoding Settings.
I fixed it creating a config.rb file in the main project directory to tell ruby explicitly which charset encoding it should use. Since sass and compass depend on ruby, chances good that this might fix your problems.
Encoding.default_external = 'utf-8'
Is character encoding declaration necessary to use in CSS3. And when I use the #charset "utf-8"; declaration it gives a warning in Visual Studio CSS3 validation. Can someone give a suggestion Please...
I think it is not necessary but it is recommended if you have any non-ASCII text in your CSS file.
From http://www.w3.org/International/questions/qa-css-charset.en.php#atcharset:
#charset "<IANA-defined-charset-name>";
Only one #charset rule may appear in an external style sheet and it must appear at the very start of the document. It must not be preceded by any characters, not even comments. (However, a byte-order mark is OK for a document in one of the Unicode encodings.)
Additionally you can try changing "utf-8" to uppercase, since it is defined uppercase by IANA: http://www.iana.org/assignments/character-sets/character-sets.xml
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).
Try adding #charset "UTF-8"; to your original SCSS file, SASS shouldn't override it/add its own then.
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"
I'm using the ▼ character as the content of my pseudo element:
a:after {
content: '▼';
}
This works great in all modern (read: non-IE) browsers:
but in IE(9), I just get gibberish instead:
I guess this has something to do with the character encoding, but I don't know where to start.
Make sure that both your page and your stylesheet are encoded and served as UTF-8. Most editors should be able to tell you the encoding of any open file.
You can also opt to use the Unicode sequence \9660 instead, but again you need to ensure that your documents are encoded as UTF-8 otherwise it may not work correctly either:
a:after {
content: '\9660';
}
Or if your stylesheet has a #charset rule, it needs to point to UTF-8:
#charset "UTF-8";
Note that #charset rules need to appear at the very beginning of a stylesheet; in #imported files I believe this should not be an issue, but seeing as Sass actually combines files together that are linked by #import rules during compilation, this will cause errors. For Sass/SCSS, you'll need to place the #charset rule at the beginning of your master stylesheet.
In addition to #BoltClock's answer, be sure to send appropriate headers from your server, and, perhaps just for good measure, add a <meta charset="utf-8" /> in your <head> tag.
You can try also by adding a background image to your menu.
a{background:url("http://pathtoyourimage/");}