सैस (स्टाइल शीट लैंग्वेज): Difference between revisions
No edit summary |
No edit summary |
||
(10 intermediate revisions by 4 users not shown) | |||
Line 20: | Line 20: | ||
| file_ext = .sass, .scss | | file_ext = .sass, .scss | ||
}} | }} | ||
सैस एक प्रीप्रोसेसर स्क्रिप्टिंग लैंग्वेज है और सिंटैक्स की दृष्टि से अद्भुत स्टाइल शीट का संक्षिप्त रूप है, जिसे [[कैस्केडिंग स्टाइल शीट्स]] (सीएसएस) में सैसस्क्रिप्ट को स्क्रिप्टिंग लैंग्वेज के रूप में व्याख्या की गई | '''सैस''' एक प्रीप्रोसेसर स्क्रिप्टिंग लैंग्वेज है और सिंटैक्स की दृष्टि से अद्भुत '''स्टाइल शीट''' का संक्षिप्त रूप है, जिसे [[कैस्केडिंग स्टाइल शीट्स]] (सीएसएस) में सैसस्क्रिप्ट को स्क्रिप्टिंग लैंग्वेज के रूप में व्याख्या की गई है और इस प्रकार इसे कम्पाइलड किया जाता है। | ||
सैस में दो सिंटेक्स प्रोग्रामिंग लैंग्वेज के रूप में सम्मलित हैं और इस प्रकार मूल सिंटैक्स जिसे इंडेंटेड सिंटैक्स कहा जाता है और | सैस में दो सिंटेक्स प्रोग्रामिंग लैंग्वेज के रूप में सम्मलित हैं और इस प्रकार मूल सिंटैक्स जिसे इंडेंटेड सिंटैक्स कहा जाता है और [[Haml|हमल]] के समान सिंटैक्स का उपयोग करता है।<ref name="main">{{cite web |author=Media Mark (3.2.12) |title=सैस - वाक्यात्मक रूप से अद्भुत स्टाइलशीट|url=http://sass-lang.com/ |url-status=live |access-date=2014-02-23 |publisher=Sass-lang.com |language=en-US}}</ref> यह नियमों को भिन्न करने के लिए [[ब्लॉक (प्रोग्रामिंग)]] और [[ नई पंक्ति |नई पंक्ति]] करैक्टर को भिन्न करने के लिए [[इंडेंट शैली]] का उपयोग करता है और इस प्रकार नवीनतम सिंटैक्स, एससीएसएस (Sassy CSS), CSS की तरह ब्लॉक फ़ॉर्मेटिंग का उपयोग करता है। यह एक ब्लॉक के भीतर नियमों को भिन्न करने के लिए कोड ब्लॉक और सेमीकॉलन को दर्शाने के लिए ब्रेसिज़ का उपयोग करता है। इंडेंटेड सिंटैक्स और एससीएसएस फाइलों को पारंपरिक रूप से क्रमशः [[फ़ाइल नाम एक्सटेंशन]] .सैस और .एससीएसएस के रूप में दिया जाता है। | ||
सीएसएस3 (कैस्केडिंग स्टाइल शीट्स) में | सीएसएस3 (कैस्केडिंग स्टाइल शीट्स) में सेलेक्टर और पस्यूडो सेलेक्टर की एक श्रृंखला सम्मलित होती है, जो समूह नियम उन पर प्रयुक्त होते हैं। सैस अधिक पारंपरिक [[प्रोग्रामिंग भाषा|प्रोग्रामिंग]] लैंग्वेज, विशेष रूप से [[ ऑब्जेक्ट ओरिएंटेड प्रोग्रामिंग |ऑब्जेक्ट ओरिएंटेड प्रोग्रामिंग में]] दोनों सिंटैक्स के बड़े संदर्भ में उपलब्ध कई तंत्र प्रदान करके सीएसएस का विस्तार करता है, लेकिन वे स्वयं सीएसएस3 के लिए उपलब्ध नहीं होता है। जब सैसस्क्रिप्ट की व्याख्या की जाती है, तो यह सैस फ़ाइल द्वारा परिभाषित विभिन्न सेलेक्टर के लिए CSS नियमों के ब्लॉक बनाता है। सैस इंटरप्रेटर वैकल्पिक रूप से सैसस्क्रिप्ट का सीएसएस में अनुवाद करता है और इस प्रकार सैस .sass या .scss फ़ाइल का अवलोकन कर सकता है और जब भी .sass या .scss फ़ाइल सेव की जाती है, तो इसे आउटपुट .css फ़ाइल में अनुवादित कर सकता है।<ref name="tutorial">[http://sass-lang.com/tutorial.html Sass - Syntactically Awesome Stylesheets] Tutorial</ref> | ||
इंडेंटेड | इंडेंटेड सिंटैक्स एक मेटालैंग्वेज है। एससीएसएस एक नेस्टेड मेटालैंग्वेज और सीएसएस का एक [[सुपरसेट]] है, क्योंकि वैध सीएसएस प्रोग्रामिंग लैंग्वेजो के समान शब्दार्थ के साथ वैध एससीएसएस है। | ||
सैसस्क्रिप्ट निम्नलिखित तंत्र प्रदान करता है: [[ चर (प्रोग्रामिंग) | वेरिएबल | सैसस्क्रिप्ट निम्नलिखित तंत्र प्रदान करता है: [[ चर (प्रोग्रामिंग) |वेरिएबल (प्रोग्रामिंग)]] , नेस्टिंग (कंप्यूटिंग) प्रोग्रामिंग में[[ मिश्रण | मिक्सिन]], और सेलेक्टर इनहेरिटेंस (कंप्यूटर विज्ञान) के रूप में होते है।<ref name="main" /> | ||
== इतिहास == | == इतिहास == | ||
सैस को | सैस को प्रारम्भ में [[हैम्पटन कैटलिन]] द्वारा डिजाइन किया गया था और नेटली वेइज़ेनबाम द्वारा विकसित किया गया था।<ref name="about">{{cite web|title=Sass: Syntactically Awesome Style Sheets|url=http://sass-lang.com/about.html|url-status=dead|archive-url=https://web.archive.org/web/20130901145805/http://sass-lang.com/about.html|archive-date=2013-09-01|work=sass-lang.com}}</ref><ref>{{cite web|title=नताली वेइज़ेनबाम का ब्लॉग|url=http://nex-3.com/|url-status=dead|archive-url=https://web.archive.org/web/20071011121541/http://nex-3.com/|archive-date=2007-10-11}}</ref> इसके प्रारंभिक संस्करणों के बाद, वेइज़ेनबाम और क्रिस एपस्टीन ने सैस को सैसस्क्रिप्ट के साथ विस्तारित करना जारी रखा है, जो सैस फ़ाइलों में उपयोग की जाने वाली एक स्क्रिप्टिंग लैंग्वेज के रूप में है। | ||
== प्रमुख इम्प्लीमेंटेशन == | == प्रमुख इम्प्लीमेंटेशन == | ||
सैसस्क्रिप्ट को कई लैंग्वेजो में प्रयुक्त किया गया था और निम्नलिखित उल्लेखनीय इम्प्लीमेंटेशन | सैसस्क्रिप्ट को कई लैंग्वेजो में प्रयुक्त किया गया था और निम्नलिखित उल्लेखनीय इम्प्लीमेंटेशन के रूप में हैं, | ||
* आधिकारिक ओपन-सोर्स [[डार्ट (प्रोग्रामिंग भाषा)|डार्ट (प्रोग्रामिंग लैंग्वेज )]] इम्प्लीमेंटेशन | * आधिकारिक ओपन-सोर्स [[डार्ट (प्रोग्रामिंग भाषा)|डार्ट (प्रोग्रामिंग लैंग्वेज )]] इम्प्लीमेंटेशन होते है।<ref name=":0" /> | ||
*npm [[एनपीएम (सॉफ्टवेयर)|(सॉफ्टवेयर)]] पर आधिकारिक सैस नोड.जेएस मॉड्यूल के रूप में होते है, जो प्योर जावास्क्रिप्ट के लिए | *npm [[एनपीएम (सॉफ्टवेयर)|(सॉफ्टवेयर)]] पर आधिकारिक सैस नोड.जेएस मॉड्यूल के रूप में होते है, जो प्योर जावास्क्रिप्ट के लिए कम्पाइलड डार्ट सैस है।<ref>{{cite web|url=https://www.npmjs.com/package/एस.ए.एस.एस.|title=एस.ए.एस.एस.|website=www.npmjs.com}}</ref> | ||
* इस प्रकार आधिकारिक सैस-एम्बेडेड नोड मॉड्यूल के रूप में होते है, जो मूल डार्ट निष्पादन योग्य के चारों ओर एक जावास्क्रिप्ट आवरण होता है।<ref>{{cite web|url=https://www.npmjs.com/package/सैस-एम्बेडेड|title=सैस-एम्बेडेड|website=www.npmjs.com}}</ref> | * इस प्रकार आधिकारिक सैस-एम्बेडेड नोड मॉड्यूल के रूप में होते है, जो मूल डार्ट निष्पादन योग्य के चारों ओर एक जावास्क्रिप्ट आवरण होता है।<ref>{{cite web|url=https://www.npmjs.com/package/सैस-एम्बेडेड|title=सैस-एम्बेडेड|website=www.npmjs.com}}</ref> | ||
* मूल [[खुला स्रोत सॉफ्टवेयर|ओपन-सोर्स]] [[रूबी (प्रोग्रामिंग भाषा)|रूबी (प्रोग्रामिंग लैंग्वेज)]] में इम्प्लीमेंटेशन | * मूल [[खुला स्रोत सॉफ्टवेयर|ओपन-सोर्स]] [[रूबी (प्रोग्रामिंग भाषा)|रूबी (प्रोग्रामिंग लैंग्वेज)]] में इम्प्लीमेंटेशन 2006 में किया गया था,<ref name=":0">{{cite web|url=http://drupal.org/project/sass|title=Sass / Scss|date=2009-10-21|publisher=Drupal.org|access-date=2014-02-23}}</ref> अनुरक्षकों की कमी के कारण डेप्रकेट हो गया और मार्च 2019 में जीवन के अंत तक पहुंच गया था।<ref>{{Cite web|url=http://sass.logdown.com/posts/7828841-ruby-sass-is-unsupported|title=Ruby Sass Has Reached End-Of-Life « Sass Blog|last=Weizenbaum|first=Natalie|website=sass.logdown.com|access-date=2019-04-21}}</ref><ref>{{Cite web|url=https://sass-lang.com/ruby-sass|title=Sass: Ruby Sass|website=sass-lang.com|access-date=2019-04-21}}</ref> | ||
* libSass, आधिकारिक ओपन-सोर्स [[C++]] इम्प्लीमेंटेशन अक्टूबर 2020 में बंद कर दिया गया।<ref>{{cite web|url=https://sass-lang.com/blog/libsass-is-deprecated|title=लिबसैस को अस्वीकृत कर दिया गया है|website=sass-lang.com|date=26 October 2020}}</ref> | * libSass, आधिकारिक ओपन-सोर्स [[C++]] इम्प्लीमेंटेशन अक्टूबर 2020 में बंद कर दिया गया।<ref>{{cite web|url=https://sass-lang.com/blog/libsass-is-deprecated|title=लिबसैस को अस्वीकृत कर दिया गया है|website=sass-lang.com|date=26 October 2020}}</ref> | ||
*एनपीएम (सॉफ्टवेयर) पर अप्रचलित नोड-एसएएस नोड मॉड्यूल अप्रचलित लिबसस पर आधारित होते है।<ref>{{cite web|url=https://www.npmjs.com/package/नोड-एसएएस|title=नोड-एसएएस|website=www.npmjs.com}}</ref> | *एनपीएम (सॉफ्टवेयर) पर अप्रचलित नोड-एसएएस नोड मॉड्यूल अप्रचलित लिबसस पर आधारित होते है।<ref>{{cite web|url=https://www.npmjs.com/package/नोड-एसएएस|title=नोड-एसएएस|website=www.npmjs.com}}</ref> | ||
Line 59: | Line 59: | ||
* [[बूलियन डेटा प्रकार]] | * [[बूलियन डेटा प्रकार]] | ||
वेरिएबल [[पैरामीटर (कंप्यूटर प्रोग्रामिंग)]] कई उपलब्ध [[फलन]] में से किसी एक के | वेरिएबल [[पैरामीटर (कंप्यूटर प्रोग्रामिंग)]] कई उपलब्ध [[फलन]] में से किसी एक के आर्गुमेंट या परिणाम के रूप में हो सकते हैं।<ref name="functions">[http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html Module: Sass::Script::Functions] Sass Functions</ref> और इस प्रकार अनुवाद के समय वेरिएबल के मान आउटपुट सीएसएस दस्तावेज़ में डाले जाते हैं।<ref name="main" /> | ||
{|class="wikitable" | {|class="wikitable" | ||
! | !एससीएसएस | ||
! | !सैस | ||
! | !कम्पाइलड सीएसएस | ||
|- | |- | ||
| style="vertical-align: top;" | <syntaxhighlight lang="scss"> | | style="vertical-align: top;" | <syntaxhighlight lang="scss"> | ||
Line 116: | Line 116: | ||
=== | === नेस्टिंग === | ||
सीएसएस तार्किक नेस्टिंग का समर्थन करता है, लेकिन कोड ब्लॉक स्वयं नेस्ट नहीं होते हैं। सैस नेस्टेड कोड को एक दूसरे के भीतर डालने की अनुमति देता है।<ref name="main" /> | सीएसएस तार्किक नेस्टिंग का समर्थन करता है, लेकिन कोड ब्लॉक स्वयं नेस्ट के रूप में नहीं होते हैं। सैस नेस्टेड कोड को एक दूसरे के भीतर डालने की अनुमति देता है।<ref name="main" /> | ||
{|class="wikitable" | {|class="wikitable" | ||
! | !एससीएसएस | ||
! | !सैस | ||
! | !कम्पाइलड सीएसएस | ||
|- | |- | ||
| style="vertical-align: top;" | <syntaxhighlight lang="scss"> | | style="vertical-align: top;" | <syntaxhighlight lang="scss"> | ||
Line 167: | Line 167: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
|} | |} | ||
[[ | [[नेमस्पेस]] नेस्टिंग और पैरेंट संदर्भ सहित अधिक समिश्र प्रकार के नेस्टिंग पर सैस दस्तावेज़ में वेरिएबल की चर्चा की जाती है।<ref name="doc" /> | ||
{|class="wikitable" | |||
! | {| class="wikitable" | ||
! | !एससीएसएस | ||
! | !सैस | ||
!कम्पाइलड सीएसएस | |||
|- | |- | ||
| style="vertical-align: top;" | <syntaxhighlight lang="scss"> | | style="vertical-align: top;" | <syntaxhighlight lang="scss"> | ||
Line 216: | Line 217: | ||
{|class="wikitable" | {|class="wikitable" | ||
! | !सैस | ||
! | !कम्पाइलड सीएसएस | ||
|- | |- | ||
| style="vertical-align: top;" | <syntaxhighlight lang="sass"> | | style="vertical-align: top;" | <syntaxhighlight lang="sass"> | ||
Line 249: | Line 250: | ||
==== | ==== आर्गुमेंट ==== | ||
मिक्सिन्स | मिक्सिन्स आर्गुमेंट (कंप्यूटर प्रोग्रामिंग) का भी समर्थन करते हैं।<ref name="main" /> | ||
{|class="wikitable" | {|class="wikitable" | ||
! | !सैस | ||
! | !कम्पाइलड सीएसएस | ||
|- | |- | ||
| style="vertical-align: top;" | <syntaxhighlight lang="sass"> | | style="vertical-align: top;" | <syntaxhighlight lang="sass"> | ||
Line 277: | Line 278: | ||
{|class="wikitable" | {|class="wikitable" | ||
! | !सैस | ||
! | !कम्पाइलड सीएसएस | ||
|- | |- | ||
| style="vertical-align: top;" | <syntaxhighlight lang="sass"> | | style="vertical-align: top;" | <syntaxhighlight lang="sass"> | ||
Line 312: | Line 313: | ||
=== | === सेलेक्टर इनहेरिटेंस === | ||
जबकि CSS3 [[दस्तावेज़ ऑब्जेक्ट मॉडल]] (DOM) पदानुक्रम का समर्थन करता है, यह | जबकि CSS3 [[दस्तावेज़ ऑब्जेक्ट मॉडल]] (DOM) पदानुक्रम का समर्थन करता है, यह सेलेक्टर इनहेरिटेंस की अनुमति नहीं देता है। सैस में, कोड ब्लॉक के अंदर एक लाइन डालकर इनहेरिटेंस प्राप्त किया जाता है, जो @extend कीवर्ड का उपयोग करता है और दूसरे सेलेक्टर को संदर्भित करता है और इस प्रकार विस्तारित सेलेक्टर की एट्रिब्यूट कॉलिंग सेलेक्टर पर प्रयुक्त होती हैं।<ref name="main" /> | ||
{|class="wikitable" | {|class="wikitable" | ||
! | !सैस | ||
! | !कम्पाइलड सीएसएस | ||
|- | |- | ||
| style="vertical-align: top;" | <syntaxhighlight lang="sass"> | | style="vertical-align: top;" | <syntaxhighlight lang="sass"> | ||
Line 349: | Line 350: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
|} | |} | ||
सैस एकाधिक | सैस एकाधिक इनहेरिटेंस का समर्थन करता है।<ref name="doc" /> | ||
== libSass == | == libSass == | ||
2012 HTML5 डेवलपर कॉन्फ्रेंस में, सैस के निर्माता, हैम्पटन कैटलिन ने | 2012 HTML5 डेवलपर कॉन्फ्रेंस में, सैस के निर्माता, हैम्पटन कैटलिन ने libSass के संस्करण 1.0 की घोषणा की थी, जो कैटलिन, आरोन लेउंग और [[Moovweb|मूववेब]] की इंजीनियरिंग टीम द्वारा विकसित सैस का एक ओपन-सोर्स C++ इम्प्लीमेंटेशन है।<ref name="libsass-html5conf">{{cite web|url=https://www.youtube.com/watch?v=j75-SslllvY&feature=player_detailpage#t=1831s |archive-url=https://ghostarchive.org/varchive/youtube/20211215/j75-SslllvY |archive-date=2021-12-15 |url-status=live|title=Hampton's 6 Rules of Mobile Design|author=H. Catlin|date=2012-10-15|publisher=HTML5 Developer Conference|access-date=2013-07-11}}{{cbignore}}</ref><ref name="libsass-moovweb-blog">{{cite web | ||
|url = http://blog.moovweb.com/2012/04/libsass/ | |url = http://blog.moovweb.com/2012/04/libsass/ | ||
|title = libsass | |title = libsass | ||
Line 363: | Line 364: | ||
|archive-url = https://web.archive.org/web/20130508080521/http://blog.moovweb.com/2012/04/libsass/ | |archive-url = https://web.archive.org/web/20130508080521/http://blog.moovweb.com/2012/04/libsass/ | ||
|archive-date = 2013-05-08 | |archive-date = 2013-05-08 | ||
}}</ref> वर्तमान सैस | }}</ref> और इस प्रकार वर्तमान सैस मेंटेनर क्रिस एपस्टीन ने भी योगदान देने की इच्छा व्यक्त की है।<ref>{{cite tweet | ||
| user=chriseppstein | | user=chriseppstein | ||
| number=323845132417900544 | | number=323845132417900544 | ||
Line 370: | Line 371: | ||
| access-date=2021-03-19 | | access-date=2021-03-19 | ||
| author=C. Eppstein}}</ref> | | author=C. Eppstein}}</ref> | ||
कैटलिन के अनुसार, | |||
कैटलिन के अनुसार, libSass को किसी भी चीज़ में ड्रॉप[पेड] किया जा सकता है और यह सैस रूप में होता है और इसे आज ही फ़ायरफ़ॉक्स में छोड़ सकते हैं और फ़ायरफ़ॉक्स बना सकते हैं और यह वहां कम्पाइलड हो जाता है। यह सुनिश्चित करने के लिए कि यह संभव रूप में होता है, हमें यकीन है कि हम अपना खुद का पार्सर शुरू से लिखा था।<ref>{{cite web | |||
| url=http://5by5.tv/changelog/94 | | url=http://5by5.tv/changelog/94 | ||
| title=Sass, libsass, Haml and more with Hampton Catlin | | title=Sass, libsass, Haml and more with Hampton Catlin | ||
Line 380: | Line 382: | ||
| url-status=dead | | url-status=dead | ||
}}</ref> | }}</ref> | ||
* प्रदर्शन - डेवलपर्स ने सैस के रूबी इम्प्लीमेंटेशन | libSass के डिज़ाइन निम्नलिखित हैं, | ||
* प्रदर्शन - डेवलपर्स ने सैस के रूबी इम्प्लीमेंटेशन की तुलना में गति में 10 गुना वृद्धि की सूचना दी है।<ref>{{cite web | |||
| url=http://www.damln.com/log/sassc-and-bourbon-it-works/ | | url=http://www.damln.com/log/sassc-and-bourbon-it-works/ | ||
| title=Sassc and Bourbon | | title=Sassc and Bourbon | ||
Line 387: | Line 390: | ||
| access-date=2013-07-11 | | access-date=2013-07-11 | ||
| author=D. Le Nouaille}}</ref> | | author=D. Le Nouaille}}</ref> | ||
* आसान | * आसान इंटीग्रेशन – libSass, सैस को अधिक सॉफ़्टवेयर में एकीकृत करना आसान बनाता है। libSass से पहले, सैस को किसी लैंग्वेज या सॉफ़्टवेयर उत्पाद में मजबूती से एकीकृत करने के लिए संपूर्ण रूबी इंटरप्रेटर को बंडल करना आवश्यक होता है। इसके विपरीत, libSass शून्य बाहरी निर्भरता और C जैसे इंटरफ़ेस के साथ एक स्थिर रूप से लिंक करने योग्य लाइब्रेरी होती है, जिससे सैस को सीधे अन्य प्रोग्रामिंग लैंग्वेजो और टूल में लपेटना आसान हो जाता है। उदाहरण के लिए, ओपन सोर्स libSass बाइंडिंग और Node.js, Go (प्रोग्रामिंग लैंग्वेज ) और [[रूबी प्रोग्रामिंग भाषा|रूबी प्रोग्रामिंग लैंग्वेज]] के रूप में उपस्थित है।<ref name="libsass-moovweb-blog" /> | ||
*कम्पेटिबिलिटी - libसैस का लक्ष्य सैस के आधिकारिक रूबी इम्प्लीमेंटेशन के साथ पूर्ण कम्पेटिबिलिटी है। यह लक्ष्य libSass 3.3 पर प्राप्त किया जाता है।<ref>{{Cite web|url=http://sass-compatibility.github.io/|title=सैस अनुकूलता|website=sass-compatibility.github.io|access-date=2019-11-29}}</ref> | |||
== आईडीई | == आईडीई इंटीग्रेशन == | ||
{| class="wikitable" | {| class="wikitable" | ||
|+ | |+सैस का आईडीई इंटीग्रेशन | ||
|- | |- | ||
! scope="col" | | ! scope="col" |सैस !! scope="col" |सॉफ़्टवेयर | ||
|- | |- | ||
!scope="row" | | !scope="row" |एडोब ड्रीमवीवर सीसी 2017 | ||
| | | | ||
|- | |- | ||
!scope="row" | [[Eclipse (software)| | !scope="row" | [[Eclipse (software)|एक्लीपस]] | ||
| | | | ||
|- | |- | ||
!scope="row" | [[Emacs]] | !scope="row" | [[Emacs|इमैक]] | ||
| | | सैस-मोड | ||
|- | |- | ||
!scope="row" | [[IntelliJ_IDEA|JetBrains IntelliJ IDEA ( | !scope="row" | [[IntelliJ_IDEA|JetBrains IntelliJ IDEA (अंतिम संस्करण)]] | ||
| | | | ||
|- | |- | ||
!scope="row" | [[PhpStorm| | !scope="row" | [[PhpStorm|जेटब्रेन पीएचपी]] | ||
[[PhpStorm|स्टॉर्म]] | |||
| | | | ||
|- | |- | ||
!scope="row" | [[RubyMine| | !scope="row" | [[RubyMine|जेटब्रेन रूबीमाइन]] | ||
| | | | ||
|- | |- | ||
!scope="row" | [[WebStorm| | !scope="row" | [[WebStorm|जेटब्रेन वेबस्टॉर्म]] | ||
| | | | ||
|- | |- | ||
!scope="row" | [[Microsoft Visual Studio]] | !scope="row" | [[Microsoft Visual Studio|माइक्रोसॉफ्ट विजुअल स्टूडियो]] | ||
| | | माइंडस्केप | ||
|- | |- | ||
!scope="row" | [[Microsoft Visual Studio]] | !scope="row" | [[Microsoft Visual Studio|माइक्रोसॉफ्ट विजुअल स्टूडियो]] | ||
| | | सैसीस्टूडियो | ||
|- | |- | ||
!scope="row" | [[Microsoft WebMatrix]] | !scope="row" | [[Microsoft WebMatrix|माइक्रोसॉफ्ट वेब मैट्रिक्स]] | ||
| | | | ||
|- | |- | ||
!scope="row" | [[NetBeans]] | !scope="row" | [[NetBeans|नेट बीन]] | ||
| | | | ||
|- | |- | ||
!scope="row" | [[Vim (text editor)| | !scope="row" | [[Vim (text editor)|विम]] | ||
| हमल .zip | | हमल .zip | ||
|- | |- | ||
!scope="row" | [[Atom (text editor)| | !scope="row" | [[Atom (text editor)|एटम]] | ||
| | | | ||
|- | |- | ||
!scope="row" | [[Visual Studio Code]] | !scope="row" | [[Visual Studio Code|विजुअल स्टूडियो कोड]] | ||
| | | | ||
|- | |- | ||
!scope="row" |[[Sublime Text| | !scope="row" |[[Sublime Text|सबलिन]] | ||
| | | | ||
|- | |- | ||
!scope="row" | [[Edit+]] | !scope="row" | [[Edit+|संपादित करें+]] | ||
| | | | ||
|} | |} | ||
Line 447: | Line 452: | ||
== यह भी देखें == | == यह भी देखें == | ||
* [[कम (स्टाइलशीट भाषा)| | * [[कम (स्टाइलशीट भाषा)|लेस्स (स्टाइलशीट लैंग्वेज )]] | ||
* [[स्टाइलस (स्टाइलशीट भाषा)|स्टाइलस (स्टाइलशीट लैंग्वेज )]] | * [[स्टाइलस (स्टाइलशीट भाषा)|स्टाइलस (स्टाइलशीट लैंग्वेज )]] | ||
Line 455: | Line 460: | ||
== बाहरी संबंध == | == बाहरी संबंध == | ||
* | * [https://sass-lang.com/ Official Website] | ||
{{Stylesheet languages}} | {{Stylesheet languages}} | ||
[[Category: | [[Category:Articles with hatnote templates targeting a nonexistent page]] | ||
[[Category:CS1 English-language sources (en)]] | |||
[[Category:CS1 maint]] | |||
[[Category:Collapse templates]] | |||
[[Category:Created On 11/07/2023]] | [[Category:Created On 11/07/2023]] | ||
[[Category:Lua-based templates]] | |||
[[Category:Machine Translated Page]] | |||
[[Category:Navigational boxes| ]] | |||
[[Category:Navigational boxes without horizontal lists]] | |||
[[Category:Official website missing URL]] | |||
[[Category:Pages with script errors]] | |||
[[Category:Short description with empty Wikidata description]] | |||
[[Category:Sidebars with styles needing conversion]] | |||
[[Category:Template documentation pages|Documentation/doc]] | |||
[[Category:Templates Vigyan Ready]] | |||
[[Category:Templates generating microformats]] | |||
[[Category:Templates that add a tracking category]] | |||
[[Category:Templates that are not mobile friendly]] | |||
[[Category:Templates that generate short descriptions]] | |||
[[Category:Templates using TemplateData]] | |||
[[Category:Wikipedia metatemplates]] |
Latest revision as of 10:30, 2 August 2023
द्वारा डिज़ाइन किया गया | Hampton Catlin |
---|---|
Developer | Natalie Weizenbaum, Chris Eppstein |
पहली प्रस्तुति | November 28, 2006 |
Stable release | |
टाइपिंग अनुशासन | Dynamic |
ओएस | Cross-platform |
लाइसेंस | MIT License |
फ़ाइल नाम एक्सटेंशनएस | .sass, .scss |
वेबसाइट | sass-lang |
Major implementations | |
Dart | |
Influenced by | |
CSS (both "indented" and SCSS)
YAML and Haml (indented syntax) Less (SCSS) | |
Influenced | |
Less, Stylus, Tritium, Bootstrap (v4+) |
सैस एक प्रीप्रोसेसर स्क्रिप्टिंग लैंग्वेज है और सिंटैक्स की दृष्टि से अद्भुत स्टाइल शीट का संक्षिप्त रूप है, जिसे कैस्केडिंग स्टाइल शीट्स (सीएसएस) में सैसस्क्रिप्ट को स्क्रिप्टिंग लैंग्वेज के रूप में व्याख्या की गई है और इस प्रकार इसे कम्पाइलड किया जाता है।
सैस में दो सिंटेक्स प्रोग्रामिंग लैंग्वेज के रूप में सम्मलित हैं और इस प्रकार मूल सिंटैक्स जिसे इंडेंटेड सिंटैक्स कहा जाता है और हमल के समान सिंटैक्स का उपयोग करता है।[2] यह नियमों को भिन्न करने के लिए ब्लॉक (प्रोग्रामिंग) और नई पंक्ति करैक्टर को भिन्न करने के लिए इंडेंट शैली का उपयोग करता है और इस प्रकार नवीनतम सिंटैक्स, एससीएसएस (Sassy CSS), CSS की तरह ब्लॉक फ़ॉर्मेटिंग का उपयोग करता है। यह एक ब्लॉक के भीतर नियमों को भिन्न करने के लिए कोड ब्लॉक और सेमीकॉलन को दर्शाने के लिए ब्रेसिज़ का उपयोग करता है। इंडेंटेड सिंटैक्स और एससीएसएस फाइलों को पारंपरिक रूप से क्रमशः फ़ाइल नाम एक्सटेंशन .सैस और .एससीएसएस के रूप में दिया जाता है।
सीएसएस3 (कैस्केडिंग स्टाइल शीट्स) में सेलेक्टर और पस्यूडो सेलेक्टर की एक श्रृंखला सम्मलित होती है, जो समूह नियम उन पर प्रयुक्त होते हैं। सैस अधिक पारंपरिक प्रोग्रामिंग लैंग्वेज, विशेष रूप से ऑब्जेक्ट ओरिएंटेड प्रोग्रामिंग में दोनों सिंटैक्स के बड़े संदर्भ में उपलब्ध कई तंत्र प्रदान करके सीएसएस का विस्तार करता है, लेकिन वे स्वयं सीएसएस3 के लिए उपलब्ध नहीं होता है। जब सैसस्क्रिप्ट की व्याख्या की जाती है, तो यह सैस फ़ाइल द्वारा परिभाषित विभिन्न सेलेक्टर के लिए CSS नियमों के ब्लॉक बनाता है। सैस इंटरप्रेटर वैकल्पिक रूप से सैसस्क्रिप्ट का सीएसएस में अनुवाद करता है और इस प्रकार सैस .sass या .scss फ़ाइल का अवलोकन कर सकता है और जब भी .sass या .scss फ़ाइल सेव की जाती है, तो इसे आउटपुट .css फ़ाइल में अनुवादित कर सकता है।[3]
इंडेंटेड सिंटैक्स एक मेटालैंग्वेज है। एससीएसएस एक नेस्टेड मेटालैंग्वेज और सीएसएस का एक सुपरसेट है, क्योंकि वैध सीएसएस प्रोग्रामिंग लैंग्वेजो के समान शब्दार्थ के साथ वैध एससीएसएस है।
सैसस्क्रिप्ट निम्नलिखित तंत्र प्रदान करता है: वेरिएबल (प्रोग्रामिंग) , नेस्टिंग (कंप्यूटिंग) प्रोग्रामिंग में मिक्सिन, और सेलेक्टर इनहेरिटेंस (कंप्यूटर विज्ञान) के रूप में होते है।[2]
इतिहास
सैस को प्रारम्भ में हैम्पटन कैटलिन द्वारा डिजाइन किया गया था और नेटली वेइज़ेनबाम द्वारा विकसित किया गया था।[4][5] इसके प्रारंभिक संस्करणों के बाद, वेइज़ेनबाम और क्रिस एपस्टीन ने सैस को सैसस्क्रिप्ट के साथ विस्तारित करना जारी रखा है, जो सैस फ़ाइलों में उपयोग की जाने वाली एक स्क्रिप्टिंग लैंग्वेज के रूप में है।
प्रमुख इम्प्लीमेंटेशन
सैसस्क्रिप्ट को कई लैंग्वेजो में प्रयुक्त किया गया था और निम्नलिखित उल्लेखनीय इम्प्लीमेंटेशन के रूप में हैं,
- आधिकारिक ओपन-सोर्स डार्ट (प्रोग्रामिंग लैंग्वेज ) इम्प्लीमेंटेशन होते है।[6]
- npm (सॉफ्टवेयर) पर आधिकारिक सैस नोड.जेएस मॉड्यूल के रूप में होते है, जो प्योर जावास्क्रिप्ट के लिए कम्पाइलड डार्ट सैस है।[7]
- इस प्रकार आधिकारिक सैस-एम्बेडेड नोड मॉड्यूल के रूप में होते है, जो मूल डार्ट निष्पादन योग्य के चारों ओर एक जावास्क्रिप्ट आवरण होता है।[8]
- मूल ओपन-सोर्स रूबी (प्रोग्रामिंग लैंग्वेज) में इम्प्लीमेंटेशन 2006 में किया गया था,[6] अनुरक्षकों की कमी के कारण डेप्रकेट हो गया और मार्च 2019 में जीवन के अंत तक पहुंच गया था।[9][10]
- libSass, आधिकारिक ओपन-सोर्स C++ इम्प्लीमेंटेशन अक्टूबर 2020 में बंद कर दिया गया।[11]
- एनपीएम (सॉफ्टवेयर) पर अप्रचलित नोड-एसएएस नोड मॉड्यूल अप्रचलित लिबसस पर आधारित होते है।[12]
- JSass, एक इनफर्मल जावा (प्रोग्रामिंग लैंग्वेज ) इम्प्लीमेंटेशन,[13] बहिष्कृत libSass पर आधारित होते है।[14]
- फैमलप, PHP में एक इनफर्मल Sass/SCSS इम्प्लीमेंटेशन होता है।[6]
- वादिन में सैस का जावा इम्प्लीमेंटेशन होता है।[15]
- फायरबग वेब डेवलपमेंट के लिए फ़ायरफ़ॉक्स XUL (लीजेसी) एक्सटेंशन पर आधारित होते है।[16] तब से फ़ायरफ़ॉक्स में एकीकृत डेवलपर टूल के पक्ष में इसे हटा दिया गया है। फ़ायरफ़ॉक्स 57 द्वारा एक्सयूएल एक्सटेंशन के लिए समर्थन बंद करने के बाद से इसने काम करना बंद कर दिया है।
फीवेरिएबल
वेरिएबल्स
सैस वेरिएबल्स को परिभाषित करने की अनुमति देता है। वेरिएबल डॉलर चिह्न से शुरू होते हैं ($
). वेरिएबल असाइनमेंट (कंप्यूटर प्रोग्रामिंग) एक कोलन (विराम चिह्न) के साथ किया जाता है (:
).[16]
सैसस्क्रिप्ट चार डेटा प्रकारों का समर्थन करता है,[16]
- संख्याएँ (इकाइयों सहित)
- स्ट्रिंग (कंप्यूटर विज्ञान) (उद्धरण के साथ या बिना)
- कलर (नाम, या नाम)
- बूलियन डेटा प्रकार
वेरिएबल पैरामीटर (कंप्यूटर प्रोग्रामिंग) कई उपलब्ध फलन में से किसी एक के आर्गुमेंट या परिणाम के रूप में हो सकते हैं।[17] और इस प्रकार अनुवाद के समय वेरिएबल के मान आउटपुट सीएसएस दस्तावेज़ में डाले जाते हैं।[2]
एससीएसएस | सैस | कम्पाइलड सीएसएस |
---|---|---|
$primary-color: #3bbfce;
$margin: 16px;
.content-navigation {
border-color: $primary-color;
color: darken($primary-color, 10%);
}
.border {
padding: $margin / 2;
margin: $margin / 2;
border-color: $primary-color;
}
|
$primary-color: #3bbfce
$margin: 16px
.content-navigation
border-color: $primary-color
color: darken($primary-color, 10%)
.border
padding: $margin/2
margin: $margin/2
border-color: $primary-color
|
:root{
--primary-color:#3bbfce;
--secundary-color:#2b9eab;
--margin:8px;
}
.content-navigation {
border-color: var(--secundary-color)
color: var(--secundary-color);
}
.border {
padding: 8px;
margin: var(--margin);
border-color: #3bbfce;
}
|
नेस्टिंग
सीएसएस तार्किक नेस्टिंग का समर्थन करता है, लेकिन कोड ब्लॉक स्वयं नेस्ट के रूप में नहीं होते हैं। सैस नेस्टेड कोड को एक दूसरे के भीतर डालने की अनुमति देता है।[2]
एससीएसएस | सैस | कम्पाइलड सीएसएस |
---|---|---|
table.hl {
margin: 2em 0;
td.ln {
text-align: right;
}
}
li {
font: {
family: serif;
weight: bold;
size: 1.3em;
}
}
|
table.hl
margin: 2em 0
td.ln
text-align: right
li
font:
family: serif
weight: bold
size: 1.3em
|
table.hl {
margin: 2em 0;
}
table.hl td.ln {
text-align: right;
}
li {
font-family: serif;
font-weight: bold;
font-size: 1.3em;
}
|
नेमस्पेस नेस्टिंग और पैरेंट संदर्भ सहित अधिक समिश्र प्रकार के नेस्टिंग पर सैस दस्तावेज़ में वेरिएबल की चर्चा की जाती है।[16]
एससीएसएस | सैस | कम्पाइलड सीएसएस |
---|---|---|
@mixin table-base {
th {
text-align: center;
font-weight: bold;
}
td, th {
padding: 2px;
}
}
#data {
@include table-base;
}
|
=table-base
th
text-align: center
font-weight: bold
td, th
padding: 2px
#data
+table-base
|
#data th {
text-align: center;
font-weight: bold;
}
#data td, #data th {
padding: 2px;
}
|
लूप्स
सैस वेरिएबल्स का उपयोग करके पुनरावृत्ति करने की अनुमति देता है @for
, @each
और @while
, जिसका उपयोग समान वर्गों या आईडी वाले तत्वों पर विभिन्न शैलियों को प्रयुक्त करने के लिए किया जा सकता है।
सैस | कम्पाइलड सीएसएस |
---|---|
$squareCount: 4
@for $i from 1 to $squareCount
#square-#{$i}
background-color: red
width: 50px * $i
height: 120px / $i
|
#square-1 {
background-color: red;
width: 50px;
height: 120px;
}
#square-2 {
background-color: red;
width: 100px;
height: 60px;
}
#square-3 {
background-color: red;
width: 150px;
height: 40px;
}
|
आर्गुमेंट
मिक्सिन्स आर्गुमेंट (कंप्यूटर प्रोग्रामिंग) का भी समर्थन करते हैं।[2]
सैस | कम्पाइलड सीएसएस |
---|---|
=left($dist)
float: left
margin-left: $dist
#data
+left(10px)
|
#data {
float: left;
margin-left: 10px;
}
|
संयोजन में
सैस | कम्पाइलड सीएसएस |
---|---|
=table-base
th
text-align: center
font-weight: bold
td, th
padding: 2px
=left($dist)
float: left
margin-left: $dist
#data
+left(10px)
+table-base
|
#data {
float: left;
margin-left: 10px;
}
#data th {
text-align: center;
font-weight: bold;
}
#data td, #data th {
padding: 2px;
}
|
सेलेक्टर इनहेरिटेंस
जबकि CSS3 दस्तावेज़ ऑब्जेक्ट मॉडल (DOM) पदानुक्रम का समर्थन करता है, यह सेलेक्टर इनहेरिटेंस की अनुमति नहीं देता है। सैस में, कोड ब्लॉक के अंदर एक लाइन डालकर इनहेरिटेंस प्राप्त किया जाता है, जो @extend कीवर्ड का उपयोग करता है और दूसरे सेलेक्टर को संदर्भित करता है और इस प्रकार विस्तारित सेलेक्टर की एट्रिब्यूट कॉलिंग सेलेक्टर पर प्रयुक्त होती हैं।[2]
सैस | कम्पाइलड सीएसएस |
---|---|
.error
border: 1px #f00
background: #fdd
.error.intrusion
font-size: 1.3em
font-weight: bold
.badError
@extend .error
border-width: 3px
|
.error, .badError {
border: 1px #f00;
background: #fdd;
}
.error.intrusion,
.badError.intrusion {
font-size: 1.3em;
font-weight: bold;
}
.badError {
border-width: 3px;
}
|
सैस एकाधिक इनहेरिटेंस का समर्थन करता है।[16]
libSass
2012 HTML5 डेवलपर कॉन्फ्रेंस में, सैस के निर्माता, हैम्पटन कैटलिन ने libSass के संस्करण 1.0 की घोषणा की थी, जो कैटलिन, आरोन लेउंग और मूववेब की इंजीनियरिंग टीम द्वारा विकसित सैस का एक ओपन-सोर्स C++ इम्प्लीमेंटेशन है।[18][19] और इस प्रकार वर्तमान सैस मेंटेनर क्रिस एपस्टीन ने भी योगदान देने की इच्छा व्यक्त की है।[20]
कैटलिन के अनुसार, libSass को किसी भी चीज़ में ड्रॉप[पेड] किया जा सकता है और यह सैस रूप में होता है और इसे आज ही फ़ायरफ़ॉक्स में छोड़ सकते हैं और फ़ायरफ़ॉक्स बना सकते हैं और यह वहां कम्पाइलड हो जाता है। यह सुनिश्चित करने के लिए कि यह संभव रूप में होता है, हमें यकीन है कि हम अपना खुद का पार्सर शुरू से लिखा था।[21]
libSass के डिज़ाइन निम्नलिखित हैं,
- प्रदर्शन - डेवलपर्स ने सैस के रूबी इम्प्लीमेंटेशन की तुलना में गति में 10 गुना वृद्धि की सूचना दी है।[22]
- आसान इंटीग्रेशन – libSass, सैस को अधिक सॉफ़्टवेयर में एकीकृत करना आसान बनाता है। libSass से पहले, सैस को किसी लैंग्वेज या सॉफ़्टवेयर उत्पाद में मजबूती से एकीकृत करने के लिए संपूर्ण रूबी इंटरप्रेटर को बंडल करना आवश्यक होता है। इसके विपरीत, libSass शून्य बाहरी निर्भरता और C जैसे इंटरफ़ेस के साथ एक स्थिर रूप से लिंक करने योग्य लाइब्रेरी होती है, जिससे सैस को सीधे अन्य प्रोग्रामिंग लैंग्वेजो और टूल में लपेटना आसान हो जाता है। उदाहरण के लिए, ओपन सोर्स libSass बाइंडिंग और Node.js, Go (प्रोग्रामिंग लैंग्वेज ) और रूबी प्रोग्रामिंग लैंग्वेज के रूप में उपस्थित है।[19]
- कम्पेटिबिलिटी - libसैस का लक्ष्य सैस के आधिकारिक रूबी इम्प्लीमेंटेशन के साथ पूर्ण कम्पेटिबिलिटी है। यह लक्ष्य libSass 3.3 पर प्राप्त किया जाता है।[23]
आईडीई इंटीग्रेशन
सैस | सॉफ़्टवेयर |
---|---|
एडोब ड्रीमवीवर सीसी 2017 | |
एक्लीपस | |
इमैक | सैस-मोड |
JetBrains IntelliJ IDEA (अंतिम संस्करण) | |
जेटब्रेन पीएचपी | |
जेटब्रेन रूबीमाइन | |
जेटब्रेन वेबस्टॉर्म | |
माइक्रोसॉफ्ट विजुअल स्टूडियो | माइंडस्केप |
माइक्रोसॉफ्ट विजुअल स्टूडियो | सैसीस्टूडियो |
माइक्रोसॉफ्ट वेब मैट्रिक्स | |
नेट बीन | |
विम | हमल .zip |
एटम | |
विजुअल स्टूडियो कोड | |
सबलिन | |
संपादित करें+ |
यह भी देखें
संदर्भ
- ↑ 1.0 1.1 "Dart Sass - latest release". github.com.
- ↑ 2.0 2.1 2.2 2.3 2.4 2.5 Media Mark (3.2.12). "सैस - वाक्यात्मक रूप से अद्भुत स्टाइलशीट" (in English). Sass-lang.com. Retrieved 2014-02-23.
{{cite web}}
: CS1 maint: url-status (link) - ↑ Sass - Syntactically Awesome Stylesheets Tutorial
- ↑ "Sass: Syntactically Awesome Style Sheets". sass-lang.com. Archived from the original on 2013-09-01.
- ↑ "नताली वेइज़ेनबाम का ब्लॉग". Archived from the original on 2007-10-11.
- ↑ 6.0 6.1 6.2 "Sass / Scss". Drupal.org. 2009-10-21. Retrieved 2014-02-23.
- ↑ "एस.ए.एस.एस". www.npmjs.com.
- ↑ "सैस-एम्बेडेड". www.npmjs.com.
- ↑ Weizenbaum, Natalie. "Ruby Sass Has Reached End-Of-Life « Sass Blog". sass.logdown.com. Retrieved 2019-04-21.
- ↑ "Sass: Ruby Sass". sass-lang.com. Retrieved 2019-04-21.
- ↑ "लिबसैस को अस्वीकृत कर दिया गया है". sass-lang.com. 26 October 2020.
- ↑ "नोड-एसएएस". www.npmjs.com.
- ↑ "jsass - Sass कंपाइलर (और कुछ अन्य अच्छाइयाँ) का एक जावा कार्यान्वयन। - गूगल प्रोजेक्ट होस्टिंग". Retrieved 2014-02-23.
- ↑ "जेएसएएस दस्तावेज़ीकरण". jsass.readthedocs.io.
- ↑ "SassCompiler (Vaadin 7.0.7 API)". Vaadin.com. 2013-06-06. Archived from the original on 2014-04-21. Retrieved 2014-02-23.
- ↑ 16.0 16.1 16.2 16.3 16.4 Sass (Syntactically Awesome StyleSheets) SASS_REFERENCE
- ↑ Module: Sass::Script::Functions Sass Functions
- ↑ H. Catlin (2012-10-15). "Hampton's 6 Rules of Mobile Design". HTML5 Developer Conference. Archived from the original on 2021-12-15. Retrieved 2013-07-11.
- ↑ 19.0 19.1 M. Catlin (2012-04-30). "libsass". Moovweb Blog. Archived from the original on 2013-05-08. Retrieved 2013-07-11.
- ↑ C. Eppstein [@chriseppstein] (2013-04-15). "Good resources on writing production, x-platform C++? I haven't coded any since college but I want to hack on libsass /cc @hcatlin @akhleung" (Tweet). Retrieved 2021-03-19 – via Twitter.
- ↑ A. Stacoviak & A. Thorp (2013-06-26). "Sass, libsass, Haml and more with Hampton Catlin". Archived from the original on 2013-08-06. Retrieved 2013-07-30.
- ↑ D. Le Nouaille (2013-06-07). "Sassc and Bourbon". Retrieved 2013-07-11.
- ↑ "सैस अनुकूलता". sass-compatibility.github.io. Retrieved 2019-11-29.