how does $icon-font-path works in bootstrap scss?

回眸只為那壹抹淺笑 提交于 2019-12-03 11:36:13

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 has a FireSass plugin that understands these annotations. I think Chrome has built-in support, but it might be behind an experimental flag.

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. :)

guy mograbi

Both answers are correct. To sum it up, there's no magic. Bootstrap initializes $icon-font-path with a default value.

if you include bootstrap's SCSS in a manager that requires a different value for $icon-font-path you should also override their default value.

The syntax $icon-font-path: some_value !default; means - use this value if not already set.

So when you include you should do the following

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

paths might be different in real scenarios.

This seems to be a standard mechanism for publishing a reusable SCSS modules.

Here is the variables file where they set the $icon-font-path variable.

It looks like $icon-font-path is set to the foldername of the font files. not necessarily a security hole because its a relative path to the fonts.

bencergazda

@guy mograbi: In Bootstrap-SASS-3.3.6, $icon-font-path in /bootstrap/bootstrap/_variables.scss @83 is declared like this:

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

Since $bootstrap-sass-asset-helper is not defined yet, it may be useful to include the _variables.scss before overwriting the $icon-include-path, so we can read the "settings" and overwrite the $icon-font-path together with the if() cases.

We can use something like:

@include bower_components/bootstrap/bootstrap/_variables.scss;
$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "/fonts/bootstrap/");
@include bower_components/bootstrap/bootstrap.scss;
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!