11

I recently started using bootstrap SCSS on my node project. So I have app/bower_components/bootstrap-sass/lib/_glyphicons.scss for example.

Looking at my CSS output I see things like:

@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;
}

I have 2 questions:

  1. This seems like a security hole. Everyone can deduce something about my OS and directory structure simply by looking at my CSS. What is the correct way to close this security hole?
  2. How does it work? I nearly got it figured out, but I am missing something. Looking at the SCSS, I see bootstrap is using $icon-font-path which apparently turns into this absolute path. Looking at compass documentation, I see they provide absolute values but no $icon-font-path

This is the piece of code I am referring to:

@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');
}
4

4 回答 4

9

两个答案都是正确的。总结一下，没有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 模块的标准机制。

于 2013-11-08T21:12:26.740 回答
7

这是他们设置变量的变量文件$icon-font-path。

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

于 2013-11-07T22:11:00.270 回答
2

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

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

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

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

于 2013-11-07T22:15:58.907 回答
0

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

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

由于 $bootstrap-sass-asset-helper 尚未定义，在覆盖 $icon-include-path 之前包含 _variables.scss 可能很有用，因此我们可以读取“设置”并覆盖 $icon-font-路径与 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;
于 2016-01-20T12:22:30.187 回答