wie funktioniert $icon-font-path arbeitet in bootstrap scss?
Ich habe vor kurzem angefangen mit bootstrap SCSS auf meine Knoten Projekt. Also ich habe app/bower_components/bootstrap-sass/lib/_glyphicons.scss
zum Beispiel.
Blick auf meine CSS-Ausgabe sehe ich Dinge wie:
@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;
}
Ich habe 2 Fragen:
- Wie es scheint, ein Sicherheits-Loch. Jeder kann sich ableiten, etwas über meine OS-und Verzeichnis-Struktur einfach durch einen Blick auf mein CSS. Was ist der richtige Weg, um diese Sicherheitslücke zu schließen?
- Wie funktioniert es? Ich habe fast verstanden, aber ich bin etwas fehlt. Blick auf die SCSS, ich sehe bootstrap ist mit
$icon-font-path
die anscheinend verwandelt sich in dieser absoluten Pfad. Blick auf compass-Dokumentation, sehe ich, dass Sie absolute Werte, aber keine$icon-font-path
Dies ist das Stück code ich beziehe mich auf:
@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');
}
InformationsquelleAutor guy mograbi | 2013-10-18
Du musst angemeldet sein, um einen Kommentar abzugeben.
Den
-sass-debug-info
Durcheinander ist rudimentär "source mapping", also browser-Entwickler-tools können Sie anzeigen, die ursprüngliche Zeilennummer und Dateiname der Sass Regel generiert, CSS (anstelle der Zeilennummer für die generierte CSS).Firebug hat eine FireSass plugin, das versteht, dass diese Anmerkungen. Ich denke Chrome hat eine eingebaute Unterstützung, aber es könnte sein, hinter ein experimentelles flag.
Es hat nichts zu tun mit Schriftarten;
font-family
wird nur verwendet, weil es eine einfache Möglichkeit zu schieben, eine Zeichenfolge in CSS in einer Weise, die noch zugänglich sind, ohne JavaScript eigentlich Auswirkungen auf die Darstellung des Dokuments. Es hat auch nichts zu tun mit Bootstrap; dies ist Teil derscss
compiler.Es werden dort nicht in komprimierte Ausgabe, die ich hoffe, du bist mit in der Produktion. 🙂
InformationsquelleAutor Eevee
Beide Antworten sind korrekt. Um es zusammenzufassen, es gibt keine
magic
.Bootstrap initialisiert
$icon-font-path
mit einem default-Wert.wenn Sie
include
bootstrap istSCSS
in manager erfordert, dass Sie einen anderen Wert für$icon-font-path
sollten Sie auch überschreiben die Standardwerte.Die syntax
$icon-font-path: some_value !default;
bedeutet - verwenden Sie diesen Wert, wenn Sie nicht bereits gesetzt ist.Also, wenn Sie sollten Sie das folgende tun
Wege könnte anders sein, in realen Szenarien.
Dies scheint ein standard-Mechanismus für die Veröffentlichung einer wiederverwendbaren SCSS-Module.
InformationsquelleAutor guy mograbi
Hier ist der Variablen-Datei , wo Sie die
$icon-font-path
variable.Sieht es aus wie
$icon-font-path
eingestellt ist foldername der font-Dateien. nicht unbedingt eine Sicherheitslücke, weil es ein relativer Pfad zu den Schriften.InformationsquelleAutor Blair Anderson
@guy mograbi: In der Bootstrap-SASS-3.3.6, $icon-font-path in
/bootstrap/bootstrap/_variables.scss @83
erklärt wird, wie diese:$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../fonts/bootstrap/") !default;
Da $bootstrap-sass-asset-helper ist noch nicht definiert, kann es nützlich sein, die _variables.scss vor dem überschreiben der $ - Symbol-include-Pfad, so können wir Lesen, "Einstellungen", und überschreiben Sie die $ - Symbol-font-Pfad zusammen mit dem wenn() Fällen.
Können wir so etwas wie:
Was genau meinst du?
zuweisen eines Wertes zu einer bereits deklarierten Variablen ist es nicht möglich, SASS. $icon-font-path: "some_path/hier"; ... $icon-font-path: "some_other_path/hier"; Der Wert von $icon-font-path "some_path/hier"
Der trick ist das !Standard-Flagge, die weit verbreitet ist und auch in der Bootstrap die _variables.scss-Datei. Machen Sie einen Versuch mit dem code unten.
Die Sache ist, dass Sie nicht überschreiben die variable restrospectively, aber tun können, bevor es Verwendung.Sie können sogar es versuchen, wenn eine neue Zeile nach der Definition der $ - Symbol-font-Pfad in der Bootstrap die _variables.scss, Zeile ~83.
$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../fonts/bootstrap/") !default; $icon-font-path: "/fonts/bootstrap/";
Was wir tun, ist die Deklaration der Variablen vor, einschließlich Bootstrap. Wir können auch lassen Sie die erste Zeile aus (@include [...]/bootstrap/_variables.scss;
),aber in diesem Fall müssen wir erklären die fehlende $bootstrap-sass-asset-helper als gut.InformationsquelleAutor bencergazda