How to prevent compass from process and replace the unicode value of my variables?

Question

Here's an example where i declare the unicode of each icon.

$icomoon-font-path: "fonts" !default;

$mr-employee-board-1: "\e90a";
$mr-employee-board-2: "\e90b";
$mr-employee-calendar: "\e90c";
$mr-employee-compare-vertical: "\e90d";
$mr-employee-compare: "\e90e";
$mr-employee-financial: "\e90f";
$mr-employee-stats: "\e910";
$mr-employee: "\e911";
$mr-file-history: "\e912";
$mr-health-board: "\e913";

This is the css output.

/* line 14, ../vendor-styles/mr-material/style.scss */
.mr {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'mr-material' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* line 30, ../vendor-styles/mr-material/style.scss */
.mr-employee-board-1:before {
  content: "";
}

/* line 35, ../vendor-styles/mr-material/style.scss */
.mr-employee-board-2:before {
  content: "";
}

/* line 40, ../vendor-styles/mr-material/style.scss */
.mr-employee-calendar:before {
  content: "";
}

/* line 45, ../vendor-styles/mr-material/style.scss */
.mr-employee-compare-vertical:before {
  content: "";
}

/* line 50, ../vendor-styles/mr-material/style.scss */
.mr-employee-compare:before {
  content: "";
}

This is how it looks like in my IDE

This is how my icons show up

Is it possible to prevent this behaviour?

I'm running [email protected]

compass: {
      options: {
        sassDir: '<%= yeoman.app %>/scss',
        cssDir: '<%= yeoman.app %>/styles/',
        generatedImagesDir: '.tmp/images/generated',
        imagesDir: '<%= yeoman.app %>/images',
        javascriptsDir: '<%= yeoman.app %>/scripts',
        fontsDir: '<%= yeoman.app %>/fonts',
        importPath: './bower_components',
        httpImagesPath: '/images',
        httpGeneratedImagesPath: '/images/generated',
        httpFontsPath: '/styles/fonts',
        relativeAssets: false,
        assetCacheBuster: false,
        raw: 'Sass::Script::Number.precision = 10\n'
      },
      dist: {
        options: {
          generatedImagesDir: '<%= yeoman.dist %>/images/generated'
        }
      },
      server: {
        options: {
          sourcemap: true
        }
      }
    },

Answer 1

I found out the answer to my question by looking at other sass implementations for icon fonts. So, the first thing we have to do is write a escaping function just like this one:

@function char($character-code) {
  @if function-exists("selector-append") {
    @return unquote("\"\\#{$character-code}\"");
  }

  @if "\\#{'x'}" == "\\x" {
    @return str-slice("\x", 1, 1) + $character-code;
  }
  @else {
    @return #{"\"\\"}#{$character-code + "\""};
  }
}

then all we have to do is to define our variables like this:

$mr-employee-board-1: char(e90a);
$mr-employee-board-2: char(e90b);
$mr-employee-calendar: char(e90c);

And this will prevent compass from changing the content of our variable. That's all.