आयात .css फ़ाइल को .less फ़ाइल में

Question

क्या आप .css फ़ाइलों को .less फ़ाइलों में आयात कर सकते हैं ...?

मैं कम से परिचित हूं और अपने सभी विकास के लिए इसका उपयोग करता हूं। मैं नियमित रूप से एक संरचना का उपयोग करता हूं:

@import "normalize";

//styles here

@import "mixins";
@import "media-queries";
@import "print";

सभी आयात अन्य .less फ़ाइलें हैं और सभी को वैसा ही काम करना चाहिए जैसा कि करना चाहिए।

मेरा वर्तमान मुद्दा यह है: मैं एक .css फ़ाइल को .less में आयात करना चाहता हूं जो कि .css फ़ाइल में उपयोग की जाने वाली शैलियों का संदर्भ इस प्रकार है:

@import "../style.css";

.small {
    font-size:60%;
    .type;
}
// other styles here

.Css फ़ाइल में एक वर्ग होता है जिसे बुलाया जाता है .typeलेकिन जब मैं त्रुटि रहित फ़ाइल को संकलित करने का प्रयास करता हूं तो मुझे त्रुटि मिलती हैNameError: .type is undefined

क्या .less फ़ाइल आयात नहीं करेगा। केवल। या मैं इसे गलत कह रहा हूँ ...?!

Comments

LESS CSS पर वापस आता है, इसलिए आपको सिर्फ style.css को style.less में बदलने में सक्षम होना चाहिए, फिर इसे सामान्य रूप से आयात करें ... जब तक कि style.cs का नाम बदलना एक विकल्प नहीं है

— jackwanders

हाँ, दुर्भाग्य से .css फ़ाइल का नाम बदलना वास्तव में संभव नहीं है।

— श्री जॉनी वुड

एक ही समस्या है। कृपया मुद्दे को समर्थन करें github.com/cloudhead/less.js/issues/303

— यारोस्लाव

यदि आपको .css को बाहरी रूप से संदर्भित करने की आवश्यकता नहीं है, और उसी समय आपको .css फ़ाइल को संशोधित (नाम बदलना) नहीं करना चाहिए, तो आप इसके लिए एक प्रतीकात्मक लिंक बना सकते हैं जिसमें .lessएक्सटेंशन है। फिर इसे एक .lessफाइल के रूप में देखें । एक प्रतीकात्मक लिंक होने के नाते, यह उन्हें सिंक्रनाइज़ करने के लिए बोझ को हटा देता है क्योंकि आपके .css परिवर्तन तुरंत .less फ़ाइल को आयात किए जाने को प्रभावित करते हैं। दोष यह है कि आपको बाद के परिवर्तनों के बाद अंतिम सीएसएस को फिर से इकट्ठा करना चाहिए। विंडोज में प्रतीकात्मक संबंध बनाने की जानकारी के लिए, MKLINK /?कमांड विंडो में टाइप करें

— Ivaylo Slavov

@jackwanders, नाम बदलना आवश्यक नहीं है, क्योंकि LESS CSS पर वापस आता है (जैसा कि आप सही ढंग से बताते हैं)। आप .cssइनलाइन (less)निर्देश का उपयोग करके फ़ाइल आयात कर सकते हैं और इस तथ्य का लाभ उठा सकते हैं कि .cssसिंटैक्स एक वैध .lessसिंटैक्स है

— ira

Answer 1

आप किसी फ़ाइल को किसी विकल्प के रूप में निर्दिष्ट करके एक विशेष प्रकार के रूप में व्याख्या करने के लिए बाध्य कर सकते हैं, जैसे:

@import (css) "lib";

उत्पादन होगा

@import "lib";

तथा

@import (less) "lib.css";

lib.cssफ़ाइल आयात करेगा और इसे कम मानेंगे। यदि आप निर्दिष्ट करते हैं कि कोई फ़ाइल कम है और इसमें कोई एक्सटेंशन शामिल नहीं है, तो कोई भी जोड़ा नहीं जाएगा।

Comments

यह सही जवाब है। तीसरा एक सीएसएस कोड को कम कोड के रूप में आयात करेगा + संकलित करेगा और निर्देश अक्षुण्ण को नहीं छोड़ेगा।

— CMCDragonkai

मुझे लगता है कि @import (शामिल) "lib.css" का उपयोग किया जाना चाहिए। मुझे संकलक से झूठ बोलने का शब्दार्थ पसंद नहीं है। निश्चित रूप से जब आप जानते हैं कि फ़ाइल में कोई कम कोड नहीं है।

यह foo.css के लिए एक अतिरिक्त http-request बनाएगा, इसलिए (inline)निर्देश (देखें stackoverflow.com/a/22594082/160968 ) अब बेहतर है

— उर्स

(inline)काम नहीं करेगा क्योंकि यह बाहरी संदर्भों को फोंट या अन्य @import'एड सीएसएस' फाइलों में नहीं बदलता है । आप बस एक बड़ी सीएसएस फ़ाइल के साथ समाप्त करते हैं जो बहुत सारे 404 HTTP अनुरोधों का कारण बनता है ....

— user3338098

नवीनतम संपादन को वापस लेना क्योंकि यह केवल गलत था और Q. का उत्तर नहीं दिया था।

— सात-चरण-अधिकतम

Answer 2

यदि आप चाहते हैं कि आपका CSS बिना प्रोसेस किए आउटपुट में कॉपी हो जाए, तो आप (inline)निर्देश का उपयोग कर सकते हैं । जैसे,

@import (inline) '../timepicker/jquery.ui.timepicker.css';

Comments

उत्तम। यह तब अच्छी तरह से काम करता है जब आप कुछ CSS फाइलों (जैसे कि एक ie7.less में) को सम्‍मिलित करना चाहते हैं, लेकिन जरूरी नहीं कि उन्‍हें संसाधित करें (जैसे कि बूटस्ट्रैप-ie7 भावों का उपयोग करता है, जिसे LESS अच्छी तरह से संभाल नहीं पाता है)।

— जो

बहुत मददगार। @import (css) "styles.css";मेरे लिए काम नहीं किया।

— ivkremer 15

वे दोनों विभिन्न उपयोग मामलों को संबोधित करते हैं। के साथ (css), @importनिर्देश जैसा है वैसा ही रहेगा, और परिणामस्वरूप सीएसएस फ़ाइल को रनटाइम पर ब्राउज़र द्वारा लोड किया जाएगा; के साथ (inline), सीएसएस फ़ाइल की सामग्री वास्तव में संकलित स्टाइलशीट में आयात की जाती है, जो कि आप चाहते हैं यदि वह फ़ाइल उदाहरण के लिए आपके वेब रूट से बाहर है। ध्यान दें कि जब फ़ाइल के रूप में @importआईएनजी डिफ़ॉल्ट व्यवहार ध्वज .cssके समान (css)होता है - तो अधिक जानकारी के लिए डॉक्स पढ़ें :)

— नीमजी

तो यह स्पष्ट रूप से काम नहीं करेगा अगर आपकी सीएसएस फ़ाइल में @importनिर्देश हैं जैसे कि "प्रसंस्करण" की आवश्यकता होगी।

— user3338098

क्या 'इनलाइन' का मतलब यह है कि यह सब आयात भी इनलेट होगा? क्या पुनरावर्ती इनलाइन करने का कोई तरीका है?

— स्ट्रीट लाइट

Answer 3

मुझे संस्करण 1.7.4 के साथ निम्नलिखित का उपयोग करना था

@import (less) "foo.css"

मुझे पता है कि स्वीकृत उत्तर है, @import (css) "foo.css"लेकिन यह काम नहीं किया। यदि आप अपने नए कम फ़ाइल में अपने सीएसएस वर्ग का पुन: उपयोग करना चाहते हैं, तो आपको उपयोग करने की आवश्यकता है (less)और नहीं (css)।

प्रलेखन की जाँच करें ।

Comments

स्वीकार किए जाते हैं जवाब सही विकल्प शुरू में था (हाँ, (less)है केवल विकल्प है यदि आप एक सीएसएस फ़ाइल से कुछ शैलियों का पुन: उपयोग करना चाहते हैं), लेकिन किसी कारण से @Fractalf अपने नवीनतम संपादन के साथ सही हिस्सा निकाल दिया।

— सात चरणों-अधिकतम

आप "संदर्भ" और "कम" को जोड़ सकते हैं:@import (less, reference) "foo.css"

— स्कार्लॉट

Answer 4

अपनी css फ़ाइल के फ़ाइल एक्सटेंशन को बदलें .less। आपको इसमें कोई LESS लिखने की आवश्यकता नहीं है; सभी सीएसएस वैध लेस है (एमएस सामान को छोड़कर जिसे आपको बचना है, लेकिन यह एक और मुद्दा है।)

प्रति Fractalf का जवाब इस v1.4.0 में तय हो गई है

Comments

तकनीकी रूप से, यह CSS फ़ाइल आयात नहीं कर रहा है।

— nilskp

@nilskp आप सही हैं; लेकिन यदि आप किसी अन्य फ़ाइल में कक्षाओं का उपयोग करना चाहते हैं, तो आपको CSS नहीं, बल्कि LESS फ़ाइल की आवश्यकता है।

— मैथलेटिक्स

@nilskp आप कह रहे हैं कि फ़ाइल को LESS के रूप में पार्स करने के लिए एक्सटेंशन को बदलना बहुत अधिक है?

— मैथलेटिक्स

हैं, निश्चित रूप से यह है। कुछ छोटे होम प्रोजेक्ट के बाहर सोचने की कोशिश करें जहां आप सभी फाइलों के मालिक हैं। बड़ी, बहु-लोगों की परियोजनाओं के बारे में सोचें, जहां हर कोई LESS का उपयोग नहीं कर रहा है। ऐसे कई उपयोग मामले हैं जहां फ़ाइल नाम बदलना संभव नहीं है।

— nilskp

आपको ध्यान रखना चाहिए कि अगर आपके सीएसएस में कुछ है: कैल्क (100% - 45px); और आप ब्राउज़र में चाहते हैं। यदि कम फ़ाइल को कम के रूप में संसाधित करता है, तो अंतिम आउटपुट होगा: कैल्क (55%); क्योंकि कैल्क कम होता है।

— क्रिस्टोफ़ Aenderl

Answer 5

से कम वेबसाइट :

यदि आप CSS फ़ाइल आयात करना चाहते हैं, और इसे संसाधित करने के लिए LESS नहीं चाहते हैं, तो बस .css एक्सटेंशन का उपयोग करें:

@import "lib.css"; निर्देश बस के रूप में छोड़ दिया जाएगा, और सीएसएस आउटपुट में समाप्त होगा।

जैसा कि नीचे दिए गए टिप्पणियों में jitbit बताते हैं, यह वास्तव में केवल विकास के उद्देश्यों के लिए उपयोगी है, क्योंकि आप अनावश्यक @importबैंडविड्थ को कीमती बैंडविड्थ का उपभोग नहीं करना चाहते हैं ।

Comments

यह फ़ाइल आयात नहीं करेगा, यह @import निर्देश को बरकरार रखेगा। यह अभी भी काम करेगा, लेकिन आपको सीएसएस-आयात से बचना चाहिए - इस डेवलपर्स

— एलेक्स

जानकारी के लिए धन्यवाद @jbitbit। व्यक्तिगत रूप से, मुझे @importविकास के दौरान उपयोग करना आसान लगता है , फिर उत्पादन में जाने पर आयातित फ़ाइलों को एक ही स्टाइलशीट में संयोजित और छोटा करना।

— वेबदेवीक

यदि आप प्रश्न को ध्यान से पढ़ते हैं (और सिर्फ हेडर लाइन नहीं है), तो आप देखेंगे कि ओपी सीएसएस फाइल में एक क्लास को मिक्सिन के रूप में संदर्भित करना चाहता है, जो कि संभव नहीं है अगर इसे एक साधारण सीएसएस आयात के रूप में देखा जाए।

— विस्मय

Answer 6

इसे इस्तेमाल करे :

@import "lib.css";

आधिकारिक दस्तावेज से:

आप सीएसएस और कम फ़ाइलों दोनों को आयात कर सकते हैं। केवल कम फ़ाइल आयात विवरण संसाधित किए जाते हैं, सीएसएस फ़ाइल आयात विवरण को वैसे ही रखा जाता है जैसे वे हैं। यदि आप CSS फ़ाइल आयात करना चाहते हैं, और इसे संसाधित करने के लिए LESS नहीं चाहते हैं, तो बस .css एक्सटेंशन का उपयोग करें:

---

स्रोत: http://lesscss.org/

Comments

यदि आप प्रश्न को ध्यान से पढ़ते हैं (और सिर्फ हेडर लाइन नहीं है), तो आप देखेंगे कि ओपी सीएसएस फाइल में एक वर्ग को मिक्सिन के रूप में संदर्भित करना चाहता है, जो कि संभव नहीं है अगर इसे एक साधारण सीएसएस आयात के रूप में देखा जाए।

— खौफ

Answer 7

यदि आप एक सीएसएस-फाइल को एक संदर्भ के रूप में आयात करना चाहते हैं (उदाहरण के लिए मिक्सिंस में कक्षाओं का उपयोग करने के लिए) लेकिन पूरी सीएसएस फाइल को उस परिणाम में शामिल न करें जिसमें आप उपयोग कर सकते हैं @import (less,reference) "reference.css";:

my.less

 @import (less,reference) "reference.css";
 .my-class{
     background-color:black;
     .reference-class;
     color:blue;
 }

reference.css

.reference-class{
    border: 1px solid red;
}

* परिणाम (my.css) के साथ lessc my.less out/my.css*

.my-class {
  background-color: black;
  border: 1px solid red;
  color: blue;
}

मैं उपयोग कर रहा हूँ lessc 2.5.3

Comments

मुझे यही चाहिए था। हालाँकि, मुझे विस्तार सिंटैक्स का उपयोग करना पड़ा &:extend(.reference-class all);:। सीधे कक्षा को संदर्भित करने के परिणामस्वरूप एक जटिल त्रुटि हुई।

— जेन्स न्यूबॉयर

Answer 8

यदि आप एक सीएसएस फ़ाइल आयात करना चाहते हैं जिसे इस लाइन के कम उपयोग के रूप में जाना चाहिए:

.ie {
  @import (less) 'ie.css';
}

Answer 9

चूंकि 1.5.0 यू 'इनलाइन' कीवर्ड का उपयोग कर सकता है।

उदाहरण: @import (इनलाइन) "नहीं-कम-संगत-cs";

आप इसका उपयोग तब करेंगे जब CSS फ़ाइल कम संगत न हो; ऐसा इसलिए है क्योंकि कमतर ज्ञात मानकों का समर्थन करता है सीएसएस, यह कुछ स्थानों पर टिप्पणियों का समर्थन नहीं करता है और सीएसएस को संशोधित किए बिना सभी ज्ञात सीएसएस हैक का समर्थन नहीं करता है। तो आप इसका उपयोग आउटपुट में फ़ाइल को शामिल करने के लिए कर सकते हैं ताकि सभी सीएसएस एक फ़ाइल में हो।

(स्रोत: http://lesscss.org/features/#import-directives-feature )