comment $ icon-font-path fonctionne dans bootstrap scss?
J'ai récemment commencé à utiliser bootstrap SCSS sur mon nœud de projet. J'ai donc app/bower_components/bootstrap-sass/lib/_glyphicons.scss
par exemple.
En regardant mon CSS sortie je vois des choses comme:
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/some\/path\/project\/app\/bower_components\/bootstrap-sass\/lib\/_normalize\.scss}line{font-family:@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;
}
00332}}
audio,
canvas,
video {
display: inline-block;
}
J'ai 2 questions:
- Cela semble être un trou de sécurité. Tout le monde peut en déduire quelque chose à propos de mes OS et la structure de répertoire tout simplement en regardant ma feuille de style CSS. Quelle est la bonne façon de fermer ce trou de sécurité?
- Comment ça fonctionne? Je me suis presque tout prévu, mais il me manque quelque chose. En regardant le SCSS, je vois le bootstrap est à l'aide de
$icon-font-path
qui, apparemment, se transforme en ce chemin d'accès absolu. En regardant boussole de la documentationje vois qu'ils fournissent des valeurs absolues, mais pas de$icon-font-path
C'est le morceau de code que j'ai fais référence:
@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');
}
source d'informationauteur guy mograbi
Vous devez vous connecter pour publier un commentaire.
La
-sass-debug-info
désordre est rudimentaire "de la source de la cartographie", de sorte que le navigateur outils de développement peut vous montrer l'original numéro de ligne et le nom de fichier de la Sass règle qui a généré cette CSS (au lieu du numéro de ligne pour le CSS généré).Firebug a un FireSass plugin qui comprend ces annotations. Je pense google Chrome dispose d'un support intégré, mais il pourrait être derrière une expérimentales drapeau.
Il a rien à faire avec des polices de caractères,
font-family
sert juste parce que c'est un moyen facile de pousser une chaîne en CSS dans un sens, c'est toujours accessible à JavaScript sans affecter le rendu du document. Il a également rien à voir avec Bootstrap; c'est une partie de lascss
compilateur.Il ne sera pas là en sortie compressé, qui je l'espère vous utilisez dans la production. 🙂
Les deux réponses sont correctes. Pour résumer, il n'y a pas
magic
.Bootstrap initialise
$icon-font-path
avec une valeur par défaut.si vous
include
bootstrap estSCSS
dans un gestionnaire qui nécessite une valeur différente pour$icon-font-path
vous devriez également de remplacer leur valeur par défaut.La syntaxe
$icon-font-path: some_value !default;
moyen - utilisez cette valeur si ce n'est déjà fait.Alors, quand vous vous devez effectuer les opérations suivantes
chemins peuvent être différents dans des scénarios réels.
Ce qui semble être un mécanisme standard pour la publication d'une réutilisables SCSS modules.
Voici les variables fichier où ils ont mis le
$icon-font-path
variable.Il ressemble
$icon-font-path
est réglé sur le dossier des fichiers de police. pas nécessairement un trou de sécurité parce que c'est un chemin relatif aux polices.@guy mograbi: Dans le Bootstrap-SASS-3.3.6, l'icône $-font-chemin dans
/bootstrap/bootstrap/_variables.scss @83
est déclaré comme ceci:$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../fonts/bootstrap/") !default;
Depuis $bootstrap-sass-actif-helper n'est pas encore défini, il peut être utile d'inclure la _variables.scss avant d'écraser l'icône $-inclure-chemin, afin que nous puissions lire les "paramètres", et de remplacer l'icône $-font-chemin d'accès avec le si ().
Nous pouvons utiliser quelque chose comme: