$ icon-font-path如何在引导scss中工作？ [英] how does $icon-font-path works in bootstrap scss?

问题描述

我最近开始在节点项目上使用引导SCSS。例如，我有 app / bower_components / bootstrap-sass / lib / _glyphicons.scss 。

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

看看我的CSS输出，我看到类似这样的东西：

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

我有2个问题：

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


2. 它如何工作？我几乎想通了，但是我缺少了一些东西。查看SCSS，我看到引导程序正在使用 $ icon-font-path ，它显然变成了这个绝对路径。查看指南针文档，我看到它们提供了绝对值，但没有 $ icon-font-path

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

推荐答案

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

The -sass-debug-info mess is rudimentary "source mapping", so browser developer tools can show you the original line number and filename of the Sass rule that generated that CSS (instead of the line number for the generated CSS).

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

Firebug has a FireSass plugin that understands these annotations. I think Chrome has built-in support, but it might be behind an experimental flag.

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

It has nothing to do with fonts; font-family is just used because it's an easy way to shove a string into CSS in a way that's still accessible to JavaScript without actually affecting the rendering of the document. It also has nothing to do with Bootstrap; this is part of the scss compiler.

它不会出现在压缩输出中，希望您如此在生产中使用。 ：）

It won't be there in compressed output, which I hope you're using in production. :)

这篇关于$ icon-font-path如何在引导scss中工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！