सैस (स्टाइल शीट लैंग्वेज): Difference between revisions

From Vigyanwiki
(Created page with "{{short description|Stylesheet language}} {{For|the software distribution scheme known as "SaaS"|Software as a service}} {{Infobox programming language | name = Sass | logo =...")
 
No edit summary
 
(13 intermediate revisions by 4 users not shown)
Line 1: Line 1:
{{short description|Stylesheet language}}
{{short description|Stylesheet language}}
{{For|the software distribution scheme known as "SaaS"|Software as a service}}
{{For|सॉफ़्टवेयर वितरण योजना जिसे "सैस" के नाम से जाना जाता है|एक सर्विस के रूप में सॉफ्टवेयर है}}
{{Infobox programming language
{{Infobox programming language
| name = Sass
| name = Sass
Line 20: Line 20:
| file_ext = .sass, .scss
| file_ext = .sass, .scss
}}
}}
सैस (''वाक्यविन्यास की दृष्टि से अद्भुत स्टाइल शीट'' का संक्षिप्त रूप) एक [[ preprocessor ]] स्क्रिप्टिंग भाषा है जो [[ व्यापक शैली पत्रक ]] (सीएसएस) में [[व्याख्या की गई भाषा]] या [[संकलित भाषा]] है। SassScript स्क्रिप्टिंग भाषा ही है.
'''सैस''' एक प्रीप्रोसेसर स्क्रिप्टिंग लैंग्वेज है और सिंटैक्स की दृष्टि से अद्भुत '''स्टाइल शीट''' का संक्षिप्त रूप है, जिसे [[कैस्केडिंग स्टाइल शीट्स]] (सीएसएस) में सैसस्क्रिप्ट को स्क्रिप्टिंग लैंग्वेज के रूप में व्याख्या की गई है और इस प्रकार इसे कम्‍पाइलड किया जाता है।


