compass-sass - $icon-font-path 如何在 bootstrap scss 中工作？

Question

我最近开始在我的节点项目中使用 bootstrap SCSS。所以我有 app/bower_components/bootstrap-sass/lib/_glyphicons.scss例如。

查看我的 CSS 输出，我看到如下内容:

@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/some\/path\/project\/app\/bower_components\/bootstrap-sass\/lib\/_normalize\.scss}line{font-family:\0000332}}
audio,
canvas,
video {
  display: inline-block;
}

我有两个问题:

这似乎是一个安全漏洞。每个人都可以通过查看我的 CSS 来推断出我的操作系统和目录结构。关闭这个安全漏洞的正确方法是什么？

它是如何工作的？我几乎想通了，但我错过了一些东西。查看 SCSS，我看到 bootstrap 正在使用 $icon-font-path这显然变成了这条绝对路径。看着 compass documentation ，我看到他们提供绝对值但没有 $icon-font-path

这是我所指的一段代码:

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('#{$icon-font-path}#{$icon-font-name}.eot');
  src: url('#{$icon-font-path}#{$icon-font-name}.eot?#iefix') format('embedded-opentype'),
       url('#{$icon-font-path}#{$icon-font-name}.woff') format('woff'),
       url('#{$icon-font-path}#{$icon-font-name}.ttf') format('truetype'),
       url('#{$icon-font-path}#{$icon-font-name}.svg#glyphicons-halflingsregular') format('svg');
}

Answer 1

-sass-debug-info mess 是基本的“源映射”，因此浏览器开发人员工具可以向您显示生成该 CSS 的 Sass 规则的原始行号和文件名(而不是生成的 CSS 的行号)。

Firebug 有一个理解这些注释的 FireSass 插件。我认为 Chrome 具有内置支持，但它可能落后于实验性标志。

它与字体无关； font-family之所以使用它，是因为它是一种以 JavaScript 仍然可以访问的方式将字符串推送到 CSS 中的简单方法，而不会实际影响文档的呈现。它也与 Bootstrap 无关；这是 scss 的一部分编译器。

它不会出现在压缩输出中，我希望您在生产中使用它。 :)