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

两个答案都是正确的。总结一下，没有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设置为字体文件的foldername。不一定是安全漏洞，因为它是字体的相对路径。

Answer 3

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

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

没有与字体有关;使用font-family是因为它是一种简单的方法，可以以一种JavaScript仍然可以访问的方式将字符串推入CSS，而不会实际影响文档的呈现。它还与<无> 与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;

$ icon-font-path如何在bootstrap scss中运行？

4 个答案: