क्या कोई ऐसा टूल है जो सीएसएस को कम.केएस में परिवर्तित करता है?

Question

मेरे पास बहुत बड़ी सीएसएस फ़ाइल है, जिसे मैं कम में बदलना चाहता हूं। जब मैंने CSS लिखा था तो मैं कम नहीं जानता था। लेकिन मैं अभी भी अपने पुराने CSS का उपयोग करना चाहता हूं।

क्या कोई उपकरण है जो मुझे इसे स्वचालित रूप से परिवर्तित करने में मदद कर सकता है?

Comments

मेरे संपादन बलो देखें।

— फतजाज़ी

आपको @Simone Carletti की प्रतिक्रिया की जांच करनी चाहिए और शायद जो आप वास्तव में थोड़ा पूछ रहे हैं उस पर विस्तार करें। आपकी फ़ाइल का नाम बदलने से परे, कोई वास्तविक "रूपांतरण" आवश्यक नहीं हो सकता है।

— सू '

दिलचस्प है, लेकिन मुझे आश्चर्य है कि अगर सीएसएस फ़ाइलों के आकार को कम करने के लिए जेएस कोड (कम.जेएस) के 33KB को जोड़ने के लायक है।

— मार्को डेमायो

मैं स्पष्ट रूप से JavaScipt संकलक का उपयोग नहीं कर रहा हूँ। और सीएसएस का आकार इसका उपयोग करने का कारण नहीं है। स्थिरता का कारण है। :)

— जेएस-कोडर

Answer 1

मुझे वास्तव में अब कुछ मिला: http://leafo.net/lessphp/lessify/

यह एक मूल स्वरूपण करता है, जैसे:

#header {
/* ... */
}

#header p {
/* ... */
}

सेवा मेरे

#header {
/* ... */
p {
/* ... */
}
}

Answer 2

दरअसल, LESS के साथ काम करना शुरू करने के लिए आपको किसी भी रूपांतरण उपकरण की आवश्यकता नहीं है। LESS सिंटैक्स CSS के साथ पीछे की ओर संगत है । इसका मतलब है कि किसी भी CSS फ़ाइल को LESS फ़ाइल मान्य है।

बस अपने CSS को प्राप्त करें और इसे LESS फ़ाइल में बदलें। फिर अपने परिवर्तनों के साथ LESS- विशिष्ट सुविधाओं का उपयोग करें। जितना अधिक आप फ़ाइल को अपडेट करेंगे, उतना ही आप LESS सुविधाओं का उपयोग कर पाएंगे।

मैंने SCSS और 10 सीएसएस फाइलों के साथ एक बहुत बड़ी परियोजना के लिए भी यही किया। SCSS के साथ सभी CSS को फिर से लिखना लगभग असंभव (और समय की एक बड़ी बर्बादी) था। मैंने बस इसका नाम बदल दिया, फिर हर बार जब मैं CSS फ़ाइल पर काम कर रहा था, तो मैंने मिश्रण, चर और इतने पर लाभ लेने के लिए कोड पर छोटे रीफैक्टरिंग को निष्पादित किया।

Comments

यह एक बहुत अच्छी बात लाता है। अब तक के उत्तर प्रश्न के "कन्वर्ट" भाग पर ध्यान केंद्रित करते हुए, मिक्सिन आदि करते हुए प्रतीत होते हैं, न कि केवल वर्तमान फ़ाइल को LESS वर्कफ़्लो में स्विच करने के लिए उपयोग किया जा सकता है।

— सु '

Answer 3

क्या आपने कम से कम देखा है? यह सीएसएस को कम से कम परिवर्तित करने में बहुत बेहतर है। विशेष रूप से, Lessify आपकी कक्षाओं को बहुत अच्छी तरह से अनुकूलित नहीं करता है। इसने ब्राउज़र को अपने सभी उत्पन्न मिश्रणों की नकल की, निरर्थक विशेषताएँ बनाईं। यह स्पष्ट है कि यह अभी भी प्रायोगिक स्तर पर है। न तो उपयोगिताएं शब्दार्थ निर्धारित कर सकती हैं, इसलिए वे मूल्यों को भाव, संस्करण या पैरामीट्रिक मिश्रणों में परिवर्तित नहीं कर सकती हैं।

