सीएसएसलेस के साथ फ़ॉन्ट-फेस का उपयोग कैसे करें?

Question

वहाँ cssless और फॉन्ट-फेस पहले से ही के साथ मुद्दों के बारे में बात का एक सा हो गया है, उदाहरण के लिए यहाँ के लिए: How we can use @font-face in Less

लेकिन इस समस्या को एक अलग से एक लगता है, और मुझे आश्चर्य है कि किसी को भी इस के लिए वैकल्पिक हल मिल गया है या नहीं? मुझे लगता है कि मेरा कम वाक्यविन्यास सही है हालांकि।

अगर मैं निम्नलिखित लिखें:

.setFont (@fontName) { 
    @font-face { 
     font-family: '@{fontName}'; 
     src: url('../fonts/@{fontName}.eot'); 
     src: url('../fonts/@{fontName}.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/@{fontName}.ttf') format('truetype'); 
    } 
} 
.setFont ('myfont1'); 
.setFont ('myfont2'); 
.setFont ('myfont3'); 

यह उत्पादन निम्नलिखित होगा:

@font-face { 
    font-family: 'myfont1'; 
    src: url('../fonts/myfont1.eot'); 
    src: url('../fonts/myfont1.eot?#iefix') format('embedded-opentype'), 
    url('../fonts/myfont1.ttf') format('truetype'); 
} 
@font-face { 
    font-family: 'myfont1'; 
    src: url('../fonts/myfont1.eot'); 
    src: url('../fonts/myfont1.eot?#iefix') format('embedded-opentype'), 
    url('../fonts/myfont1.ttf') format('truetype'); 
} 
@font-face { 
    font-family: 'myfont1'; 
    src: url('../fonts/myfont1.eot'); 
    src: url('../fonts/myfont1.eot?#iefix') format('embedded-opentype'), 
    url('../fonts/myfont1.ttf') format('truetype'); 
} 

यह केवल पहला चर लेता है। मुझे आश्चर्य है कि ऐसा इसलिए है क्योंकि उन्हें तत्व के अंदर नहीं कहा जाता है - हालांकि मैंने इसे समान तत्वों के साथ तत्व के अंदर भी कॉल करने का प्रयास किया था।

आप फ़ॉन्ट-फेस के साथ सीएसएसलेस का उपयोग कैसे करते हैं?

धन्यवाद।

Answer 1

यह ऐसा इसलिए कर रहा है क्योंकि चर कम लेकिन स्थिरांक में तकनीकी रूप से चर नहीं हैं, और इसलिए इसे फिर से परिभाषित नहीं किया जा सकता है।

तो जब आप पहली बार @fontName को परिभाषित कर रहे हैं, तो इसे फिर से परिभाषित नहीं किया जा सकता है। यही कारण है कि आप डुप्लिकेट प्राप्त कर रहे हैं। दुर्भाग्यवश, आप उन्हें पैरामीटर की तरह उपयोग नहीं कर सकते हैं (जैसे कि सीमा-त्रिज्या (@ त्रिज्या) सेट करना, जो ऐसा लगता है कि आप क्या करने की उम्मीद कर रहे थे। इसकी नींव है, लेकिन इसमें कोई फर्क पड़ता है।

जिस तरह से आप इसका उपयोग कर रहे हैं एक चर (स्थिर) के रूप में, जिस तरह से आप इसका उपयोग करना चाहते हैं, लेकिन नहीं कर सकते, एक पैरामीट्रिक मिश्रण के रूप में है। यदि इसके दायरे के मामले में इसके बारे में सोचना आसान है। आप इस मामले में एक वैश्विक चर सेट कर रहे हैं, उस विशेष चयनकर्ता के लिए स्थानीय चर के विपरीत। जब आप सीमा-त्रिज्या सेट कर रहे हैं उदाहरण के लिए, आप इसे एक चयनकर्ता के भीतर सेट कर रहे हैं, इस प्रकार इसे उस चयनकर्ता के लिए स्थानीय चर बनाते हैं। ऊपर दिए गए उदाहरण में आप आवेदन नहीं कर रहे हैं .setFont एक चयनकर्ता, जहां इसे स्थानीय चर के रूप में उपयोग किया जा सकता है, लेकिन इसके बजाय इसे वैश्विक रूप में सेट किया जा सकता है।

एकमात्र तरीका आप इसे बंद करने में सक्षम हो सकते हैं @arguments का उपयोग कर रहा है, लेकिन यह केवल व्यक्तिगत @ फ़ॉन्ट-फेस स्टेटमेंट लिखने के रूप में उतना ही कोड ले सकता है। चूंकि @ फ़ॉन्ट-फेस तकनीकी रूप से एक चयनकर्ता है, इसलिए इसका हमेशा उपयोग इस तरह किया जाएगा जो इसके संदर्भ में उपयोग किए जाने वाले चर का व्यवहार करता है।