error compiling glyph fonts

[guptamo]

I attempted to use libsass as a way to integrate Materialize css (http://materializecss.com) into my django stack.

I was simply using sassc to compile the materialize.scss file and libsass strips the content value out of the out going css.

Something that should compile to this
.mdi-navigation-menu:before{content:"\e8a1"}

Compiles to this
.mdi-navigation-menu:before {content: ; }

If you have any other questions about how I found this error feel free message me for more details.

[asottile]

This is correct behaviour as far as I can tell. Let me introduce a few concepts so I can hopefully convince you of that :)

1. "Unicode" - Unicode is a mapping of standardized characters to a specific glyph (picture so-to-speak). In python, unicode glyphs are written as the escape sequence u'\uXXXX'. For example u'\u2603' represents the unicode snowman glyph: ☃. Css (and scss) represent their glyphs as '\XXXX'.
2. Encodings - encodings are a way to represent these glyphs as a series of bytes. For instance, ASCII represents all of its glyphs in 7 bits, for instance the glyph for 'A' is represented as 0x41 (decimal 65). ASCII can't represent that many characters due to only using 7 bits. There are other encodings that are able to display more characters. The most prevalent of those is UTF-8 which can represent all unicode glyphs. The UTF-8 encoding of ☃ is '\xe2\x98\x83', you can see it is a multi-byte character representation for a single glyph.
3. There's a chunk of "Unicode" for which the characters are reserved to not encode to real glyphs. This allows third parties to customize these to whatever need they have. You can read more about it here: http://en.wikipedia.org/wiki/Private_Use_Areas
4. The way icon fonts work is they create a special font which assigns the private use area to real glyphs, then they have elements which contain the bytes that represent that glyph.

Now back to the question :)

• '\e8a1' maps to this specific reserved glyph: https://codepoints.net/U+E8A1
• '\e8a1' encodes to these bytes in UTF-8: '\xee\xa2\xa1'
• This looks like  in a font which does not implement this glyph

libsass is not stripping the value, just changing it from its escape-representation to the UTF-8 bytes of the character.

This also isn't libsass-python's doing (which is just a simple wrapper around libsass), for libsass itself, check out https://github.com/sass/libsass

[guptamo]

Thanks, for the explanation! Very enlightening.

That being said, the font being used (material design icons), does have a glyph being implemented for '\e8a1'.

To ensure that the issue is with Libsass, I ran my .scss file through Compass and it ran fine. You're right!

The issue (unless you can point anything else I'm getting wrong), has to be with Libsass. Will bring it up on that git.

[asottile]

Does the icon not display correctly? I'd be a bit surprised honestly :)

[guptamo]

The icon doesn’t display…unless I run it through compass in which case it’s fine.

On May 26, 2015 at 11:25:32 AM, Anthony Sottile (notifications@github.com) wrote:

Does the icon not display correctly? I'd be a bit surprised honestly :)

—
Reply to this email directly or view it on GitHub.

[asottile]

This is being tracked upstream: sass/libsass#1231

Here's a workaround: sass/libsass#1237 (comment) (which you should probably have an encoding anyway!)