как $icon-font-path работает в bootstrap scss?

Недавно я начал использовать 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 вопроса:

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

bootstrap-sass compass-sass
person guy mograbi    schedule 18.10.2013    source источник

Ответы (4)


arrow_upward
2
arrow_downward

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

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

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

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

person Eevee    schedule 07.11.2013

arrow_upward
9
arrow_downward

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

если вы include загрузите 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.

person guy mograbi    schedule 08.11.2013
comment
может кто-нибудь упростить его с демо? - person Deepak Yadav; 19.04.2016

arrow_upward
7
arrow_downward

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

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

person Blair Anderson    schedule 07.11.2013

arrow_upward
0
arrow_downward

@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, чтобы мы могли прочитать «настройки» и перезаписать $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;
person bencergazda    schedule 20.01.2016
comment
@BojanBedrač Что именно ты имеешь в виду? - person bencergazda; 28.04.2016
comment
присвоение значения уже объявленной переменной невозможно в SASS. $icon-font-path: какой-то_путь/здесь; ... $icon-font-path: some_other_path/здесь; Значение $icon-font-path равно some_path/here. - person Bojan Bedrač; 11.05.2016
comment
Хитрость заключается в флаге !default, который также широко используется в файле Bootstrap _variables.scss. Попробуйте использовать приведенный ниже код. - person bencergazda; 11.05.2016
comment
Дело в том, что вы не можете повторно перезаписать переменную, но можете сделать это до ее использования. Вы даже можете попробовать это, если поместите новую строку после определения $icon-font-path в Bootstrap _variables.scss, строка ~ 83. $icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../fonts/bootstrap/") !default; $icon-font-path: "/fonts/bootstrap/"; Что мы делаем, так это объявляем переменную перед включением Bootstrap. Мы можем даже опустить первую строку (@include [...]/bootstrap/_variables.scss;), но в этом случае нам также нужно объявить отсутствующий $bootstrap-sass-asset-helper. - person bencergazda; 11.05.2016