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


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


== इतिहास ==
== इतिहास ==
सैस को शुरुआत में [[हैम्पटन कैटलिन]] द्वारा डिजाइन किया गया था और नेटली वेइज़ेनबाम द्वारा विकसित किया गया था।<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 के साथ विस्तारित करना जारी रखा है, जो सैस फ़ाइलों में उपयोग की जाने वाली एक स्क्रिप्टिंग लैंग्वेज  है।


== प्रमुख कार्यान्वयन ==
== प्रमुख कार्यान्वयन ==
SassScript को कई भाषाओं में लागू किया गया था, उल्लेखनीय कार्यान्वयन हैं:
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>
* आधिकारिक सैस-एम्बेडेड नोड मॉड्यूल जो मूल डार्ट निष्पादन योग्य के चारों ओर एक जावास्क्रिप्ट आवरण है।<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>
* मूल [[खुला स्रोत सॉफ्टवेयर]]|ओपन-सोर्स [[रूबी (प्रोग्रामिंग भाषा)|रूबी (प्रोग्रामिंग लैंग्वेज )]] कार्यान्वयन 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>
* 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>
* JSass, एक अनौपचारिक [[जावा (प्रोग्रामिंग भाषा)|जावा (प्रोग्रामिंग लैंग्वेज )]] कार्यान्वयन,<ref>{{cite web|url=https://code.google.com/p/jsass/|title=jsass - Sass कंपाइलर (और कुछ अन्य अच्छाइयाँ) का एक जावा कार्यान्वयन। - गूगल प्रोजेक्ट होस्टिंग|access-date=2014-02-23}}</ref> बहिष्कृत libसैस पर आधारित।<ref>{{cite web|url=https://jsass.readthedocs.io/en/latest/|title=जेएसएएस दस्तावेज़ीकरण|website=jsass.readthedocs.io}}</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 द्वारा एक्सयूएल एक्सटेंशन के लिए समर्थन बंद करने के बाद से इसने काम करना बंद कर दिया।
* pहमल p, [[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 द्वारा एक्सयूएल एक्सटेंशन के लिए समर्थन बंद करने के बाद से इसने काम करना बंद कर दिया।


== विशेषताएँ ==
== विशेषताएँ ==


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


SassScript चार डेटा प्रकारों का समर्थन करता है:<ref name="doc" />
SassScript चार डेटा प्रकारों का समर्थन करता है:<ref name="doc" />
Line 210: Line 210:
==== लूप्स ====
==== लूप्स ====


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"
Line 350: Line 350:


== 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 डेवलपर कॉन्फ्रेंस में, सैस के निर्माता, हैम्पटन कैटलिन ने 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 367: Line 367:
   | access-date=2021-03-19
   | access-date=2021-03-19
   | author=C. Eppstein}}</ref>
   | author=C. Eppstein}}</ref>
कैटलिन के अनुसार, libSass को किसी भी चीज़ में ड्रॉप[पेड] किया जा सकता है और इसमें Sass होगा...आप इसे आज ही फ़ायरफ़ॉक्स में छोड़ सकते हैं और फ़ायरफ़ॉक्स बना सकते हैं और यह वहां संकलित हो जाएगा। यह सुनिश्चित करने के लिए कि यह संभव होगा, हमने अपना खुद का पार्सर शुरू से लिखा।<ref>{{cite web
कैटलिन के अनुसार, libसैस को किसी भी चीज़ में ड्रॉप[पेड] किया जा सकता है और इसमें सैस होगा...आप इसे आज ही फ़ायरफ़ॉक्स में छोड़ सकते हैं और फ़ायरफ़ॉक्स बना सकते हैं और यह वहां संकलित हो जाएगा। यह सुनिश्चित करने के लिए कि यह संभव होगा, हमने अपना खुद का पार्सर शुरू से लिखा।<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 377:
   | url-status=dead
   | url-status=dead
   }}</ref>
   }}</ref>
