सैस (स्टाइल शीट लैंग्वेज): Difference between revisions
No edit summary |
No edit summary |
||
Line 28: | Line 28: | ||
इंडेंटेड सिंटैक्स एक मेटालैंग्वेज है। एससीएसएस एक नेस्टेड मेटालैंग्वेज और सीएसएस का एक [[सुपरसेट]] है, क्योंकि वैध सीएसएस प्रोग्रामिंग लैंग्वेजो के समान शब्दार्थ के साथ वैध एससीएसएस है। | इंडेंटेड सिंटैक्स एक मेटालैंग्वेज है। एससीएसएस एक नेस्टेड मेटालैंग्वेज और सीएसएस का एक [[सुपरसेट]] है, क्योंकि वैध सीएसएस प्रोग्रामिंग लैंग्वेजो के समान शब्दार्थ के साथ वैध एससीएसएस है। | ||
सैसस्क्रिप्ट निम्नलिखित तंत्र प्रदान करता है: [[ चर (प्रोग्रामिंग) | | सैसस्क्रिप्ट निम्नलिखित तंत्र प्रदान करता है: [[ चर (प्रोग्रामिंग) | वेरिएबल (प्रोग्रामिंग)]] , नेस्टिंग (कंप्यूटिंग) प्रोग्रामिंग में[[ मिश्रण | मिक्सिन]], और सेलेक्टर इनहेरिटेंस (कंप्यूटर विज्ञान) के रूप में होते है।<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="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" /> | ||
* आधिकारिक सैस-एम्बेडेड नोड मॉड्यूल जो मूल डार्ट निष्पादन योग्य के चारों ओर एक जावास्क्रिप्ट आवरण है।<ref>{{cite web|url=https://www.npmjs.com/package/सैस-एम्बेडेड|title=सैस-एम्बेडेड|website=www.npmjs.com}}</ref> | *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> | ||
* libSass, आधिकारिक ओपन-सोर्स [[C++]] | * मूल [[खुला स्रोत सॉफ्टवेयर|ओपन-सोर्स]] [[रूबी (प्रोग्रामिंग भाषा)|रूबी (प्रोग्रामिंग लैंग्वेज)]] में इम्प्लीमेंटेशन 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> | ||
* JSass, एक | *एनपीएम (सॉफ्टवेयर) पर अप्रचलित नोड-एसएएस नोड मॉड्यूल अप्रचलित लिबसस पर आधारित होते है।<ref>{{cite web|url=https://www.npmjs.com/package/नोड-एसएएस|title=नोड-एसएएस|website=www.npmjs.com}}</ref> | ||
* | * JSass, एक इनफर्मल [[जावा (प्रोग्रामिंग भाषा)|जावा (प्रोग्रामिंग लैंग्वेज )]] इम्प्लीमेंटेशन,<ref>{{cite web|url=https://code.google.com/p/jsass/|title=jsass - Sass कंपाइलर (और कुछ अन्य अच्छाइयाँ) का एक जावा कार्यान्वयन। - गूगल प्रोजेक्ट होस्टिंग|access-date=2014-02-23}}</ref> बहिष्कृत libSass पर आधारित होते है।<ref>{{cite web|url=https://jsass.readthedocs.io/en/latest/|title=जेएसएएस दस्तावेज़ीकरण|website=jsass.readthedocs.io}}</ref> | ||
* फैमलप, [[PHP]] में एक इनफर्मल Sass/SCSS इम्प्लीमेंटेशन होता है।<ref name=":0" /> | |||
*[[वादिन]] में सैस का जावा इम्प्लीमेंटेशन होता है।<ref>{{cite web|url=https://vaadin.com/api/7.0.7/com/vaadin/sass/SassCompiler.html|title=SassCompiler (Vaadin 7.0.7 API)|date=2013-06-06|publisher=Vaadin.com|access-date=2014-02-23|archive-date=2014-04-21|archive-url=https://web.archive.org/web/20140421052745/https://vaadin.com/api/7.0.7/com/vaadin/sass/SassCompiler.html|url-status=dead}}</ref> | |||
*फायरबग वेब डेवलपमेंट के लिए [[फ़ायरफ़ॉक्स]] XUL (लीजेसी) [[ऐड-ऑन (मोज़िला)|एक्सटेंशन]] पर आधारित होते है।<ref name="doc">[http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html Sass (Syntactically Awesome StyleSheets)] SASS_REFERENCE</ref> तब से फ़ायरफ़ॉक्स में एकीकृत डेवलपर टूल के पक्ष में इसे हटा दिया गया है। फ़ायरफ़ॉक्स 57 द्वारा एक्सयूएल एक्सटेंशन के लिए समर्थन बंद करने के बाद से इसने काम करना बंद कर दिया है। | |||
== | == फीवेरिएबल == | ||
=== | === वेरिएबल्स === | ||
सैस वेरिएबल्स को परिभाषित करने की अनुमति देता है। वेरिएबल डॉलर चिह्न से शुरू होते हैं (<code>$</code>). वेरिएबल [[असाइनमेंट (कंप्यूटर प्रोग्रामिंग)]] एक [[कोलन (विराम चिह्न)]] के साथ किया जाता है (<code>:</code>).<ref name="doc" /> | सैस वेरिएबल्स को परिभाषित करने की अनुमति देता है। वेरिएबल डॉलर चिह्न से शुरू होते हैं (<code>$</code>). वेरिएबल [[असाइनमेंट (कंप्यूटर प्रोग्रामिंग)]] एक [[कोलन (विराम चिह्न)]] के साथ किया जाता है (<code>:</code>).<ref name="doc" /> | ||
सैसस्क्रिप्ट चार डेटा प्रकारों का समर्थन करता है | सैसस्क्रिप्ट चार डेटा प्रकारों का समर्थन करता है,<ref name="doc" /> | ||
* संख्याएँ (इकाइयों सहित) | * संख्याएँ (इकाइयों सहित) | ||
* [[स्ट्रिंग (कंप्यूटर विज्ञान)]] (उद्धरण के साथ या बिना) | * [[स्ट्रिंग (कंप्यूटर विज्ञान)]] (उद्धरण के साथ या बिना) | ||
* | * कलर (नाम, या नाम) | ||
* [[बूलियन डेटा प्रकार]] | * [[बूलियन डेटा प्रकार]] | ||
वेरिएबल [[पैरामीटर (कंप्यूटर प्रोग्रामिंग)]] | वेरिएबल [[पैरामीटर (कंप्यूटर प्रोग्रामिंग)]] कई उपलब्ध [[फलन]] में से किसी एक के तर्क या परिणाम के रूप में हो सकते हैं।<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" | ||
Line 164: | Line 167: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
|} | |} | ||
[[ नाम स्थान ]] नेस्टिंग और पैरेंट संदर्भों सहित अधिक जटिल प्रकार के नेस्टिंग पर सैस दस्तावेज़ में | [[ नाम स्थान ]] नेस्टिंग और पैरेंट संदर्भों सहित अधिक जटिल प्रकार के नेस्टिंग पर सैस दस्तावेज़ में वेरिएबल ्चा की गई है।<ref name="doc" /> | ||
{|class="wikitable" | {|class="wikitable" | ||
!SCSS | !SCSS | ||
Line 310: | Line 313: | ||
=== चयनकर्ता विरासत === | === चयनकर्ता विरासत === | ||
जबकि CSS3 [[दस्तावेज़ ऑब्जेक्ट मॉडल]] (DOM) पदानुक्रम का समर्थन करता है, यह चयनकर्ता विरासत की अनुमति नहीं देता है। सैस में, कोड ब्लॉक के अंदर एक लाइन डालकर इनहेरिटेंस हासिल किया जाता है जो @extend कीवर्ड का उपयोग करता है और दूसरे चयनकर्ता को संदर्भित करता है। विस्तारित चयनकर्ता की | जबकि CSS3 [[दस्तावेज़ ऑब्जेक्ट मॉडल]] (DOM) पदानुक्रम का समर्थन करता है, यह चयनकर्ता विरासत की अनुमति नहीं देता है। सैस में, कोड ब्लॉक के अंदर एक लाइन डालकर इनहेरिटेंस हासिल किया जाता है जो @extend कीवर्ड का उपयोग करता है और दूसरे चयनकर्ता को संदर्भित करता है। विस्तारित चयनकर्ता की फीवेरिएबल कॉलिंग चयनकर्ता पर प्रयुक्त होती हैं।<ref name="main" /> | ||
{|class="wikitable" | {|class="wikitable" | ||
Line 350: | Line 353: | ||
== libSass == | == libSass == | ||
2012 HTML5 डेवलपर कॉन्फ्रेंस में, सैस के निर्माता, हैम्पटन कैटलिन ने libसैस के संस्करण 1.0 की घोषणा की, जो कैटलिन, आरोन लेउंग और [[Moovweb]] की इंजीनियरिंग टीम द्वारा विकसित सैस का एक | 2012 HTML5 डेवलपर कॉन्फ्रेंस में, सैस के निर्माता, हैम्पटन कैटलिन ने libसैस के संस्करण 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 378: | Line 381: | ||
}}</ref> | }}</ref> | ||
libसैस के डिज़ाइन लक्ष्य हैं: | libसैस के डिज़ाइन लक्ष्य हैं: | ||
* प्रदर्शन - डेवलपर्स ने सैस के रूबी | * प्रदर्शन - डेवलपर्स ने सैस के रूबी इम्प्लीमेंटेशन की तुलना में गति में 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 384: | Line 387: | ||
| access-date=2013-07-11 | | access-date=2013-07-11 | ||
| author=D. Le Nouaille}}</ref> | | author=D. Le Nouaille}}</ref> | ||
* आसान एकीकरण – libSass, सैस को अधिक सॉफ़्टवेयर में एकीकृत करना आसान बनाता है। libसैस से पहले, सैस को किसी लैंग्वेज या सॉफ़्टवेयर उत्पाद में मजबूती से एकीकृत करने के लिए संपूर्ण रूबी इंटरप्रेटर को बंडल करना आवश्यक था। इसके विपरीत, libसैस शून्य बाहरी निर्भरता और C-जैसे इंटरफ़ेस के साथ एक स्थिर रूप से लिंक करने योग्य लाइब्रेरी है, जिससे सैस को सीधे अन्य प्रोग्रामिंग लैंग्वेजो और टूल में लपेटना आसान हो जाता है। उदाहरण के लिए, ओपन सोर्स libसैस बाइंडिंग अब Node.js, Go (प्रोग्रामिंग लैंग्वेज ), और [[रूबी प्रोग्रामिंग भाषा|रूबी प्रोग्रामिंग लैंग्वेज]] के लिए मौजूद है।<ref name="libsass-moovweb-blog" />* अनुकूलता - libसैस का लक्ष्य सैस के आधिकारिक रूबी | * आसान एकीकरण – libSass, सैस को अधिक सॉफ़्टवेयर में एकीकृत करना आसान बनाता है। libसैस से पहले, सैस को किसी लैंग्वेज या सॉफ़्टवेयर उत्पाद में मजबूती से एकीकृत करने के लिए संपूर्ण रूबी इंटरप्रेटर को बंडल करना आवश्यक था। इसके विपरीत, libसैस शून्य बाहरी निर्भरता और C-जैसे इंटरफ़ेस के साथ एक स्थिर रूप से लिंक करने योग्य लाइब्रेरी है, जिससे सैस को सीधे अन्य प्रोग्रामिंग लैंग्वेजो और टूल में लपेटना आसान हो जाता है। उदाहरण के लिए, ओपन सोर्स libसैस बाइंडिंग अब Node.js, Go (प्रोग्रामिंग लैंग्वेज ), और [[रूबी प्रोग्रामिंग भाषा|रूबी प्रोग्रामिंग लैंग्वेज]] के लिए मौजूद है।<ref name="libsass-moovweb-blog" />* अनुकूलता - libसैस का लक्ष्य सैस के आधिकारिक रूबी इम्प्लीमेंटेशन के साथ पूर्ण अनुकूलता है। यह लक्ष्य libसैस 3.3 पर प्राप्त किया गया है।<ref>{{Cite web|url=http://sass-compatibility.github.io/|title=सैस अनुकूलता|website=sass-compatibility.github.io|access-date=2019-11-29}}</ref> | ||
Revision as of 00:21, 19 July 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]
SCSS | Sass | Compiled CSS |
---|---|---|
$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]
SCSS | Sass | Compiled CSS |
---|---|---|
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]
SCSS | Sass | Compiled CSS |
---|---|---|
@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
, जिसका उपयोग समान वर्गों या आईडी वाले तत्वों पर विभिन्न शैलियों को प्रयुक्त करने के लिए किया जा सकता है।
Sass | Compiled CSS |
---|---|
$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]
Sass | Compiled CSS |
---|---|
=left($dist)
float: left
margin-left: $dist
#data
+left(10px)
|
#data {
float: left;
margin-left: 10px;
}
|
संयोजन में
Sass | Compiled CSS |
---|---|
=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]
Sass | Compiled CSS |
---|---|
.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 डेवलपर कॉन्फ्रेंस में, सैस के निर्माता, हैम्पटन कैटलिन ने libसैस के संस्करण 1.0 की घोषणा की, जो कैटलिन, आरोन लेउंग और Moovweb की इंजीनियरिंग टीम द्वारा विकसित सैस का एक ओपन-सोर्स C++ इम्प्लीमेंटेशन है।[18][19] वर्तमान सैस अनुरक्षक क्रिस एपस्टीन ने भी योगदान देने का इरादा व्यक्त किया है।[20] कैटलिन के अनुसार, libसैस को किसी भी चीज़ में ड्रॉप[पेड] किया जा सकता है और इसमें सैस होगा...आप इसे आज ही फ़ायरफ़ॉक्स में छोड़ सकते हैं और फ़ायरफ़ॉक्स बना सकते हैं और यह वहां संकलित हो जाएगा। यह सुनिश्चित करने के लिए कि यह संभव होगा, हमने अपना खुद का पार्सर शुरू से लिखा।[21] libसैस के डिज़ाइन लक्ष्य हैं:
- प्रदर्शन - डेवलपर्स ने सैस के रूबी इम्प्लीमेंटेशन की तुलना में गति में 10 गुना वृद्धि की सूचना दी है।[22]
- आसान एकीकरण – libSass, सैस को अधिक सॉफ़्टवेयर में एकीकृत करना आसान बनाता है। libसैस से पहले, सैस को किसी लैंग्वेज या सॉफ़्टवेयर उत्पाद में मजबूती से एकीकृत करने के लिए संपूर्ण रूबी इंटरप्रेटर को बंडल करना आवश्यक था। इसके विपरीत, libसैस शून्य बाहरी निर्भरता और C-जैसे इंटरफ़ेस के साथ एक स्थिर रूप से लिंक करने योग्य लाइब्रेरी है, जिससे सैस को सीधे अन्य प्रोग्रामिंग लैंग्वेजो और टूल में लपेटना आसान हो जाता है। उदाहरण के लिए, ओपन सोर्स libसैस बाइंडिंग अब Node.js, Go (प्रोग्रामिंग लैंग्वेज ), और रूबी प्रोग्रामिंग लैंग्वेज के लिए मौजूद है।[19]* अनुकूलता - libसैस का लक्ष्य सैस के आधिकारिक रूबी इम्प्लीमेंटेशन के साथ पूर्ण अनुकूलता है। यह लक्ष्य libसैस 3.3 पर प्राप्त किया गया है।[23]
आईडीई एकीकरण
IDE | Software |
---|---|
Adobe Dreamweaver CC 2017 | |
Eclipse | |
Emacs | sass-mode |
JetBrains IntelliJ IDEA (Ultimate Edition) | |
JetBrains PhpStorm | |
JetBrains RubyMine | |
JetBrains WebStorm | |
Microsoft Visual Studio | Mindscape |
Microsoft Visual Studio | SassyStudio |
Microsoft WebMatrix | |
NetBeans | |
Vim | हमल .zip |
Atom | |
Visual Studio Code | |
Sublime | |
Edit+ |
यह भी देखें
संदर्भ
- ↑ 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.
बाहरी संबंध
- No URL found. Please specify a URL here or add one to Wikidata.