कम से कम अनुकूलन का एक बेहतर काम करता है और लगता है कि यह अधिक कार्यात्मक है। यहां तक ​​कि यह आपके लिए छद्मकोश भी संभालता है:

http://toki-woki.net/p/least/

ये उपकरण बड़ी preexisting CSS फाइलों के साथ काम करने के लिए आदर्श हैं। यहां मैं सीएसएस को LESS में बदलने की सलाह देता हूं (सुनिश्चित करें कि आप मूल CSS फाइलों की एक प्रति रखते हैं):

1. यदि आप कई additive CSS फाइलों के साथ काम कर रहे हैं, तो उन्हें एक सिंगल CSS फाइल में मर्ज करें। यह सुनिश्चित करता है कि सब कुछ LESSied और एक साथ अनुकूलित है।

2. एक ऑनलाइन सीएसएस सफाई उपयोगिता के माध्यम से परिणामी सीएसएस कोड चलाएं। मेरे पास cleancss के साथ अच्छे परिणाम हैं: http://www.cleancss.com/ । यह किसी भी बाहरी और निरर्थक मार्कअप को हटा देगा जो कि LESS कनवर्टर द्वारा पकड़ा नहीं जा सकता है।

3. @Media और किसी भी स्टाइल रीसेट को आप CSS फ़ाइल में निकालें। वे समस्याएं पैदा कर सकते हैं या संभावित अतिरेक का परिचय दे सकते हैं। यह शायद एक अलग फ़ाइल में रीसेट रखने के लिए एक अच्छा विचार है।

4. परिणामी CSS फ़ाइल को Least में पेस्ट करें और जानवर को देखें।

5. अपने रिसेट और @ स्क्रीन को फिर से शुरू करें।

6. अब जब आप काम कर रहे हैं, तो प्रत्येक विशेषताओं के माध्यम से जाएं और रिफैक्टरिंग के लिए अच्छे उम्मीदवार ढूंढें और उन्हें LESS चर और अभिव्यक्तियों में बदल दें। सीएसएस रंग और फ़ॉन्ट विशेषताएँ फैक्टर, सरल वैश्विक खोज और प्रतिस्थापित कार्यों को ठीक करने के लिए सबसे आसान हैं। अंत में, आप यह तय कर सकते हैं कि क्या आप एकल फाइल को छोटी तार्किक फाइलों में तोड़ना चाहते हैं। आप पा सकते हैं कि यह प्रक्रिया आपकी फ़ाइलों को अलग तरीके से पुनर्गठित करने का कारण बनती है।

मैं कम से कम लेखक नहीं हूं, बस कोई ऐसा ही उपकरण ढूंढ रहा है और उसने दुनिया को इसके बारे में बताने का फैसला किया है।

Comments

क्या उन कन्वर्टर्स को समझ नहीं आ रहा है @import? मुझे लगा कि LESS @importस्टेटमेंट्स को पार्स करने में सक्षम है और अपनी सभी स्टाइलशीट को एक सीएसएस में तब समेकित कर सकता है जब आपकी LESS फाइलें संकलित की जाती हैं। ऐसा लगता है कि अपने सभी बड़े करीने से व्यवस्थित CSS को एक विशालकाय स्टाइलशीट में डंप करने के लिए इसे LESS में बदलने के लिए स्थिरता के लिए एक कदम पीछे की तरफ होगा।

— लेज मेज़ेस्टे

वे करते हैं, लेकिन ध्यान रखें कि ये उपकरण ऑनलाइन मौजूद हैं, इसलिए आपको उन्हें एक पाठ क्षेत्र में कट और पेस्ट करना होगा ताकि आपके बाहरी स्टाइलशीट तक पहुंच न हो।

— जोएल रॉजर्स

आह, मैंने वास्तव में लिंक पर क्लिक नहीं किया। मुझे लगता है कि वे डेस्कटॉप उपकरण थे। यह तो समझ में आता है।

— लेसे मेजेस्टे

Answer 4

मुझे नहीं लगता कि किसी कनवर्टर के लिए यह जानने का कोई तरीका है कि आप कोड के बहुत से क्या करना चाहते हैं।

उदाहरण के लिए, यह जरूरी नहीं कि आप किन चरों का उपयोग करना चाहते हैं। या मिश्रण या फ़ंक्शन कैसे उत्पन्न करें।

