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

Question

我最近开始在我的节点项目中使用引导 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;
}

我有两个问题：

1. 这似乎是一个安全漏洞。每个人都可以通过查看我的 CSS 来推断我的操作系统和目录结构。关闭此安全漏洞的正确方法是什么？
2. 它是如何工作的？我几乎明白了，但我错过了一些东西。查看 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

两个答案都是正确的。总而言之，没有magic。 Bootstrap 使用默认值初始化 $icon-font-path。

如果您 include 引导的 SCSS 在需要为 $icon-font-path 提供不同值的管理器中，您还应该覆盖它们的默认值。

语法$icon-font-path: some_value !default; 表示 - 如果尚未设置，则使用此值。

所以当你包含你应该做以下事情

/* override icon-font-path value and include scss */
$icon-font-path: bower_components/bootstrap/fonts; 
@include bower_components/bootstrap/bootstrap.scss;

路径在实际场景中可能会有所不同。

这似乎是发布可重用 SCSS 模块的标准机制。

Answer 2

Here is the variables file 在其中设置了$icon-font-path 变量。

看起来$icon-font-path 设置为字体文件的文件夹名称。不一定是安全漏洞，因为它是字体的相对路径。

Answer 3

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

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

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

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

Answer 4

@guy mograbi：在 Bootstrap-SASS-3.3.6 中，/bootstrap/bootstrap/_variables.scss @83 中的 $icon-font-path 声明如下：

$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../fonts/bootstrap/") !default;

由于 $bootstrap-sass-asset-helper 尚未定义，在覆盖 $icon-include-path 之前包含 _variables.scss 可能很有用，因此我们可以读取“设置”并覆盖 $icon -font-path 连同 if() 案例。

我们可以使用类似的东西：

@include bower_components/bootstrap/bootstrap/_variables.scss;
$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "/fonts/bootstrap/");
@include bower_components/bootstrap/bootstrap.scss;