Using Glyph Codes in Sass

Recently I was working on a project where I needed to style a social menu with automatic icons. Surprisingly it was not as easy as I thought it would be.

If you are not familiar with this technique read this and this post by Justin Tadlock.

Sass List

I like to automate things. So I thought it was a good idea to create a Sass list with properties for each icon:

$social-icons: (
    'dribbble.com':  ( '\e80a', #ea4c89 ),
    'facebook.com':  ( '\e80b', #3b5998 ),
    'github.com':    ( '\e80e', #4183c4 ),
    'twitter.com':   ( '\e81f', #00a0d1 ),
);

I can later loop through that list creating necessary styles for each icon. This way it is very easy to maintain the number of icons to include into the project.

The problem

Let’s write a loop for our list:

@each $url, $i in $social-icons {
  // Styles for icons will go here
}

In this case $i is a list containing glyph code and color, which can be accessed with the  nth() function.

This is how we get the glyph code:

content: nth( $i, 1 );

Pretty simple right? Not exactly. This is what you get in the compiled CSS:

Not quite what I was expecting. 25 minutes (the whole Pomodoro!) of experiments, with different combinations of backslashes quotes curly braces, produced no results.

25 more minutes of googling (another Pomodoro!) almost ended up the same way. But luckily I found this thread on GitHub which had a workaround for this issue.

The solution

The first part of the solution is to define glyph codes without backslashes:

$social-icons: (
  'dribbble.com':  ( 'e80a', #ea4c89 ),
  'facebook.com':  ( 'e80b', #3b5998 ),
  'github.com':    ( 'e80e', #4183c4 ),
  'twitter.com':   ( 'e81f', #00a0d1 ),
);

The second part, ugly as it may look, gets the job done if you are using Sass 3.4:

@function icon-code( $code ) {
  @return unquote( "\"\\#{$code}\"" );
}

Let’s break this function piece by piece:

#{$code} – This is how you put variable in string in Sass
\\#{$code} – Prepend an escaped backslash
\"\\#{$code}\" – Prepend and append escaped quotes

Then to make it work we need to put the whole thing in quotes and then unquote() it. Kinda nasty, I know.

For Sass 3.3 there is another solution:

@function icon-code( $code ) {
  @return str-slice( "\a", 1, 1 ) + $code;
}

This one is simpler. We take a string that starts with a backslash followed by a  letter “\a” or “\b” or any other. Then slice off the backslash and concatenate it with the rest of the glyph code.

If you need to support both Sass 3.3 and 3.4 the function will look like this:

@function icon-code( $code ) {
  @if function-exists( "selector-append" ) {
    @return unquote( "\"\\#{$code}\"" );
  }
  @return str-slice("\a", 1, 1) + $code;
}

selector-append() was introduced in Sass 3.4 so if it exists we are dealing with Sass 3.4 if not — Sass 3.3

Conclusion

Now, using this function we can access the  glyph code like this:

content: icon-code( nth( $i, 1 ) );

And it will compile nicely.