SCSS फ़ॉर्मेटर

साफ़ इंडेंटेशन के साथ SCSS/SASS प्रीप्रोसेसर कोड को फ़ॉर्मेट और सुंदर बनाएं

SCSS इनपुट
फ़ॉर्मेटेड आउटपुट

SCSS फ़ॉर्मेटिंग युक्तियाँ

  • पठनीयता और विशिष्टता नियंत्रण बनाए रखने के लिए नेस्टिंग गहराई 4 स्तरों के अंतर्गत रखें।
  • नेस्टेड सिलेक्टर्स और प्रॉपर्टीज़ के लिए सुसंगत इंडेंटेशन (2 स्पेस अनुशंसित) का उपयोग करें।
  • प्रति लाइन एक प्रॉपर्टी का उपयोग करें आसान कोड समीक्षा और diff तुलना के लिए।

पेशेवर SCSS फ़ॉर्मेटर प्रोसेसिंग सुविधाएं

SCSS फ़ॉर्मेटर डेटा के साथ कुशल और पेशेवर तरीके से काम करने के लिए आपको वह सब कुछ जो चाहिए

SCSS सिंटैक्स समर्थन

वेरिएबल्स, mixins, @extend, प्लेसहोल्डर और control directives सहित SCSS-विशिष्ट सिंटैक्स का पूर्ण समर्थन।

SCSS कोड सुंदर बनाएं

उचित नेस्टिंग और स्पेसिंग के साथ गंदे SCSS कोड को साफ़, सुसंगत रूप से इंडेंटेड कोड में बदलें।

नेस्टेड नियम फ़ॉर्मेटिंग

नेस्टेड सिलेक्टर्स को उचित रूप से इंडेंट करें और SCSS नियमों में स्पष्ट अभिभावक-संतान संबंध बनाए रखें।

Mixin फ़ॉर्मेटिंग

Mixin परिभाषाओं, कॉल्स, पैरामीट्रिक mixins और @content ब्लॉक्स को सही ढंग से फ़ॉर्मेट करें।

Prettier संचालित

विश्वसनीय और सुसंगत आउटपुट के लिए उद्योग-मानक Prettier फ़ॉर्मेटर इंजन का उपयोग करता है।

वेरिएबल संरेखण

साफ़ स्टाइलशीट रखरखाव के लिए SCSS वेरिएबल्स और मैप्स को व्यवस्थित और संरेखित करें।

यह कैसे काम करता है

अपने SCSS फ़ॉर्मेटर को पेशेवर की तरह प्रोसेस करने के सरल चरण

1

अपना SCSS पेस्ट करें

अपना SCSS कोड इनपुट क्षेत्र में पेस्ट करें, या आरंभ करने के लिए नमूना स्टाइलशीट लोड करें।

2

विकल्प अनुकूलित करें

अपनी परियोजना मानकों से मेल खाने के लिए इंडेंटेशन आकार और फ़ॉर्मेटिंग विकल्प चुनें।

3

फ़ॉर्मेट करें और समीक्षा करें

अपने SCSS कोड को सुंदर बनाने के लिए फ़ॉर्मेट बटन पर क्लिक करें और साफ़ आउटपुट की समीक्षा करें।

4

कॉपी करें या डाउनलोड करें

फ़ॉर्मेट किए गए SCSS कोड को अपने क्लिपबोर्ड पर कॉपी करें या फ़ाइल के रूप में डाउनलोड करें।

पेशेवर SCSS फ़ॉर्मेटर फ़ॉर्मेटर और सत्यापक

SCSS फ़ॉर्मेटर प्रोसेसिंग पूरी तरह आपके ब्राउज़र में चलती है — कोई अपलोड नहीं, कोई खाता नहीं, कोई सीमा नहीं।

विशेषज्ञों द्वारा बनाया गया

SCSS फ़ॉर्मेटर फ़ॉर्मेटिंग इंजन स्थापित पार्सर और मानक एल्गोरिद्म का उपयोग करके आपके ब्राउज़र में लोकल रूप से चलता है। कुछ भी छिपा नहीं है — अपने ब्राउज़र के dev tools खोलें और इसे काम करते देखें।

प्रमुख तकनीकी विशेषताएं:

  • • Prettier-संचालित SCSS फ़ॉर्मेटिंग इंजन
  • • वेरिएबल्स, mixins, फ़ंक्शन्स और नेस्टेड नियमों का समर्थन
  • • @use, @forward और @import सिंटैक्स को संभालता है
  • • अधिकतम सुरक्षा और गति के लिए क्लाइंट-साइड प्रोसेसिंग
  • • 10MB तक की बड़ी फ़ाइलों का समर्थन

विश्वसनीय और सुरक्षित

आपका डेटा आपके ब्राउज़र में ही रहता है: कुछ भी अपलोड, संग्रहित या लॉग नहीं किया जाता। टैब बंद करें और सब समाप्त।