libSass के डिज़ाइन लक्ष्य हैं:
libसैस के डिज़ाइन लक्ष्य हैं:
* प्रदर्शन - डेवलपर्स ने सैस के रूबी कार्यान्वयन की तुलना में गति में 10 गुना वृद्धि की सूचना दी है।<ref>{{cite web
* प्रदर्शन - डेवलपर्स ने सैस के रूबी कार्यान्वयन की तुलना में गति में 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/
Line 384: Line 384:
   | 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, सैस को अधिक सॉफ़्टवेयर में एकीकृत करना आसान बनाता है। 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>




Line 427: Line 427:
|-
|-
!scope="row" | [[Vim (text editor)|Vim]]
!scope="row" | [[Vim (text editor)|Vim]]
| haml.zip
| हमल .zip
|-
|-
!scope="row" | [[Atom (text editor)|Atom]]
!scope="row" | [[Atom (text editor)|Atom]]
Line 444: Line 444:


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


== संदर्भ ==
== संदर्भ ==

Revision as of 23:30, 18 July 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 की तरह ब्लॉक फ़ॉर्मेटिंग का उपयोग करता है। यह एक ब्लॉक के भीतर नियमों को भिन्न करने के लिए कोड ब्लॉक और सेमीकॉलन को दर्शाने के लिए ब्रेसिज़ का उपयोग करता है। इंडेंटेड सिंटैक्स और एससीएसएस फाइलों को पारंपरिक रूप से क्रमशः फ़ाइल नाम एक्सटेंशन .सैस और .एससीएसएस के रूप में दिया जाता है।

CSS#CSS 3 में चयनकर्ताओं और छद्म-चयनकर्ताओं की एक श्रृंखला शामिल है जो समूह नियम उन पर लागू होते हैं। सैस (दोनों सिंटैक्स के बड़े संदर्भ में) अधिक पारंपरिक प्रोग्रामिंग लैंग्वेज ओं, विशेष रूप से ऑब्जेक्ट ओरिएंटेड प्रोग्रामिंग | ऑब्जेक्ट-ओरिएंटेड लैंग्वेज ओं में उपलब्ध कई तंत्र प्रदान करके सीएसएस का विस्तार करता है, लेकिन वे स्वयं CSS3 के लिए उपलब्ध नहीं हैं। जब SassScript की व्याख्या की जाती है, तो यह सैस फ़ाइल द्वारा परिभाषित विभिन्न चयनकर्ताओं के लिए CSS नियमों के ब्लॉक बनाता है। सैस दुभाषिया SassScript का CSS में अनुवाद करता है। वैकल्पिक रूप से, सैस .सैस या .scss फ़ाइल की निगरानी कर सकता है और जब भी .सैस या .scss फ़ाइल सहेजी जाती है तो इसे आउटपुट .css फ़ाइल में अनुवादित कर सकता है।[3] इंडेंटेड सिंटैक्स एक धातुलैंग्वेज है। एससीएसएस एक धातुलैंग्वेज #नेस्टेड और सीएसएस का एक सुपरसेट है, क्योंकि वैध सीएसएस प्रोग्रामिंग लैंग्वेज ओं के समान शब्दार्थ के साथ वैध एससीएसएस है।

SassScript निम्नलिखित तंत्र प्रदान करता है: चर (प्रोग्रामिंग) , नेस्टिंग (कंप्यूटिंग)#प्रोग्रामिंग में, मिश्रण , और चयनकर्ता इनहेरिटेंस (कंप्यूटर विज्ञान)।[2]


इतिहास

सैस को शुरुआत में हैम्पटन कैटलिन द्वारा डिजाइन किया गया था और नेटली वेइज़ेनबाम द्वारा विकसित किया गया था।[4][5] इसके प्रारंभिक संस्करणों के बाद, वेइज़ेनबाम और क्रिस एपस्टीन ने सैस को SassScript के साथ विस्तारित करना जारी रखा है, जो सैस फ़ाइलों में उपयोग की जाने वाली एक स्क्रिप्टिंग लैंग्वेज है।

प्रमुख कार्यान्वयन

SassScript को कई लैंग्वेज ओं में लागू किया गया था, उल्लेखनीय कार्यान्वयन हैं:

  • आधिकारिक ओपन-सोर्स डार्ट (प्रोग्रामिंग लैंग्वेज ) कार्यान्वयन।[6]* एनपीएम (सॉफ्टवेयर) पर आधिकारिक सैस नोड.जेएस मॉड्यूल, जो शुद्ध जावास्क्रिप्ट के लिए संकलित डार्ट सैस है।[7]
  • आधिकारिक सैस-एम्बेडेड नोड मॉड्यूल जो मूल डार्ट निष्पादन योग्य के चारों ओर एक जावास्क्रिप्ट आवरण है।[8]
  • मूल खुला स्रोत सॉफ्टवेयर|ओपन-सोर्स रूबी (प्रोग्रामिंग लैंग्वेज ) कार्यान्वयन 2006 में बनाया गया,[6] अनुरक्षकों की कमी के कारण पदावनत हो गया और मार्च 2019 में जीवन के अंत तक पहुंच गया।[9][10]
  • libSass, आधिकारिक ओपन-सोर्स C++ कार्यान्वयन, अक्टूबर 2020 में बंद कर दिया गया।[11]
  • एनपीएम (सॉफ्टवेयर) पर अप्रचलित नोड-एसएएस नोड मॉड्यूल, अप्रचलित लिबसस पर आधारित।[12]
  • JSass, एक अनौपचारिक जावा (प्रोग्रामिंग लैंग्वेज ) कार्यान्वयन,[13] बहिष्कृत libसैस पर आधारित।[14]
  • pहमल p, PHP में एक अनौपचारिक Sass/SCSS कार्यान्वयन।[6]* वादिन में सैस का जावा कार्यान्वयन है।[15] *फायरबग (वेब ​​डेवलपमेंट)फ़ायरबग (वेब ​​विकास) के लिए फ़ायरफ़ॉक्स एक्सयूएल (लीगेसी) ऐड-ऑन (मोज़िला)।[16] तब से फ़ायरफ़ॉक्स में एकीकृत डेवलपर टूल के पक्ष में इसे हटा दिया गया है। फ़ायरफ़ॉक्स 57 द्वारा एक्सयूएल एक्सटेंशन के लिए समर्थन बंद करने के बाद से इसने काम करना बंद कर दिया।

विशेषताएँ

चर

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

SassScript चार डेटा प्रकारों का समर्थन करता है:[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 integration of Sass
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. ↑ 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.


बाहरी संबंध

  • No URL found. Please specify a URL here or add one to Wikidata.
Retrieved from ‘https://www.vigyanwiki.in/index.php?title=सैस_(स्टाइल_शीट_लैंग्वेज)&oldid=225354’