Sass से CSS
Sass और SCSS को ऑनलाइन CSS में कंपाइल करें। विस्तारित या संपीड़ित आउटपुट, त्रुटि लाइन नंबर और वेरिएबल, मिक्सिन, नेस्टिंग का पूरा समर्थन।
Sass और SCSS में क्या अंतर है?
SCSS नया, CSS जैसा सिंटैक्स है जो ब्रेसेस और सेमीकोलोन इस्तेमाल करता है। Sass (इंडेंटेड सिंटैक्स) इंडेंटेशन और नई लाइनें इस्तेमाल करता है। यह टूल दोनों कंपाइल करता है - ड्रॉपडाउन में सिंटैक्स चुनें।
कौन से Sass फ़ीचर सपोर्टेड हैं?
कंपाइलर आधिकारिक Dart Sass इंजन चलाता है, इसलिए वेरिएबल, नेस्टिंग, मिक्सिन, @include, फ़ंक्शन, @use, @extend, @if और @each जैसे कंट्रोल डायरेक्टिव और कंप्रेस्ड आउटपुट स्टाइल सब सपोर्टेड हैं।
कंप्रेस (minify) CSS कैसे पाएँ?
कंपाइल करने से पहले आउटपुट स्टाइल ड्रॉपडाउन को कंप्रेस्ड पर सेट करें। व्हाइटस्पेस और आखिरी सेमीकोलोन हट जाते हैं और सबसे छोटी स्टाइलशीट बनती है।
एरर में लाइन नंबर क्यों दिखता है?
जब कोड में सिंटैक्स त्रुटि होती है, तो Sass इंजन जिस लाइन और कॉलम पर पार्सिंग फेल हुई उसकी सटीक जानकारी देता है, और टूल उसे आउटपुट के ऊपर दिखाता है ताकि जल्दी ठीक करें।
क्या मेरा Sass कोड सर्वर पर जाता है?
नहीं। पूरा Dart Sass इंजन पेज के साथ बंडल है और ब्राउज़र में लोकल कंपाइल करता है। आपकी स्टाइलशीट कभी डिवाइस से बाहर नहीं जाती, इसलिए प्राइवेट प्रोजेक्ट्स के लिए भी सुरक्षित है।
क्या लोकल फ़ाइलों का @import कंपाइल होगा?
नहीं। कंपाइलर मेमोरी में मौजूद एक ही स्निपेट पर काम करता है और फ़ाइल सिस्टम तक नहीं पहुँचता, इसलिए फ़ाइल-आधारित imports और एक्सटर्नल partials का @use रिज़ॉल्व नहीं हो सकता।
क्या यह ऑफलाइन चलता है?
हाँ। पेज और कंपाइलर बंडल एक बार लोड होने के बाद कंपाइलिंग पूरी तरह आपकी मशीन पर होती है, कनेक्शन ज़रूरी नहीं।
आउटपुट का उपयोग कैसे करें?
आउटपुट के नीचे के बटनों से कंपाइल किया CSS कॉपी करें या style.css के रूप में डाउनलोड करें, फिर HTML में लिंक करें या प्रोजेक्ट की स्टाइलशीट में पेस्ट करें।
Sass से CSS का उपयोग कैसे करें
यह कंपाइलर आधिकारिक Dart Sass इंजन को पूरी तरह आपके ब्राउज़र में चलाता है। SCSS या इंडेंटेड Sass पेस्ट करें और तुरंत साफ़ CSS पाएँ — वेरिएबल, मिक्सिन, नेस्टिंग और फ़ंक्शन सब सपोर्टेड, कुछ भी अपलोड नहीं होता।
- अपना Sass या SCSS इनपुट बॉक्स में पेस्ट करें, या उदाहरण दबाकर वेरिएबल और मिक्सिन वाला चलने योग्य डेमो लोड करें।
- ड्रॉपडाउन से सिंटैक्स (SCSS या इंडेंटेड Sass) और आउटपुट स्टाइल (Expanded या Compressed) चुनें।
- लाइव कंपाइल चालू रहने पर टाइप करते ही CSS बनने लगता है; वरना कंपाइल दबाकर मैन्युअल रूप से चलाएँ।
- सिंटैक्स एरर होने पर सटीक लाइन नंबर और संदेश आउटपुट के ऊपर दिखते हैं, जिससे तुरंत सुधार हो जाए।
- आउटपुट के नीचे कॉपी या डाउनलोड से अपनी कंपाइल की हुई स्टाइलशीट style.css के रूप में ले लें।
स्टाइलशीट मिनिफाई करने के लिए Compressed आउटपुट स्टाइल चुनें — सीधे सोर्स से प्रोडक्शन बिल्ड के लिए बढ़िया।
संबंधित टूल
- CSS ब्यूटीफायर CSS कोड को तुरंत प्रारूपित और सुंदर बनाएं। अनुकूलन योग्य विकल्पों के साथ मिनीफाइड CSS को पठनीय कोड में बदलें।
- CSS मिनीफायर मुफ्त ऑनलाइन CSS मिनीफायर। व्हाइटस्पेस, टिप्पणियाँ और अनावश्यक वर्ण हटाकर CSS कोड को तुरंत संपीड़ित और अनुकूलित करें। तेज़ वेब प्रदर्शन के लिए फ़ाइल आकार घटाएँ।
- CSS ग्रेडिएंट जनरेटर विज़ुअली शानदार CSS ग्रेडिएंट बनाएं। कई रंग स्टॉप, कस्टम कोण और स्थितियों के साथ रैखिक, रेडियल और कोनिक ग्रेडिएंट उत्पन्न करें। तुरंत प्रोडक्शन-रेडी कोड कॉपी करें।
- CSS Flexbox जनरेटर लाइव पूर्वावलोकन के साथ विज़ुअल CSS Flexbox जनरेटर। Flex गुणों को समायोजित करें और तुरंत उपयोगी CSS कोड प्राप्त करें।
- Chmod कैलकुलेटर चेकबॉक्स के साथ Linux फ़ाइल अनुमतियों को विज़ुअलाइज़ और गणना करने के लिए मुफ्त ऑनलाइन chmod कैलकुलेटर। संख्यात्मक (755, 644) और प्रतीकात्मक (rwxr-xr-x) अंकन के बीच तुरंत कन्वर्ट करें। setuid, setgid, sticky bit जैसी विशेष अनुमतियों का समर्थन करता है।
- ASCII तालिका दशमलव, हेक्साडेसिमल, ऑक्टल, बाइनरी कोड, HTML एंटिटी और वर्णन के साथ पूर्ण ASCII वर्ण एन्कोडिंग संदर्भ। तुरंत खोजें और फ़िल्टर करें।
- HTTP अनुरोध परीक्षक अपने ब्राउज़र में सीधे REST API का परीक्षण करें। कस्टम हेडर, बॉडी और क्वेरी पैरामीटर के साथ GET, POST, PUT, DELETE अनुरोध भेजें। तुरंत प्रतिक्रिया स्थिति, हेडर और JSON बॉडी देखें।
- .htaccess जनरेटर Apache .htaccess नियम उत्पन्न करें - रीडायरेक्ट, रीराइट, सुरक्षा हेडर, कैशिंग और बहुत कुछ।