स्टाइलस (स्टाइल शीट भाषा): Difference between revisions

From Vigyanwiki
(Created page with "{{Short description|Stylesheet preprocessor language}} {{Cleanup-rewrite|date=February 2015}} {{ infobox programming language | name = Stylus | logo...")
 
No edit summary
 
(8 intermediate revisions by 3 users not shown)
Line 1: Line 1:
{{Short description|Stylesheet preprocessor language}}
{{Short description|Stylesheet preprocessor language}}
{{Cleanup-rewrite|date=February 2015}}
{{ infobox programming language
{{ infobox programming language
| name                  = Stylus
| name                  = Stylus
Line 17: Line 16:
| file_ext              = <code>.styl</code>
| file_ext              = <code>.styl</code>
}}
}}
स्टाइलस एक गतिशील स्टाइलशीट [[ preprocessor ]] भाषा है जिसे [[ व्यापक शैली पत्रक ]] (सीएसएस) में संकलित किया गया है। इसका डिज़ाइन [[Sass (stylesheet language)]] और [[LESS (stylesheet language)]] से प्रभावित है। इसे चौथा सबसे अधिक इस्तेमाल किया जाने वाला CSS प्रीप्रोसेसर सिंटैक्स माना जाता है।<ref name="doc">[http://css-tricks.com/poll-results-popularity-of-css-preprocessors/ Poll Results: Popularity of CSS Preprocessors]</ref> यह टीजे होलोवेचुक द्वारा बनाया गया था, जो Node.js के पूर्व प्रोग्रामर और [[ लूना (प्रोग्रामिंग भाषा) ]] भाषा के निर्माता थे। यह JADE (प्रोग्रामिंग लैंग्वेज) और Node.js में लिखा गया है।


== चयनकर्ता ==
 
सीएसएस के विपरीत, जो घोषणा ब्लॉक को खोलने और बंद करने के लिए ब्रैकेट # कर्ली ब्रैकेट का उपयोग करता है, इंडेंटेशन का उपयोग किया जाता है। इसके अतिरिक्त, अर्धविराम (;) वैकल्पिक रूप से छोड़े गए हैं। इसलिए, निम्नलिखित सीएसएस:
 
स्टाइलस एक गतिशील स्टाइलशीट प्रीप्रोसेसर भाषा है जिसे कैस्केडिंग स्टाइल शीट्स (सीएसएस) में संकलित किया गया है। इसका डिज़ाइन सैस और लेस से प्रभावित है। इसे चौथा सबसे अधिक उपयोग किया जाने वाला सीएसएस प्रीप्रोसेसर सिंटैक्स माना जाता है। इसे नोड.जेएस के पूर्व प्रोग्रामर और लूना भाषा के निर्माता टीजे होलोवेचुक द्वारा बनाया गया था। यह जेड और नोड.जेएस में लिखा गया है।<ref name="doc">[http://css-tricks.com/poll-results-popularity-of-css-preprocessors/ Poll Results: Popularity of CSS Preprocessors]</ref>                                                                           
== चयनकर्ता                                                                                 ==
सीएसएस के विपरीत जो घोषणा ब्लॉक को खोलने और बंद करने के लिए ब्रैकेट या कर्ली ब्रैकेट का उपयोग करते है इंडेंटेशन का उपयोग किया जाता है। इसके अतिरिक्त अर्धविराम (;) वैकल्पिक रूप से छोड़े गए हैं। इसलिए निम्नलिखित सीएसएस:
 
<syntaxhighlight lang="css">
<syntaxhighlight lang="css">
body {
body {
Line 30: Line 32:
     color: white
     color: white
</syntaxhighlight>
</syntaxhighlight>
इसके अलावा, कोलन (:) और कॉमा (,) भी वैकल्पिक हैं; इसका मतलब है कि ऊपर के रूप में लिखा जा सकता है,
इसके अतिरिक्त कोलन (:) और कॉमा (,) भी वैकल्पिक हैं; इसका अर्थ है कि ऊपर के रूप में लिखा जा सकता है,
<syntaxhighlight lang="css">
<syntaxhighlight lang="css">
body  
body  
Line 38: Line 40:


== चर ==
== चर ==
स्टाइलस वेरिएबल्स को परिभाषित करने की अनुमति देता है, हालांकि LESS और Sass के विपरीत, यह वेरिएबल्स को परिभाषित करने के लिए प्रतीक का उपयोग नहीं करता है। इसके अतिरिक्त, संपत्ति और कीवर्ड को अलग करके चर असाइनमेंट स्वचालित रूप से किया जाता है। इस तरह, चर [[पायथन (प्रोग्रामिंग भाषा)]] में चर के समान हैं।
स्टाइलस वेरिएबल्स को परिभाषित करने की अनुमति देता है, चूंकि लेस और सैस के विपरीत यह वेरिएबल्स को परिभाषित करने के लिए प्रतीक का उपयोग नहीं करता है। इसके अतिरिक्त संपत्ति और कीवर्ड को अलग करके चर असाइनमेंट स्वचालित रूप से किया जाता है। इस तरह चर [[पायथन (प्रोग्रामिंग भाषा)]] में चर के समान होता हैं।
<syntaxhighlight lang="css">
<syntaxhighlight lang="css">
message = 'Hello, World!'
message = 'Hello, World!'
Line 58: Line 60:


== मिश्रण और कार्य ==
== मिश्रण और कार्य ==
मिक्सिन्स और फ़ंक्शंस दोनों को एक ही तरीके से परिभाषित किया गया है, लेकिन उन्हें अलग-अलग तरीकों से लागू किया जाता है।
मिक्सिन्स और कार्य दोनों को एक ही विधि से परिभाषित किया गया है, किन्तु उन्हें अलग-अलग विधि से प्रयुक्त किया जाता है।


उदाहरण के लिए, यदि आप विभिन्न कैस्केडिंग स्टाइल शीट्स#ब्राउज़र समर्थन का उपयोग किए बिना CSS बॉर्डर त्रिज्या गुण को परिभाषित करना चाहते हैं, तो आप इसे बना सकते हैं:
उदाहरण के लिए यदि आप विभिन्न कैस्केडिंग स्टाइल शीट्स या ब्राउज़र समर्थन का उपयोग किए बिना सीएसएस बॉर्डर त्रिज्या गुण को परिभाषित करना चाहते हैं तो आप इसे बना सकते हैं:


<syntaxhighlight lang="css">
<syntaxhighlight lang="css">
Line 68: Line 70:
   border-radius n
   border-radius n
</syntaxhighlight>
</syntaxhighlight>
फिर, इसे मिक्सिन के रूप में शामिल करने के लिए, आप इसे इस प्रकार संदर्भित करेंगे:
फिर, इसे मिक्सिन के रूप में सम्मिलित करने के लिए आप इसे इस प्रकार संदर्भित करेंगे:


<syntaxhighlight lang="css">
<syntaxhighlight lang="css">
Line 86: Line 88:


== इंटरपोलेशन ==
== इंटरपोलेशन ==
तर्कों और पहचानकर्ताओं में चर शामिल करने के लिए, कोष्ठक वर्ण चर (ओं) को घेरते हैं। उदाहरण के लिए, <syntaxhighlight lang="css"> -webkit-{'border' + '-radius'} </syntaxhighlight> का मूल्यांकन करता है <syntaxhighlight lang="css">-webkit-border-radius</syntaxhighlight>
तर्कों और पहचान कर्ताओं में चर सम्मिलित करने के लिए कोष्ठक वर्ण चर (s) को घेरते हैं। उदाहरण के लिए, <syntaxhighlight lang="css"> -webkit-{'border' + '-radius'} </syntaxhighlight> का मूल्यांकन करता है <syntaxhighlight lang="css">-webkit-border-radius</syntaxhighlight>




Line 96: Line 98:
* {{Official website|http://stylus-lang.com/}}
* {{Official website|http://stylus-lang.com/}}
* [https://github.com/stylus/stylus Stylus source code repository (Git)]
* [https://github.com/stylus/stylus Stylus source code repository (Git)]
* [https://github.com/stylus/stylus/blob/master/docs/compare.md Source code comparison with Sass/SCSS and LESS]
* [https://github.com/stylus/stylus/blob/master/docs/compare.md Source code comparison with Sass/S सीएसएस and LESS]
* [https://codebeautify.org/stylus-compiler Online Stylus Compiler]
* [https://codebeautify.org/stylus-compiler Online Stylus Compiler]


{{Stylesheet languages}}
{{Stylesheet languages}}


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


{{software-stub}}
{{software-stub}}


 
[[Category:2010 में कंप्यूटर से संबंधित परिचय|Stylus (Stylesheet Language)]]
 
[[Category:All stub articles|Stylus (Stylesheet Language)]]
[[Category: Machine Translated Page]]
[[Category:Collapse templates|Stylus (Stylesheet Language)]]
[[Category:Created On 16/06/2023]]
[[Category:Created On 16/06/2023|Stylus (Stylesheet Language)]]
[[Category:Lua-based templates|Stylus (Stylesheet Language)]]
[[Category:Machine Translated Page|Stylus (Stylesheet Language)]]
[[Category:Navigational boxes| ]]
[[Category:Navigational boxes without horizontal lists|Stylus (Stylesheet Language)]]
[[Category:Official website not in Wikidata|Stylus (Stylesheet Language)]]
[[Category:Pages with script errors|Stylus (Stylesheet Language)]]
[[Category:Sidebars with styles needing conversion|Stylus (Stylesheet Language)]]
[[Category:Software stubs|Stylus (Stylesheet Language)]]
[[Category:Template documentation pages|Documentation/doc]]
[[Category:Templates Vigyan Ready|Stylus (Stylesheet Language)]]
[[Category:Templates generating microformats|Stylus (Stylesheet Language)]]
[[Category:Templates that add a tracking category|Stylus (Stylesheet Language)]]
[[Category:Templates that are not mobile friendly|Stylus (Stylesheet Language)]]
[[Category:Templates that generate short descriptions|Stylus (Stylesheet Language)]]
[[Category:Templates using TemplateData|Stylus (Stylesheet Language)]]
[[Category:Wikipedia metatemplates|Stylus (Stylesheet Language)]]
[[Category:एमआईटी लाइसेंस का उपयोग करने वाला सॉफ्टवेयर|Stylus (Stylesheet Language)]]
[[Category:मुफ्त कंप्यूटर पुस्तकालय|Stylus (Stylesheet Language)]]
[[Category:स्टाइलशीट भाषाएँ|Stylus (Stylesheet Language)]]

Latest revision as of 11:53, 2 July 2023

Stylus
Stylus-logo.svg
द्वारा डिज़ाइन किया गयाTJ Holowaychuk
DeveloperLearnBoost (March 29, 2011 (2011-03-29) - March 26, 2015 (2015-03-26)) / Automattic (March 26, 2015 (2015-03-26) - Present)[1]
पहली प्रस्तुति2010; 14 years ago (2010)
Stable release
0.54.8[2] / July 16, 2020; 4 years ago (2020-07-16)
टाइपिंग अनुशासनdynamic
ओएसCross-platform
लाइसेंसMIT License
फ़ाइल नाम एक्सटेंशनएस.styl
वेबसाइटStylus (Github)
Influenced by
CSS, Sass, LESS


स्टाइलस एक गतिशील स्टाइलशीट प्रीप्रोसेसर भाषा है जिसे कैस्केडिंग स्टाइल शीट्स (सीएसएस) में संकलित किया गया है। इसका डिज़ाइन सैस और लेस से प्रभावित है। इसे चौथा सबसे अधिक उपयोग किया जाने वाला सीएसएस प्रीप्रोसेसर सिंटैक्स माना जाता है। इसे नोड.जेएस के पूर्व प्रोग्रामर और लूना भाषा के निर्माता टीजे होलोवेचुक द्वारा बनाया गया था। यह जेड और नोड.जेएस में लिखा गया है।[3]

चयनकर्ता

सीएसएस के विपरीत जो घोषणा ब्लॉक को खोलने और बंद करने के लिए ब्रैकेट या कर्ली ब्रैकेट का उपयोग करते है इंडेंटेशन का उपयोग किया जाता है। इसके अतिरिक्त अर्धविराम (;) वैकल्पिक रूप से छोड़े गए हैं। इसलिए निम्नलिखित सीएसएस: 

body {
    color: white;
}

छोटा किया जा सकता है: 

body 
    color: white

इसके अतिरिक्त कोलन (:) और कॉमा (,) भी वैकल्पिक हैं; इसका अर्थ है कि ऊपर के रूप में लिखा जा सकता है, 

body 
    color white


चर

स्टाइलस वेरिएबल्स को परिभाषित करने की अनुमति देता है, चूंकि लेस और सैस के विपरीत यह वेरिएबल्स को परिभाषित करने के लिए प्रतीक का उपयोग नहीं करता है। इसके अतिरिक्त संपत्ति और कीवर्ड को अलग करके चर असाइनमेंट स्वचालित रूप से किया जाता है। इस तरह चर पायथन (प्रोग्रामिंग भाषा) में चर के समान होता हैं। 

message = 'Hello, World!'

div::before
  content message
  color #ffffff

स्टाइलस कंपाइलर उपरोक्त दस्तावेज़ का अनुवाद इसमें करेगा: 

div::before {
  content: 'Hello, World!';
  color: #ffffff;
}


मिश्रण और कार्य

मिक्सिन्स और कार्य दोनों को एक ही विधि से परिभाषित किया गया है, किन्तु उन्हें अलग-अलग विधि से प्रयुक्त किया जाता है।

उदाहरण के लिए यदि आप विभिन्न कैस्केडिंग स्टाइल शीट्स या ब्राउज़र समर्थन का उपयोग किए बिना सीएसएस बॉर्डर त्रिज्या गुण को परिभाषित करना चाहते हैं तो आप इसे बना सकते हैं: 

border-radius(n)
  -webkit-border-radius n
  -moz-border-radius n
  border-radius n

फिर, इसे मिक्सिन के रूप में सम्मिलित करने के लिए आप इसे इस प्रकार संदर्भित करेंगे: 

div.rectangle 
  border-radius(10px)

यह संकलित होगा: 

div.rectangle {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}


इंटरपोलेशन

तर्कों और पहचान कर्ताओं में चर सम्मिलित करने के लिए कोष्ठक वर्ण चर (s) को घेरते हैं। उदाहरण के लिए, 

 -webkit-{'border' + '-radius'}

का मूल्यांकन करता है 

-webkit-border-radius


संदर्भ

  1. ↑ "LICENSE". GitHub. 2015-03-26. Retrieved 2015-12-21.
  2. ↑ "Release 0.54.8". GitHub. 2020-07-16. Retrieved 2021-04-06.
  3. ↑ Poll Results: Popularity of CSS Preprocessors


बाहरी संबंध


Stub icon

This software article is a stub. You can help Wikipedia by expanding it.

Retrieved from ‘https://www.vigyanwiki.in/index.php?title=स्टाइलस_(स्टाइल_शीट_भाषा)&oldid=203540’