Ernedar Ernedar - 2 years ago 188
CSS Question

SASS element \ written in CSS

I am a bit lost with SASS.

I am working on mixin for Fontello, but it uses \ sign to translate codes to icons.

How I can write this sign from SASS to CSS?


I have icons in map:

$fontello-icon: (
facebook-rect: \e800,
facebook: \e801

and using this statement to write them down:

content: '#{map-get($fontello-icon, facebook)}'

But css looks like:

h1:after {
content: "\\e801";

Instead of this:

h1:after {
content: "\e801";

Can somebody help me solve this problem please?

Answer Source

Just to add to @Mark answer and provide some context, try this code in your compiler:

$a: \e801;
$b: '\e801';
@debug $a;
@debug '#{$a}';
@debug $b;
@debug '#{$b}';

The output logged will be:

/style.scss:3 DEBUG: \e801 // <- Terminal has displayed the escaped `\\` as `\` (as appropriate for a program)
/style.scss:4 DEBUG: \e801 // <- Same as above
/style.scss:5 DEBUG: (A unicode character that I could not copy in)
/style.scss:6 DEBUG: (A unicode character that I could not copy in)

The reason is that SASS - or any programming language (apart from Apple's swift if I recall correctly - they can use unicode everywhere) - does not support these unicode characters anywhere else but inside strings (and even then it only supports representations and not the actual characters). So when you declare your unicode string without making it a string, it is assumed to just be chracters on their own, like the word sheep is just [s,h,e,e,p] and \e801 is just [\,e,8,0,1] - the output you want is [\e801]. So store your unicode in strings is the general idea.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download