web-dev-qa-db-ja.com

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

最近、ノードプロジェクトで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;
}

2つの質問があります：

  1. これはセキュリティホールのようです。私のCSSを見るだけで、誰もが私のOSとディレクトリ構造について何かを推測することができます。このセキュリティホールを閉じる正しい方法は何ですか？
  2. それはどのように機能しますか？ほぼ理解できましたが、何かが足りません。 SCSSを見ると、bootstrapは$icon-font-pathを使用しているようです。これは明らかにこの絶対パスになります。 コンパスドキュメント を見ると、絶対値を提供していることがわかります。しかし、$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');
}
compass-sassbootstrap-sass
11
guy mograbi

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

Firebugには、これらのアノテーションを理解するFireSassプラグインがあります。 I think Chromeにはサポートが組み込まれていますが、実験的なフラグの背後にある可能性があります。

それはnothingフォントと関係があります。 font-familyが使用されているのは、ドキュメントのレンダリングに実際に影響を与えることなく、JavaScriptからアクセスできる方法で文字列をCSSに押し込む簡単な方法だからです。また、nothing Bootstrapと関係があります。これはscssコンパイラの一部です。

圧縮出力には含まれません。本番環境で使用していることを願っています。 :)

2
Eevee

どちらの答えも正しいです。要約すると、magicはありません。 Bootstrap $icon-font-pathをデフォルト値で初期化します。

$icon-font-pathに異なる値を必要とするマネージャーでincludeブートストラップの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モジュールを公開するための標準的なメカニズムのようです。

9
guy mograbi

ここに変数ファイルがあります ここで$icon-font-path変数を設定します。

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

7
Blair Anderson

@ 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-を上書きできます。 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;
_
0
bencergazda