ArrayKit CSS Formatter क्या है?

यह एक browser-आधारित css formatter है जो Prettier के साथ CSS, SCSS और LESS को beautify या minify करता है, और सादे CSS में properties को वर्णानुक्रम में sort व डुप्लिकेट declarations हटा सकता है।

क्या CSS Formatter SCSS और LESS को सपोर्ट करता है?

हाँ। syntax (CSS, SCSS या LESS) चुनें और यह उसी अनुसार parse करता है। Property sorting और de-duplication सादे CSS पर लागू होते हैं।

क्या CSS Formatter properties को वर्णानुक्रम में sort कर सकता है?

हाँ। CSS चुने जाने के साथ Beautify मोड में, प्रत्येक rule के भीतर declarations को वर्णानुक्रम में पुनः क्रमबद्ध करने के लिए Sort props टॉगल करें।

कौन-सा इंजन CSS को फ़ॉर्मैट करता है?

Beautifying Prettier का उपयोग करती है, इसलिए आउटपुट उन्हीं नियमों से मेल खाता है जो Prettier आपके editor और build tools में लागू करता है।

क्या CSS Formatter द्वारा मेरा CSS कहीं अपलोड होता है?

नहीं। css formatter पूरी तरह आपके browser में चलता है, इसलिए आपके stylesheets स्थानीय रूप से प्रोसेस होते हैं और कभी आपके डिवाइस से बाहर नहीं जाते।

CSS / SCSS फ़ॉर्मेटर

CSS/SCSS/LESS को सुंदर या छोटा बनाएँ, प्रॉपर्टी क्रमबद्ध करें और डुप्लिकेट हटाएँ।

आपका CSS आपके browser में स्थानीय रूप से फ़ॉर्मैट होता है और कुछ भी किसी सर्वर पर अपलोड नहीं होता।

JavaScript भी beautify करना है? JS Formatter आज़माएँ।

CSS / SCSS फ़ॉर्मेटर के बारे में

यह css formatter Prettier का उपयोग करके CSS, SCSS और LESS को beautify या minify करता है, जिसमें declarations को वर्णानुक्रम में sort करने और डुप्लिकेट properties हटाने के विकल्प हैं। गन्दे stylesheets को साफ करने के लिए इसे एक css beautifier के रूप में उपयोग करें, या preprocessors के बीच काम करते समय scss formatter और less formatter के रूप में। टिप्पणियाँ और whitespace हटाने तथा कॉम्पैक्ट production CSS बनाने के लिए minify मोड पर स्विच करें। यह उन फ्रंट-एंड डेवलपर्स, डिज़ाइनरों और QA इंजीनियरों के लिए बनाया गया है जिन्हें सुसंगत, पठनीय styles चाहिए या commit या code review से पहले css को ऑनलाइन फ़ॉर्मैट करने का एक तेज़ तरीका। आप इंडेंटेशन के लिए tabs या spaces चुन सकते हैं, अपनी फ़ाइल से मेल खाता syntax चुन सकते हैं, और prettier css आउटपुट को कहीं भी फिर से उपयोग कर सकते हैं। सब कुछ आपके browser में स्थानीय रूप से प्रोसेस होता है, इसलिए आपके stylesheets आपके डिवाइस से बाहर नहीं जाते और कुछ भी किसी सर्वर पर अपलोड नहीं होता।

विशेषताएँ

Prettier का उपयोग करके CSS, SCSS और LESS को beautify या minify करें
सटीक parsing के लिए syntax मोड (CSS, SCSS या LESS) चुनें
प्रत्येक rule के भीतर properties को वर्णानुक्रम में sort करें (सादा CSS)
सादे CSS से डुप्लिकेट declarations हटाएँ
इंडेंटेशन के लिए tabs या spaces चुनें
Minify मोड production के लिए टिप्पणियाँ और whitespace हटाता है
nested rules और media queries को सुसंगत रूप से फिर से फ़ॉर्मैट करें
पूरी तरह आपके browser में चलता है

CSS / SCSS फ़ॉर्मेटर का उपयोग कैसे करें

