Как работает $icon-font-path в scst-загрузчике?

Недавно я начал использовать bootstrap SCSS в моем проекте node. Итак, у меня есть 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 вопроса:

  • Это похоже на дыру в безопасности. Каждый может вывести что-то о моей ОС и структуре каталогов, просто взглянув на мой CSS. Каков правильный способ закрыть это отверстие безопасности?
  • Как это работает? Я почти понял, но чего-то не хватает. Глядя на 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');
}

Ответы

Ответ 1

Беспорядок -sass-debug-info - рудиментарное "сопоставление источников", поэтому инструменты разработчика браузера могут показать вам исходный номер строки и имя файла правила Sass, сгенерировавшего этот CSS (вместо номера строки для сгенерированного CSS).

Firebug имеет плагин FireSass, который понимает эти аннотации. Я думаю, что Chrome имеет встроенную поддержку, но это может быть за экспериментальным флагом.

Это не имеет никакого отношения к шрифтам; font-family используется только потому, что это простой способ перетащить строку в CSS таким образом, который все еще доступен для JavaScript, фактически не влияя на рендеринг документа. Он также не имеет ничего общего с Bootstrap; это часть компилятора scss.

Он не будет в сжатом выпуске, который, я надеюсь, вы используете в производстве.:)

Ответ 2

Оба ответа верны. Подводя итог, нет magic. Bootstrap инициализирует $icon-font-path значением по умолчанию.

если вы include bootstrap 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.

Ответ 3

Вот файл переменных, в котором они устанавливают переменную $icon-font-path.

Похоже, что $icon-font-path устанавливается в имя папки файлов шрифтов. не обязательно отверстие безопасности, потому что это относительный путь к шрифтам.

Ответ 4

@guy mograbi: В Bootstrap-SASS-3.3.6 $icon-font-path в /bootstrap/bootstrap/_variables.scss @83 объявляется следующим образом:

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

Так как $bootstrap-sass-asset-helper еще не определен, может быть полезно включить _variables.scss перед перезаписью $icon-include-path, поэтому мы можем прочитать "настройки" и перезаписать значок $-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;