Sassy Escape

A Sass wrapper for cssesc, a JavaScript library for escaping text for use in CSS strings or identifiers.

This function takes a value and returns an escaped version of the value where any characters that are not printable ASCII symbols are escaped using the shortest possible (but valid) escape sequences for use in CSS strings or identifiers.

body::after {
  content: escape('Ich ♥ Bücher');
}

// Becomes this:
body::after {
  content: 'Ich \2665  B\FC cher';
}

By default, escape returns a string that can be used as part of a CSS string. If the target is a CSS identifier rather than a CSS string, use the $is-identifier: true setting.

.#{ unquote(escape('123a2b', $is-identifier: true)) } {
  color: red;
}

// Becomes this:
.\31 23ab {
  color: red;
}

The optional keyword arguments accept the exact options which JavaScript version cssesc uses only converted to the dasherized-case:

body::after {
  content: escape('123a2b', $escape-everything: true, $quotes: 'single', $wrap: true);
}

gem install sassy-escape

sass -r sassy-escape --watch sass_dir:css_dir

Add the following to your Compass configuration:

require 'sass-escape'