Libsass: @import url(http://...) फ़ॉन्ट URL के लिए विफल

को निर्मित 14 फ़र॰ 2014 · 6टिप्पणियाँ · स्रोत: sass/libsass

मेरी एससीएसएस फ़ाइल में मेरे पास यह पंक्ति है:
<strong i="6">@import</strong> url(http://fonts.googleapis.com/css?family=Titillium+Web:400,300,200,600);

वास्तविक परिणाम:

जब फ़ाइल को libsass के साथ संकलित किया जाता है, तो @import लाइन पूरी तरह से जाती है और आउटपुट फ़ाइल में प्रकट नहीं होती है।

अपेक्षित परिणाम:

@import लाइन को अंतिम सीएसएस फ़ाइल में, शब्दशः कॉपी किया जाना चाहिए क्योंकि यह स्थानीय फ़ाइल को लक्षित नहीं करता है। इसे सीएसएस फ़ाइल में प्रदर्शित करने की आवश्यकता है ताकि मेरा फ़ॉन्ट सही ढंग से लोड हो।

रूबी सास सही ढंग से व्यवहार करता है। यह @import स्टेटमेंट, शब्दशः को संकलित CSS फ़ाइल में ले जाता है।

तकनीकी नोट:

इसे ठीक करने में, http:// की उपस्थिति के लिए परीक्षण करना पर्याप्त नहीं है। कई बार, लोग प्रोटोकॉल-रहित URL का उपयोग करेंगे ताकि आयात HTTP और HTTPS दोनों पृष्ठों पर काम करे। इसका एक उदाहरण होगा:

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

स्टेटमेंट को आगे बढ़ाने वाले डबल स्लैश को इंटरनेट पर एक दूरस्थ संसाधन के URL के रूप में माना जाना चाहिए और इसलिए, इस @import स्टेटमेंट को संकलित सीएसएस फ़ाइल में शब्दशः रखा जाना चाहिए।

Dev - Test Written

स्रोत

bdkjones

सबसे उपयोगी टिप्पणी

एक सरलीकृत परीक्षण मामला:

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

रूबी सास सीएसएस को सही ढंग से पुनर्गठित करता है जैसे कि @import शीर्ष पर हैं:

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

Libsass गलत तरीके से उत्पादन करता है:

.test {
  content: ''; }

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

जैसा कि ऊपर उल्लेख किया गया है कि सीएसएस स्पेक कहता है: "कोई भी @import नियम अन्य सभी नियमों से पहले होना चाहिए ( @charset नियम को छोड़कर, यदि मौजूद है)।"

Sass की संरचना कैसे की जाती है, इस पर निर्भर करते हुए, यह बग कोड उत्पन्न कर सकता है और करेगा जहां @import नियम CSS आउटपुट में सही ढंग से सम्मिलित नहीं किए गए हैं और बाद में उन्हें अनदेखा कर दिया गया है।

Libsass और Ruby Sass में कुछ हद तक संबंधित मामूली बग/अंतर निम्न परीक्षण का आउटपुट है:

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

रूबी सास:

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

लिबसास:

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

मुझे विशेष रूप से इस बग से उत्पन्न होने वाली किसी भी समस्या का अनुमान नहीं है, हालांकि यह ध्यान देने योग्य एक दिलचस्प अंतर है।

joeyhoer 5 मार्च 2014

👍2

सभी 6 टिप्पणियाँ

अच्छी पकड़। आप @import एक .css फ़ाइल भी कर सकते हैं, लेकिन ऐसा लगता है कि यह स्पष्ट रूप से .css एक्सटेंशन की जांच कर रहा है। निम्नलिखित एक समाधान के रूप में काम कर सकता है:

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

लेकिन वास्तव में, यह भी काम करना चाहिए:

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

kennethormandy 14 फ़र॰ 2014

👍2

Libsass को उन आयातों को "मान्य" नहीं करना चाहिए जो एक दूरस्थ फ़ाइल (इंटरनेट पर एक) को लक्षित करते हैं। यदि आयात विवरण के अंदर यूआरआई दूरस्थ है (जिसे यह देखकर पता लगाया जा सकता है कि इसमें // अनुक्रम है), तो libsass को उस पूरे @import कथन को सीएसएस में टॉस करना चाहिए।

bdkjones 14 फ़र॰ 2014

👍1

मैंने मास्टर शाखा पर आपके उदाहरण की कोशिश की और आयात आउटपुट में दिखाई देता है (हालांकि लिबसास इसे फ़ाइल के शीर्ष पर नहीं ले जाता है जिस तरह से रूबी सैस करता है) ... क्या आपने पिछले कुछ हफ्तों में खींचा है?

akhleung 15 फ़र॰ 2014

आयात फ़ाइल के शीर्ष पर होना चाहिए। यह स्पष्ट रूप से CSS युक्ति में है: @import शीर्ष पर होना चाहिए।

मेरे आईफोन से भेजा गया

14 फरवरी 2014 को अपराह्न 3:02 बजे, आरोन लेउंग नोटिफिकेशन @github.com ने लिखा:
मैंने मास्टर शाखा पर आपके उदाहरण की कोशिश की और आयात आउटपुट में दिखाई देता है (हालांकि लिबसास इसे फ़ाइल के शीर्ष पर नहीं ले जाता है जिस तरह से रूबी सैस करता है) ... क्या आपने पिछले कुछ हफ्तों में खींचा है?
-
इस ईमेल का सीधे उत्तर दें या इसे GitHub पर देखें।

bdkjones 16 फ़र॰ 2014