Sass में दो सिंटेक्स (प्रोग्रामिंग भाषाएँ) शामिल हैं। मूल सिंटैक्स, जिसे इंडेंटेड सिंटैक्स कहा जाता है, [[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> यह नियमों को अलग करने के लिए [[ब्लॉक (प्रोग्रामिंग)]] और [[ नई पंक्ति ]] वर्णों को अलग करने के लिए [[इंडेंट शैली]] का उपयोग करता है। नया सिंटैक्स, एससीएसएस (सैसी सीएसएस), सीएसएस की तरह ब्लॉक फ़ॉर्मेटिंग का उपयोग करता है। यह एक ब्लॉक के भीतर नियमों को अलग करने के लिए कोड ब्लॉक और अर्धविराम को दर्शाने के लिए ब्रेसिज़ का उपयोग करता है। इंडेंटेड सिंटैक्स और एससीएसएस फाइलों को पारंपरिक रूप से क्रमशः [[फ़ाइल नाम एक्सटेंशन]] .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 की तरह ब्लॉक फ़ॉर्मेटिंग का उपयोग करता है। यह एक ब्लॉक के भीतर नियमों को भिन्न करने के लिए कोड ब्लॉक और सेमीकॉलन को दर्शाने के लिए ब्रेसिज़ का उपयोग करता है। इंडेंटेड सिंटैक्स और एससीएसएस फाइलों को पारंपरिक रूप से क्रमशः [[फ़ाइल नाम एक्सटेंशन]] .सैस और .एससीएसएस के रूप में दिया जाता है।


CSS#CSS 3 में चयनकर्ताओं और छद्म-चयनकर्ताओं की एक श्रृंखला शामिल है जो समूह नियम उन पर लागू होते हैं। सैस (दोनों सिंटैक्स के बड़े संदर्भ में) अधिक पारंपरिक [[प्रोग्रामिंग भाषा]]ओं, विशेष रूप से [[ ऑब्जेक्ट ओरिएंटेड प्रोग्रामिंग ]] | ऑब्जेक्ट-ओरिएंटेड भाषाओं में उपलब्ध कई तंत्र प्रदान करके सीएसएस का विस्तार करता है, लेकिन वे स्वयं CSS3 के लिए उपलब्ध नहीं हैं। जब SassScript की व्याख्या की जाती है, तो यह Sass फ़ाइल द्वारा परिभाषित विभिन्न चयनकर्ताओं के लिए CSS नियमों के ब्लॉक बनाता है। Sass दुभाषिया SassScript का CSS में अनुवाद करता है। वैकल्पिक रूप से, Sass .sass या .scss फ़ाइल की निगरानी कर सकता है और जब भी .sass या .scss फ़ाइल सहेजी जाती है तो इसे आउटपुट .css फ़ाइल में अनुवादित कर सकता है।<ref name="tutorial">[http://sass-lang.com/tutorial.html Sass - Syntactically Awesome Stylesheets] Tutorial</ref>
सीएसएस3 (कैस्केडिंग स्टाइल शीट्स) में सेलेक्टर और पस्यूडो सेलेक्टर की एक श्रृंखला सम्मलित होती है, जो समूह नियम उन पर प्रयुक्त होते हैं। सैस अधिक पारंपरिक [[प्रोग्रामिंग भाषा|प्रोग्रामिंग]] लैंग्वेज, विशेष रूप से [[ ऑब्जेक्ट ओरिएंटेड प्रोग्रामिंग |ऑब्जेक्ट ओरिएंटेड प्रोग्रामिंग में]] दोनों सिंटैक्स के बड़े संदर्भ में उपलब्ध कई तंत्र प्रदान करके सीएसएस का विस्तार करता है, लेकिन वे स्वयं सीएसएस3 के लिए उपलब्ध नहीं होता है। जब सैसस्क्रिप्ट की व्याख्या की जाती है, तो यह सैस फ़ाइल द्वारा परिभाषित विभिन्न सेलेक्टर के लिए CSS नियमों के ब्लॉक बनाता है। सैस इंटरप्रेटर वैकल्पिक रूप से सैसस्क्रिप्ट का सीएसएस में अनुवाद करता है और इस प्रकार सैस .sass या .scss फ़ाइल का अवलोकन कर सकता है और जब भी .sass या .scss फ़ाइल सेव की जाती है, तो इसे आउटपुट .css फ़ाइल में अनुवादित कर सकता है।<ref name="tutorial">[http://sass-lang.com/tutorial.html Sass - Syntactically Awesome Stylesheets] Tutorial</ref>  
इंडेंटेड वाक्यविन्यास एक धातुभाषा है। एससीएसएस एक धातुभाषा#नेस्टेड और सीएसएस का एक [[सुपरसेट]] है, क्योंकि वैध सीएसएस प्रोग्रामिंग भाषाओं के समान शब्दार्थ के साथ वैध एससीएसएस है।


SassScript निम्नलिखित तंत्र प्रदान करता है: [[ चर (प्रोग्रामिंग) ]], नेस्टिंग (कंप्यूटिंग)#प्रोग्रामिंग में, [[ मिश्रण ]], और चयनकर्ता इनहेरिटेंस (कंप्यूटर विज्ञान)।<ref name="main" />
इंडेंटेड सिंटैक्स एक मेटालैंग्वेज है। एससीएसएस एक नेस्टेड मेटालैंग्वेज और सीएसएस का एक [[सुपरसेट]] है, क्योंकि वैध सीएसएस प्रोग्रामिंग लैंग्वेजो के समान शब्दार्थ के साथ वैध एससीएसएस है।


सैसस्क्रिप्ट निम्नलिखित तंत्र प्रदान करता है: [[ चर (प्रोग्रामिंग) |वेरिएबल (प्रोग्रामिंग)]] , नेस्टिंग (कंप्यूटिंग) प्रोग्रामिंग में[[ मिश्रण | मिक्सिन]], और सेलेक्टर इनहेरिटेंस (कंप्यूटर विज्ञान) के रूप में होते है।<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> इसके प्रारंभिक संस्करणों के बाद, वेइज़ेनबाम और क्रिस एपस्टीन ने Sass को SassScript के साथ विस्तारित करना जारी रखा है, जो Sass फ़ाइलों में उपयोग की जाने वाली एक स्क्रिप्टिंग भाषा है।
सैस को प्रारम्भ में [[हैम्पटन कैटलिन]] द्वारा डिजाइन किया गया था और नेटली वेइज़ेनबाम द्वारा विकसित किया गया था।<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> इसके प्रारंभिक संस्करणों के बाद, वेइज़ेनबाम और क्रिस एपस्टीन ने सैस को सैसस्क्रिप्ट के साथ विस्तारित करना जारी रखा है, जो सैस फ़ाइलों में उपयोग की जाने वाली एक स्क्रिप्टिंग लैंग्वेज के रूप में है।


== प्रमुख कार्यान्वयन ==
== प्रमुख इम्प्लीमेंटेशन  ==
SassScript को कई भाषाओं में लागू किया गया था, उल्लेखनीय कार्यान्वयन हैं:
सैसस्क्रिप्ट को कई लैंग्वेजो में प्रयुक्त किया गया था और निम्नलिखित उल्लेखनीय इम्प्लीमेंटेशन के रूप में हैं,


* आधिकारिक ओपन-सोर्स [[डार्ट (प्रोग्रामिंग भाषा)]] कार्यान्वयन।<ref name=":0" />* [[एनपीएम (सॉफ्टवेयर)]] पर आधिकारिक सैस नोड.जेएस मॉड्यूल, जो शुद्ध जावास्क्रिप्ट के लिए संकलित डार्ट सैस है।<ref>{{cite web|url=https://www.npmjs.com/package/एस.ए.एस.एस.|title=एस.ए.एस.एस.|website=www.npmjs.com}}</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>
* मूल [[खुला स्रोत सॉफ्टवेयर]]|ओपन-सोर्स [[रूबी (प्रोग्रामिंग भाषा)]] कार्यान्वयन 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>
* इस प्रकार आधिकारिक सैस-एम्बेडेड नोड मॉड्यूल के रूप में होते है, जो मूल डार्ट निष्पादन योग्य के चारों ओर एक जावास्क्रिप्ट आवरण होता है।<ref>{{cite web|url=https://www.npmjs.com/package/सैस-एम्बेडेड|title=सैस-एम्बेडेड|website=www.npmjs.com}}</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>
* मूल [[खुला स्रोत सॉफ्टवेयर|ओपन-सोर्स]] [[रूबी (प्रोग्रामिंग भाषा)|रूबी (प्रोग्रामिंग लैंग्वेज)]] में इम्प्लीमेंटेशन 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>
*एनपीएम (सॉफ्टवेयर) पर अप्रचलित नोड-एसएएस नोड मॉड्यूल, अप्रचलित लिबसस पर आधारित।<ref>{{cite web|url=https://www.npmjs.com/package/नोड-एसएएस|title=नोड-एसएएस|website=www.npmjs.com}}</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://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>
*एनपीएम (सॉफ्टवेयर) पर अप्रचलित नोड-एसएएस नोड मॉड्यूल अप्रचलित लिबसस पर आधारित होते है।<ref>{{cite web|url=https://www.npmjs.com/package/नोड-एसएएस|title=नोड-एसएएस|website=www.npmjs.com}}</ref>
* phamlp, [[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> *फायरबग (वेब ​​डेवलपमेंट)[[फ़ायरबग (वेब ​​विकास)]] के लिए [[फ़ायरफ़ॉक्स]] एक्सयूएल (लीगेसी) [[ऐड-ऑन (मोज़िला)]]।<ref name="doc">[http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html Sass (Syntactically Awesome StyleSheets)] SASS_REFERENCE</ref> तब से फ़ायरफ़ॉक्स में एकीकृत डेवलपर टूल के पक्ष में इसे हटा दिया गया है। फ़ायरफ़ॉक्स 57 द्वारा एक्सयूएल एक्सटेंशन के लिए समर्थन बंद करने के बाद से इसने काम करना बंद कर दिया।
* 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 द्वारा एक्सयूएल एक्सटेंशन के लिए समर्थन बंद करने के बाद से इसने काम करना बंद कर दिया है।


== विशेषताएँ ==
== फीवेरिएबल  ==


=== चर ===
=== वेरिएबल्स ===
Sass वेरिएबल्स को परिभाषित करने की अनुमति देता है। वेरिएबल डॉलर चिह्न से शुरू होते हैं (<code>$</code>). वेरिएबल [[असाइनमेंट (कंप्यूटर प्रोग्रामिंग)]] एक [[कोलन (विराम चिह्न)]] के साथ किया जाता है (<code>:</code>).<ref name="doc" />
सैस वेरिएबल्स को परिभाषित करने की अनुमति देता है। वेरिएबल डॉलर चिह्न से शुरू होते हैं (<code>$</code>). वेरिएबल [[असाइनमेंट (कंप्यूटर प्रोग्रामिंग)]] एक [[कोलन (विराम चिह्न)]] के साथ किया जाता है (<code>:</code>).<ref name="doc" />


SassScript चार डेटा प्रकारों का समर्थन करता है:<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" />
वेरिएबल [[पैरामीटर (कंप्यूटर प्रोग्रामिंग)]] कई उपलब्ध [[फलन]] में से किसी एक के आर्गुमेंट या परिणाम के रूप में हो सकते हैं।<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"
!SCSS
!एससीएसएस
!Sass
!सैस
!Compiled CSS
!कम्‍पाइलड सीएसएस
|-
|-
| style="vertical-align: top;" | <syntaxhighlight lang="scss">
| style="vertical-align: top;" | <syntaxhighlight lang="scss">
Line 113: Line 116:




=== घोंसला बनाना ===
=== नेस्टिंग ===
सीएसएस तार्किक नेस्टिंग का समर्थन करता है, लेकिन कोड ब्लॉक स्वयं नेस्ट नहीं होते हैं। सैस नेस्टेड कोड को एक दूसरे के भीतर डालने की अनुमति देता है।<ref name="main" />
सीएसएस तार्किक नेस्टिंग का समर्थन करता है, लेकिन कोड ब्लॉक स्वयं नेस्ट के रूप में नहीं होते हैं। सैस नेस्टेड कोड को एक दूसरे के भीतर डालने की अनुमति देता है।<ref name="main" />


{|class="wikitable"
{|class="wikitable"
!SCSS
!एससीएसएस
!Sass
!सैस
!Compiled CSS
!कम्‍पाइलड सीएसएस
|-
|-
| style="vertical-align: top;" | <syntaxhighlight lang="scss">
| style="vertical-align: top;" | <syntaxhighlight lang="scss">
Line 164: Line 167:
</syntaxhighlight>
</syntaxhighlight>
|}
|}
[[ नाम स्थान ]] नेस्टिंग और पैरेंट संदर्भों सहित अधिक जटिल प्रकार के नेस्टिंग पर सैस दस्तावेज़ में चर्चा की गई है।<ref name="doc" />
[[नेमस्पेस]] नेस्टिंग और पैरेंट संदर्भ सहित अधिक समिश्र प्रकार के नेस्टिंग पर सैस दस्तावेज़ में वेरिएबल की चर्चा की जाती है।<ref name="doc" />
{|class="wikitable"
 
!SCSS
{| class="wikitable"
!Sass
!एससीएसएस
!Compiled CSS
!सैस
!कम्‍पाइलड सीएसएस
|-
|-
| style="vertical-align: top;" | <syntaxhighlight lang="scss">
| style="vertical-align: top;" | <syntaxhighlight lang="scss">
Line 210: Line 214:
==== लूप्स ====
==== लूप्स ====


Sass वेरिएबल्स का उपयोग करके पुनरावृत्ति करने की अनुमति देता है {{code|lang=sass|code=@for}}, {{code|lang=sass|code=@each}} और {{code|lang=sass|code=@while}}, जिसका उपयोग समान वर्गों या आईडी वाले तत्वों पर विभिन्न शैलियों को लागू करने के लिए किया जा सकता है।
सैस वेरिएबल्स का उपयोग करके पुनरावृत्ति करने की अनुमति देता है {{code|lang=sass|code=@for}}, {{code|lang=sass|code=@each}} और {{code|lang=sass|code=@while}}, जिसका उपयोग समान वर्गों या आईडी वाले तत्वों पर विभिन्न शैलियों को प्रयुक्त करने के लिए किया जा सकता है।


{|class="wikitable"
{|class="wikitable"
!Sass
!सैस
!Compiled CSS
!कम्‍पाइलड सीएसएस
|-
|-
| style="vertical-align: top;" | <syntaxhighlight lang="sass">
| style="vertical-align: top;" | <syntaxhighlight lang="sass">
Line 246: Line 250:




==== तर्क ====
==== आर्गुमेंट ====
मिक्सिन्स पैरामीटर (कंप्यूटर प्रोग्रामिंग) का भी समर्थन करते हैं।<ref name="main" />
मिक्सिन्स आर्गुमेंट (कंप्यूटर प्रोग्रामिंग) का भी समर्थन करते हैं।<ref name="main" />


{|class="wikitable"
{|class="wikitable"
!Sass
!सैस
!Compiled CSS
!कम्‍पाइलड सीएसएस
|-
|-
| style="vertical-align: top;" | <syntaxhighlight lang="sass">
| style="vertical-align: top;" | <syntaxhighlight lang="sass">
Line 274: Line 278:


{|class="wikitable"
{|class="wikitable"
!Sass
!सैस
!Compiled CSS
!कम्‍पाइलड सीएसएस
|-
|-
| style="vertical-align: top;" | <syntaxhighlight lang="sass">
| style="vertical-align: top;" | <syntaxhighlight lang="sass">
Line 309: Line 313:




=== चयनकर्ता विरासत ===
=== सेलेक्टर इनहेरिटेंस ===
जबकि CSS3 [[दस्तावेज़ ऑब्जेक्ट मॉडल]] (DOM) पदानुक्रम का समर्थन करता है, यह चयनकर्ता विरासत की अनुमति नहीं देता है। सैस में, कोड ब्लॉक के अंदर एक लाइन डालकर इनहेरिटेंस हासिल किया जाता है जो @extend कीवर्ड का उपयोग करता है और दूसरे चयनकर्ता को संदर्भित करता है। विस्तारित चयनकर्ता की विशेषताएँ कॉलिंग चयनकर्ता पर लागू होती हैं।<ref name="main" />
जबकि CSS3 [[दस्तावेज़ ऑब्जेक्ट मॉडल]] (DOM) पदानुक्रम का समर्थन करता है, यह सेलेक्टर इनहेरिटेंस की अनुमति नहीं देता है। सैस में, कोड ब्लॉक के अंदर एक लाइन डालकर इनहेरिटेंस प्राप्त किया जाता है, जो @extend कीवर्ड का उपयोग करता है और दूसरे सेलेक्टर को संदर्भित करता है और इस प्रकार विस्तारित सेलेक्टर की एट्रिब्यूट कॉलिंग सेलेक्टर पर प्रयुक्त होती हैं।<ref name="main" />


{|class="wikitable"
{|class="wikitable"
!Sass
!सैस
!Compiled CSS
!कम्‍पाइलड सीएसएस
|-
|-
| style="vertical-align: top;" | <syntaxhighlight lang="sass">
| style="vertical-align: top;" | <syntaxhighlight lang="sass">
Line 346: Line 350:
</syntaxhighlight>
</syntaxhighlight>
|}
|}
सैस एकाधिक वंशानुक्रम का समर्थन करता है।<ref name="doc" />
सैस एकाधिक इनहेरिटेंस का समर्थन करता है।<ref name="doc" />




== libSass ==
== libSass ==
2012 HTML5 डेवलपर कॉन्फ्रेंस में, Sass के निर्माता, हैम्पटन कैटलिन ने libSass के संस्करण 1.0 की घोषणा की, जो कैटलिन, आरोन लेउंग और [[Moovweb]] की इंजीनियरिंग टीम द्वारा विकसित Sass का एक खुला स्रोत 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
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 360: 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>{{cite tweet
}}</ref> और इस प्रकार वर्तमान सैस मेंटेनर क्रिस एपस्टीन ने भी योगदान देने की इच्छा व्यक्त की है।<ref>{{cite tweet
   | user=chriseppstein
   | user=chriseppstein
   | number=323845132417900544
   | number=323845132417900544
Line 367: Line 371:
   | access-date=2021-03-19
   | access-date=2021-03-19
   | author=C. Eppstein}}</ref>
   | author=C. Eppstein}}</ref>
कैटलिन के अनुसार, libSass को किसी भी चीज़ में ड्रॉप[पेड] किया जा सकता है और इसमें Sass होगा...आप इसे आज ही फ़ायरफ़ॉक्स में छोड़ सकते हैं और फ़ायरफ़ॉक्स बना सकते हैं और यह वहां संकलित हो जाएगा। यह सुनिश्चित करने के लिए कि यह संभव होगा, हमने अपना खुद का पार्सर शुरू से लिखा।<ref>{{cite web
 
कैटलिन के अनुसार, 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 377: Line 382:
   | url-status=dead
   | url-status=dead
   }}</ref>
   }}</ref>
libSass के डिज़ाइन लक्ष्य हैं:
 
* प्रदर्शन - डेवलपर्स ने सैस के रूबी कार्यान्वयन की तुलना में गति में 10 गुना वृद्धि की सूचना दी है।<ref>{{cite web
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 384: Line 390:
   | access-date=2013-07-11
   | access-date=2013-07-11
   | author=D. Le Nouaille}}</ref>
   | author=D. Le Nouaille}}</ref>
* आसान एकीकरण – libSass, Sass को अधिक सॉफ़्टवेयर में एकीकृत करना आसान बनाता है। libSass से पहले, Sass को किसी भाषा या सॉफ़्टवेयर उत्पाद में मजबूती से एकीकृत करने के लिए संपूर्ण रूबी दुभाषिया को बंडल करना आवश्यक था। इसके विपरीत, libSass शून्य बाहरी निर्भरता और C-जैसे इंटरफ़ेस के साथ एक स्थिर रूप से लिंक करने योग्य लाइब्रेरी है, जिससे Sass को सीधे अन्य प्रोग्रामिंग भाषाओं और टूल में लपेटना आसान हो जाता है। उदाहरण के लिए, ओपन सोर्स libSass बाइंडिंग अब Node.js, Go (प्रोग्रामिंग भाषा), और [[रूबी प्रोग्रामिंग भाषा]] के लिए मौजूद है।<ref name="libsass-moovweb-blog" />* अनुकूलता - libSass का लक्ष्य Sass के आधिकारिक रूबी कार्यान्वयन के साथ पूर्ण अनुकूलता है। यह लक्ष्य libsass 3.3 पर प्राप्त किया गया है।<ref>{{Cite web|url=http://sass-compatibility.github.io/|title=सैस अनुकूलता|website=sass-compatibility.github.io|access-date=2019-11-29}}</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"
|+IDE integration of Sass
|+सैस का आईडीई इंटीग्रेशन
|-
|-
! scope="col" |IDE !! scope="col" |Software
! scope="col" |सैस !! scope="col" |सॉफ़्टवेयर
|-
|-
!scope="row" |[[Adobe Dreamweaver]] CC 2017
!scope="row" |एडोब ड्रीमवीवर सीसी 2017
|
|
|-
|-
!scope="row" | [[Eclipse (software)|Eclipse]]
!scope="row" | [[Eclipse (software)|एक्लीपस]]
|
|
|-
|-
!scope="row" | [[Emacs]]
!scope="row" | [[Emacs|इमैक]]
| sass-mode
| सैस-मोड
|-
|-
!scope="row" | [[IntelliJ_IDEA|JetBrains IntelliJ IDEA (Ultimate Edition)]]
!scope="row" | [[IntelliJ_IDEA|JetBrains IntelliJ IDEA (अंतिम संस्करण)]]
|  
|  
|-
|-
!scope="row" | [[PhpStorm|JetBrains PhpStorm]]  
!scope="row" | [[PhpStorm|जेटब्रेन पीएचपी]]
[[PhpStorm|स्टॉर्म]]
|  
|  
|-
|-
!scope="row" | [[RubyMine|JetBrains RubyMine]]  
!scope="row" | [[RubyMine|जेटब्रेन रूबीमाइन]]
|  
|  
|-
|-
!scope="row" | [[WebStorm|JetBrains WebStorm]]
!scope="row" | [[WebStorm|जेटब्रेन वेबस्टॉर्म]]
|  
|  
|-
|-
!scope="row" | [[Microsoft Visual Studio]]  
!scope="row" | [[Microsoft Visual Studio|माइक्रोसॉफ्ट विजुअल स्टूडियो]]
| Mindscape
| माइंडस्केप
|-
|-
!scope="row" | [[Microsoft Visual Studio]]
!scope="row" | [[Microsoft Visual Studio|माइक्रोसॉफ्ट विजुअल स्टूडियो]]
| SassyStudio
| सैसीस्टूडियो
|-
|-
!scope="row" | [[Microsoft WebMatrix]]  
!scope="row" | [[Microsoft WebMatrix|माइक्रोसॉफ्ट वेब मैट्रिक्स]]  
|
|
|-
|-
!scope="row" | [[NetBeans]]
!scope="row" | [[NetBeans|नेट बीन]]
|  
|  
|-
|-
!scope="row" | [[Vim (text editor)|Vim]]
!scope="row" | [[Vim (text editor)|विम]]
| haml.zip
| हमल .zip
|-
|-
!scope="row" | [[Atom (text editor)|Atom]]
!scope="row" | [[Atom (text editor)|एटम]]
|
|
|-
|-
!scope="row" | [[Visual Studio Code]]
!scope="row" | [[Visual Studio Code|विजुअल स्टूडियो कोड]]
|
|
|-
|-
!scope="row" |[[Sublime Text|Sublime]]
!scope="row" |[[Sublime Text|सबलिन]]
|
|
|-
|-
!scope="row" | [[Edit+]]
!scope="row" | [[Edit+|संपादित करें+]]
|
|
|}
|}
Line 444: Line 452:


== यह भी देखें ==
== यह भी देखें ==
* [[कम (स्टाइलशीट भाषा)]]
* [[कम (स्टाइलशीट भाषा)|लेस्स (स्टाइलशीट लैंग्वेज )]]
* [[स्टाइलस (स्टाइलशीट भाषा)]]
* [[स्टाइलस (स्टाइलशीट भाषा)|स्टाइलस (स्टाइलशीट लैंग्वेज )]]


== संदर्भ ==
== संदर्भ ==
Line 452: Line 460:


== बाहरी संबंध ==
== बाहरी संबंध ==
* {{Official website}}
* [https://sass-lang.com/ Official Website]


{{Stylesheet languages}}
{{Stylesheet languages}}
[[Category: निःशुल्क कंप्यूटर लाइब्रेरी]] [[Category: प्रोग्रामिंग भाषाएँ 2006 में बनाई गईं]] [[Category: रूबी (प्रोग्रामिंग भाषा)]] [[Category: एमआईटी लाइसेंस का उपयोग करने वाला सॉफ्टवेयर]] [[Category: स्टाइलशीट भाषाएँ]]


[[Category: Machine Translated Page]]
[[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

For सॉफ़्टवेयर वितरण योजना जिसे "सैस" के नाम से जाना जाता है, see एक सर्विस के रूप में सॉफ्टवेयर है.
Sass
Sass Logo Color.svg
द्वारा डिज़ाइन किया गयाHampton Catlin
DeveloperNatalie Weizenbaum, Chris Eppstein
पहली प्रस्तुतिNovember 28, 2006; 17 years ago (2006-11-28)
Stable release
1.54.0[1] / July 7, 2022; 2 years ago (2022-07-07)[1]
टाइपिंग अनुशासनDynamic
ओएसCross-platform
लाइसेंसMIT License
फ़ाइल नाम एक्सटेंशनएस.sass, .scss
वेबसाइटsass-lang.com
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. ↑ 1.0 1.1 "Dart Sass - latest release". github.com.
  2. ↑ 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)
  3. ↑ Sass - Syntactically Awesome Stylesheets Tutorial
  4. ↑ "Sass: Syntactically Awesome Style Sheets". sass-lang.com. Archived from the original on 2013-09-01.
  5. ↑ "नताली वेइज़ेनबाम का ब्लॉग". Archived from the original on 2007-10-11.
  6. ↑ 6.0 6.1 6.2 "Sass / Scss". Drupal.org. 2009-10-21. Retrieved 2014-02-23.
  7. ↑ "एस.ए.एस.एस". www.npmjs.com.
  8. ↑ "सैस-एम्बेडेड". www.npmjs.com.
  9. ↑ Weizenbaum, Natalie. "Ruby Sass Has Reached End-Of-Life « Sass Blog". sass.logdown.com. Retrieved 2019-04-21.
  10. ↑ "Sass: Ruby Sass". sass-lang.com. Retrieved 2019-04-21.
  11. ↑ "लिबसैस को अस्वीकृत कर दिया गया है". sass-lang.com. 26 October 2020.
  12. ↑ "नोड-एसएएस". www.npmjs.com.
  13. ↑ "jsass - Sass कंपाइलर (और कुछ अन्य अच्छाइयाँ) का एक जावा कार्यान्वयन। - गूगल प्रोजेक्ट होस्टिंग". Retrieved 2014-02-23.
  14. ↑ "जेएसएएस दस्तावेज़ीकरण". jsass.readthedocs.io.
  15. ↑ "SassCompiler (Vaadin 7.0.7 API)". Vaadin.com. 2013-06-06. Archived from the original on 2014-04-21. Retrieved 2014-02-23.
  16. ↑ 16.0 16.1 16.2 16.3 16.4 Sass (Syntactically Awesome StyleSheets) SASS_REFERENCE
  17. ↑ Module: Sass::Script::Functions Sass Functions
  18. ↑ 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. ↑ 19.0 19.1 M. Catlin (2012-04-30). "libsass". Moovweb Blog. Archived from the original on 2013-05-08. Retrieved 2013-07-11.
  20. ↑ 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.
  21. ↑ 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.
  22. ↑ D. Le Nouaille (2013-06-07). "Sassc and Bourbon". Retrieved 2013-07-11.
  23. ↑ "सैस अनुकूलता". sass-compatibility.github.io. Retrieved 2019-11-29.


बाहरी संबंध

Retrieved from ‘https://www.vigyanwiki.in/index.php?title=सैस_(स्टाइल_शीट_लैंग्वेज)&oldid=233030’