css - 如何防止指南针处理并替换我的变量的 unicode 值？

Question

这是我声明每个图标的 unicode 的示例。

$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";

这是css输出。

/* 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: "";
}

这就是它在我的 IDE 中的样子

这就是我的图标显示的方式

是否可以防止这种行为？

我在跑grunt-contrib-compass@1.0.4

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

我通过查看图标字体的其他 sass 实现找到了我的问题的答案。所以，我们要做的第一件事就是编写一个转义函数，就像这样：

@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 + "\""};
  }
}

那么我们所要做的就是像这样定义我们的变量：

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

这将防止 compass 改变我们变量的内容。就这样。