मुझे लगता है कि इस एक के साथ आपको इसे मैन्युअल रूप से करने की आवश्यकता होगी।

Comments

माना। यहाँ आपके इरादे की एक निश्चित मात्रा और ज्ञान की आवश्यकता है जो कि कंप्यूटर अभी बहुत अनुकूल नहीं हैं। आप कुछ कार्यों को स्वचालित करने में सक्षम होंगे (@dotweb से लिंक देखें) और शायद रंग मान जैसी चीजों को एक ही चर में समेकित कर सकते हैं, लेकिन शायद यह इसके बारे में है।

— सु '

हाँ, लेकिन LESS से CSS में रूपांतरण 1 से 1 रूपांतरण है, इसलिए सैद्धांतिक रूप से कुछ एल्गोरिथ्म मौजूद हैं जो CSS से अनुकूलित LESS कोड बना सकते हैं ... किसी को बस इसे लिखने की आवश्यकता है।

— trusktr

मिक्सिन्स किसी भी तरह से जा सकते हैं, क्योंकि कंप्यूटर के लिए चयनकर्ताओं को एक साथ इकट्ठा करना और उन्हें घोंसला बनाना आसान है। सौभाग्य से, यह रूपांतरण का सबसे थकाऊ हिस्सा है और यह गणना योग्य है (मेरा उत्तर देखें)। भले ही, सीएसएस की कैस्केडिंग प्रकृति को देखते हुए, यह मूल सीएसएस से अलग तरीके से प्रस्तुत कर सकता है। चर और भाव असंभव हैं। कंप्यूटर इरादे या शब्दार्थ निर्धारित नहीं कर सकते। कंप्यूटर उस चौड़ाई का पता कैसे लगा सकता है: CSS में 400 वास्तव में चौड़ाई है: LESS में पेज एक्सपोज़र / 2? एक कनवर्टर के लिए रंगों और फोंट को चर में बदलना संभव होगा।

— जोएल रॉजर्स

@JoelRodgers, सीएसएस की कैस्केडिंग प्रकृति का अर्थ यह क्यों है कि "डीकंपाइलर" छोटी गाड़ी होगी? (स्पष्ट रूप से एक डिकम्पॉइलर छोटी गाड़ी हो सकती है, लेकिन सिद्धांत रूप में यह बताना मुश्किल नहीं है कि क्या शब्दों की पुनरावृत्ति शब्दार्थ को बदल देगी)।

— पीटर टेलर

मैं वर्ग घोषणाओं और विशेषताओं के बारे में बात कर रहा हूं। आपको उन्हें उसी क्रम में घोषित करना होगा अन्यथा आपके अलग परिणाम होंगे। बुरी गलती, मेरा मतलब था मिक्स के बजाय नेस्टेड रूल्स।

— जोएल रॉजर्स

Answer 5

कैसे खोजें और बदलें

यदि आपके पास है color:#ffffffऔर आप इसे बदलना चाहते हैं@color

बस खोजें color:#ffffffया color : #ffffffसे बदलें @color।

मैं आमतौर पर इन उपकरणों पर भरोसा नहीं करता।

या आप एक बहुत ही सरल PHP स्क्रिप्ट लिख सकते हैं जो इसे संभालती है।

अद्यतन 1 :
या आप http://nex-3.com/posts/96-scss-sass-is-a-css-extension उपयोगकर्ता कर सकते हैं जो कम के समान है और इसमें एक कनवर्टर उपकरण है।

Comments

हां, मैंने पहले से ही इसके बारे में सोचा था। लेकिन यह एक बहुत बड़ी फ़ाइल है, इसलिए मैं यह सुनिश्चित करना चाहता हूं, यह सबसे आसान तरीका होगा। ;) मिश्रण के बारे में सोचो आदि

या आप एक बहुत ही सरल PHP स्क्रिप्ट लिख सकते हैं जो इसे संभालती है।

— फतन्जाज़ी

आप एक उपकरण नहीं ढूंढ पाएंगे जो कि शुद्ध सीएसएस को कम से कम मिश्रणों के उपयोग से परिवर्तित करता है।

— एलेक्स

तुम सही हो। स्वचालित चर और मिश्रण गैर-अर्थ हैं।

Answer 6

इस साइट को आज़माएँ: css2less.cc

जैसे ही आप टाइप करते हैं यह आपके CSS को LESS में बदल देता है।