Libsass: @import url(http://...) Fehler bei Schriftart-URLs

Erstellt am 14. Feb. 2014 · 6Kommentare · Quelle: sass/libsass

In meiner Scss-Datei habe ich diese Zeile:
<strong i="6">@import</strong> url(http://fonts.googleapis.com/css?family=Titillium+Web:400,300,200,600);

Tatsächliche Ergebnisse:

Wenn die Datei mit libsass kompiliert wird, wird die @import- Zeile vollständig

Erwartete Ergebnisse:

Die @import- Zeile sollte wörtlich in die endgültige CSS-Datei kopiert werden, da sie nicht auf eine lokale Datei

Ruby Sass verhält sich korrekt. Es verschiebt die @import- Anweisung wörtlich in die kompilierte CSS-Datei.

Technischer Hinweis:

Um dies zu beheben, reicht es nicht aus, das Vorhandensein von http:// zu testen. Viele Leute verwenden eine protokolllose URL, damit der Import sowohl auf HTTP- als auch auf HTTPS-Seiten funktioniert. Ein Beispiel hierfür wäre:

<strong i="20">@import</strong> url(//path/to/some/file.css);

Die doppelten Schrägstriche, die der Anweisung vorangehen, müssen als URL zu einer Remote-Ressource im Internet behandelt werden und daher muss diese @import- Anweisung wörtlich in die kompilierte CSS-Datei

Dev - Test Written

Quelle

bdkjones

Hilfreichster Kommentar

Ein vereinfachter Testfall:

.test {
    content: '';
}
<strong i="6">@import</strong> url('test.css');

Ruby Sass strukturiert das CSS korrekt so um, dass die @import (s) oben stehen:

<strong i="11">@import</strong> url("test.css");
.test {
  content: ''; }

Libsass produziert fälschlicherweise:

.test {
  content: ''; }

<strong i="15">@import</strong> url('test.css');

Wie oben erwähnt, sagt die CSS-Spezifikation : "Jede @import- Regel muss allen anderen Regeln vorangehen (außer der @charset- Regel, falls vorhanden)."

Abhängig von der Struktur des Sass kann und wird dieser Fehler Code erzeugen, bei dem @import Regeln nicht korrekt in die CSS-Ausgabe eingefügt und anschließend ignoriert werden.

Ein etwas verwandter kleiner Fehler/Unterschied in Libsass und Ruby Sass ist die Ausgabe des folgenden Tests:

<strong i="26">@import</strong> "//example.com/test.css";

Rubin Sass:

<strong i="30">@import</strong> "//example.com/test.css";

Libsass:

<strong i="34">@import</strong> url("//example.com/test.css");

Ich sehe keine Probleme, die sich speziell aus diesem Fehler ergeben, aber es ist ein interessanter Unterschied zu bemerken.

joeyhoer am 5. März 2014

👍2

Alle 6 Kommentare

Guter Fang. Sie können auch @import eine .css Datei erstellen, aber es sieht so aus, als würde sie explizit nach einer .css Erweiterung suchen. Als Workaround kann Folgendes dienen:

<strong i="9">@import</strong> "http://fonts.googleapis.com/css?family=Titillium+Web:400,300,200,600.css";

Aber eigentlich sollte das auch funktionieren:

<strong i="13">@import</strong> "http://fonts.googleapis.com/css?family=Titillium+Web:400,300,200,600";

kennethormandy am 14. Feb. 2014

👍2

Libsass sollte keine Importe "validieren", die auf eine entfernte Datei (eine im Internet) abzielen. Wenn die URI in der import-Anweisung remote ist (was man feststellen kann, indem man sieht, ob sie eine // Sequenz enthält), sollte libsass einfach diese gesamte @import Anweisung in das CSS werfen.

bdkjones am 14. Feb. 2014

👍1

Ich habe Ihr Beispiel im Master-Zweig ausprobiert und der Import erscheint in der Ausgabe (obwohl LibSass es nicht wie Ruby Sass an den Anfang der Datei verschiebt) ... haben Sie in den letzten Wochen gezogen?

akhleung am 15. Feb. 2014

Der Import muss am Anfang der Datei stehen. Das steht eindeutig in der CSS-Spezifikation: @import muss ganz oben stehen.

von meinem Iphone gesendet

Am 14. Februar 2014 um 15:02 Uhr schrieb Aaron Leung [email protected] :
Ich habe Ihr Beispiel im Master-Zweig ausprobiert und der Import erscheint in der Ausgabe (obwohl LibSass es nicht wie Ruby Sass an den Anfang der Datei verschiebt) ... haben Sie in den letzten Wochen gezogen?
—
Antworten Sie direkt auf diese E-Mail oder zeigen Sie sie auf GitHub an.

bdkjones am 16. Feb. 2014