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:

  1. 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?
  2. 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

  1. 2

    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 der scss compiler.

    Es werden dort nicht in komprimierte Ausgabe, die ich hoffe, du bist mit in der Produktion. 🙂

    InformationsquelleAutor Eevee

  2. 9

    Beide Antworten sind korrekt. Um es zusammenzufassen, es gibt keine magic.
    Bootstrap initialisiert $icon-font-path mit einem default-Wert.

    wenn Sie include bootstrap ist SCSS 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 

    /* override icon-font-path value and include scss */
$icon-font-path: bower_components/bootstrap/fonts; 
@include bower_components/bootstrap/bootstrap.scss;

    Wege könnte anders sein, in realen Szenarien.

    Dies scheint ein standard-Mechanismus für die Veröffentlichung einer wiederverwendbaren SCSS-Module.

    kann das jemand vereinfachen es mit der demo ?

    InformationsquelleAutor guy mograbi

  3. 7

    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

  4. 0

    @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:

    @include bower_components/bootstrap/bootstrap/_variables.scss;
$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "/fonts/bootstrap/");
@include bower_components/bootstrap/bootstrap.scss;
    Mit SASS können Sie nicht überschreiben, die bereits deklarierten Variablen.
    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

Schreibe einen Kommentar