अपना CSS, SCSS या LESS इनपुट बॉक्स में पेस्ट करें।
अपनी फ़ाइल से मेल खाता syntax मोड (CSS, SCSS या LESS) चुनें।
फ़ॉर्मैट करने के लिए Beautify या आउटपुट कॉम्पैक्ट करने के लिए Minify चुनें।
परिणाम को बारीकी से समायोजित करने के लिए Sort props, Dedupe या Tabs टॉगल करें।
फ़ॉर्मैट किए गए CSS को आउटपुट पैनल से कॉपी या डाउनलोड करें।

उदाहरण

इनपुट

.btn{color:#FFF;padding:8px;color:#fff;}

आउटपुट

.btn {
  color: #fff;
  padding: 8px;
}

डुप्लिकेट declarations हटाने के साथ Beautify मोड।

सामान्य त्रुटियाँ और समस्या निवारण

Property sorting या de-duplication का SCSS या LESS पर कोई असर नहीं होता। — Sorting और डुप्लिकेट हटाना सादे CSS पर लागू होता है; यदि आप चाहते हैं कि ये विकल्प चलें तो syntax मोड को CSS पर स्विच करें।
Sort props और Dedupe टॉगल toolbar से गायब हैं। — ये टॉगल केवल CSS syntax चुने जाने पर Beautify मोड में दिखते हैं; उन्हें दिखाने के लिए Minify बंद करें और CSS चुनें।
Minified CSS को बाद में एडिट करना कठिन है। — अपनी मूल स्रोत फ़ाइल रखें; minify आउटपुट production के लिए है, आगे एडिटिंग के लिए नहीं।
गलत syntax चुने जाने के कारण आउटपुट फ़ॉर्मैट नहीं हो पाता। — syntax मोड को अपने कोड से मिलाएँ, उदाहरण के लिए nesting और variables के लिए SCSS चुनें, ताकि Prettier इसे सही ढंग से parse करे।
इंडेंटेशन आपकी प्रोजेक्ट स्टाइल से मेल नहीं खाता। — कॉपी करने से पहले tabs और spaces के बीच स्विच करने के लिए Tabs विकल्प टॉगल करें।

अक्सर पूछे जाने वाले प्रश्न

ArrayKit CSS Formatter क्या है?: यह एक browser-आधारित css formatter है जो Prettier के साथ CSS, SCSS और LESS को beautify या minify करता है, और सादे CSS में properties को वर्णानुक्रम में sort व डुप्लिकेट declarations हटा सकता है।
CSS Formatter के साथ मैं CSS कैसे minify करूँ?: अपना stylesheet पेस्ट करें, मेल खाता syntax मोड चुनें, फिर टिप्पणियाँ और whitespace हटाने तथा कॉम्पैक्ट production CSS बनाने के लिए Minify चुनें जिसे आप कॉपी या डाउनलोड कर सकते हैं।
क्या CSS Formatter SCSS और LESS को सपोर्ट करता है?: हाँ। syntax (CSS, SCSS या LESS) चुनें और यह उसी अनुसार parse करता है। Property sorting और de-duplication सादे CSS पर लागू होते हैं।
क्या CSS Formatter properties को वर्णानुक्रम में sort कर सकता है?: हाँ। CSS चुने जाने के साथ Beautify मोड में, प्रत्येक rule के भीतर declarations को वर्णानुक्रम में पुनः क्रमबद्ध करने के लिए Sort props टॉगल करें।
कौन-सा इंजन CSS को फ़ॉर्मैट करता है?: Beautifying Prettier का उपयोग करती है, इसलिए आउटपुट उन्हीं नियमों से मेल खाता है जो Prettier आपके editor और build tools में लागू करता है।
क्या CSS Formatter द्वारा मेरा CSS कहीं अपलोड होता है?: नहीं। css formatter पूरी तरह आपके browser में चलता है, इसलिए आपके stylesheets स्थानीय रूप से प्रोसेस होते हैं और कभी आपके डिवाइस से बाहर नहीं जाते।