सुरक्षा और गोपनीयता:

  • • 100% क्लाइंट-साइड प्रोसेसिंग - डेटा कभी सर्वर पर नहीं भेजा जाता
  • • कोई ट्रैकिंग, कुकीज़ या डेटा संग्रह नहीं
  • • सुरक्षित कनेक्शन के लिए HTTPS एन्क्रिप्शन
  • • प्रोसेसिंग के बाद कोई डेटा संग्रहीत या कैश्ड नहीं
  • • GDPR और CCPA अनुरूप दृष्टिकोण

पेशेवर EZ Formatter क्यों चुनते हैं

100%
क्लाइंट-साइड प्रोसेसिंग
0
सर्वर को भेजा गया डेटा
60
वर्कबेंच में टूल्स

आपका डेटा आपके ब्राउज़र में ही रहता है

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

Scss Formatter फ़ॉर्मेटिंग के बारे में सामान्य प्रश्नों के उत्तर

हाँ, हमारा SCSS फ़ॉर्मेटर पूरी तरह से निःशुल्क है, कोई पंजीकरण आवश्यक नहीं। सभी प्रोसेसिंग आपके ब्राउज़र में होती है।

हाँ, हमारा फ़ॉर्मेटर SCSS वेरिएबल्स ($variable), mixins, @extend और प्लेसहोल्डर सिलेक्टर्स को उचित रूप से संभालता है।

SCSS फ़ॉर्मेटर विशेष रूप से SCSS प्रीप्रोसेसर सिंटैक्स को समझता है जिसमें वेरिएबल्स, नेस्टिंग, mixins और फ़ंक्शन्स शामिल हैं जो नियमित CSS फ़ॉर्मेटर संभाल नहीं पाएगा।

नहीं। फ़ॉर्मेटर केवल व्हाइटस्पेस और इंडेंटेशन को समायोजित करता है। यह कभी भी सिलेक्टर्स, प्रॉपर्टीज़ या मानों को संशोधित नहीं करता।

हाँ, फ़ॉर्मेटर आधुनिक Dart Sass @use और @forward सिंटैक्स के साथ-साथ @import का भी समर्थन करता है।

नेस्टेड सिलेक्टर्स प्रत्येक नेस्टिंग गहराई पर एक स्तर इंडेंट होते हैं, और पैरेंट सिलेक्टर & अपनी स्थिति बनाए रखता है (.card { &.is-active { } } इनलाइन-प्रीफ़िक्स्ड रहता है, & + & सिब्लिंग कॉम्बिनेटर्स अछूते रहते हैं)। Dart Sass - संदर्भ कार्यान्वयन - & को पैरेंट सिलेक्टर श्रृंखला में कंपाइल करता है, इसलिए फ़ॉर्मेटर को इसे कभी विभाजित या स्थानांतरित नहीं करना चाहिए।

नहीं - मॉड्यूल सिस्टम नियम (@use/@forward, जिन्होंने Dart Sass 2.0 योजना में @import का स्थान लिया) फ़ाइल के शीर्ष पर किसी भी नियम से पहले रहने चाहिए, और फ़ॉर्मेटर इसे बनाए रखता है। @mixin और @include परिभाषाएँ अपना परिभाषा क्रम बनाए रखती हैं क्योंकि बाद के मिक्सिन @include के माध्यम से पहले वालों को संदर्भित कर सकते हैं - पुनर्व्यवस्था कंपाइलेशन तोड़ सकती है।

हाँ - $variables कंपाइल-टाइम होते हैं (घोषणाओं की तरह इंडेंट, #{} इंटरपोलेशन के अंदर कभी नहीं छुए जाते) जबकि --custom-properties रनटाइम CSS होते हैं। फ़ॉर्मेटर $var: value घोषणाओं को उनके अनुभाग में रखता है और कभी भी दोनों के बीच रूपांतरण नहीं करता, क्योंकि उनका स्कोप और मूल्यांकन समय मौलिक रूप से भिन्न होते हैं (SCSS वेरिएबल्स लेक्सिकल होते हैं; कस्टम प्रॉपर्टीज़ इनहेरिट और कैस्केड होती हैं)।

{-- * External Resources Component(#19 Phase 3b 内容佐证工程) * 工具页「权威引用」区块:RFC / W3C / WHATWG / ECMA / IANA / 官方规范站 / 官方语言文档 / Wikipedia。 * * - 接受 :slug 属性 → 经 config/tool-sources.php 家族矩阵渲染该工具的权威引用 * - slug 未命中映射时不渲染(无权威来源的工具静默跳过) * - 链接 title 保持英文(引用源专名);description 经 * common.resources.descriptions.{key} 本地化,lang 未命中回退英文(线上不裸奔) * - 链接保持 dofollow(rel="noopener noreferrer") * * @param string|null $slug --}}

प्रामाणिक संदर्भ

मानक और आधिकारिक दस्तावेज़ जो इस टूल के साथ काम करने वाले फ़ॉर्मैट को परिभाषित करते हैं।

संबंधित टूल्स