bootstrap scssで$ icon-font-pathはどのように機能しますか？

Question

最近私のノードプロジェクトでブートストラップSCSSを使用し始めました。だから私は例えばapp/bower_components/bootstrap-sass/lib/_glyphicons.scssを持っています。

1. これはセキュリティホールのように思える：私は2つの質問がある

   @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出力を見て、私はのようなものを参照してください。私のCSSを見るだけで、誰もOSとディレクトリ構造について何かを推測することができます。このセキュリティホールを閉じる正しい方法は何ですか？

2. どのように動作しますか？私はほとんどそれを把握したが、私は何かが足りない。 SCSSを見ると、ブートストラップは$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

-sass-debug-info混乱は基本的な「ソースマッピング」なので、ブラウザの開発者ツールは、生成されたCSSの行番号ではなく、そのCSSを生成したSassルールの元の行番号とファイル名を表示できます。

Firebugには、これらの注釈を認識するFireSassプラグインがあります。 I と思うと Chromeにはビルトインサポートがありますが、実験的なフラグの裏にある可能性があります。

がありません。フォントと関係あります。 font-familyは、実際にはドキュメントのレンダリングに影響を与えずにJavaScriptにアクセスできるように、文字列をCSSに簡単に移動する簡単な方法だからです。また、はありません。はブートストラップと関係があります。これはscssコンパイラの一部です。

これは圧縮された出力には表示されません。これは本番環境で使用していることを望みます。 :)

Answer 2

Here is the variables file彼らは$icon-font-path変数を設定します。

フォントファイルのフォルダ名に$icon-font-pathが設定されているようです。必ずしもセキュリティホールであるとはかぎりません。フォントへの相対パスであるからです。

Answer 3

両方の答えが正しいです。要約すると、magicはありません。 ブートストラップは、$icon-font-pathをデフォルト値で初期化します。

$icon-font-pathに別の値を必要とするマネージャーに、ブートストラップのSCSSがある場合は、そのデフォルト値を上書きする必要があります。

構文$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 4

@guy mograbi：$ブートストラップSASS-資産ヘルパーがまだ定義されていないので

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

：ブートストラップ-SASS-3.3.6では、/bootstrap/bootstrap/_variables.scss @83で$アイコン・フォント・パスは、次のように宣言されています$ 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;