स्टाइलस (स्टाइल शीट भाषा): Difference between revisions
(Created page with "{{Short description|Stylesheet preprocessor language}} {{Cleanup-rewrite|date=February 2015}} {{ infobox programming language | name = Stylus | logo...") |
No edit summary |
||
| Line 1: | Line 1: | ||
{{Short description|Stylesheet preprocessor language}} | {{Short description|Stylesheet preprocessor language}} | ||
{{ 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 ]] भाषा है जिसे [[ व्यापक शैली पत्रक ]] (सीएसएस) में संकलित किया गया है। इसका डिज़ाइन | स्टाइलस एक गतिशील स्टाइलशीट [[ preprocessor |प्रीप्रोसेसर]] भाषा होती है जिसे [[ व्यापक शैली पत्रक |व्यापक शैली पत्रक]] (सीएसएस) में संकलित किया गया है। इसका डिज़ाइन सैस (स्टाइलशीट भाषा) और कम (स्टाइलशीट भाषा) से प्रभावित है। इसे चौथा सबसे अधिक इस्तेमाल किया जाने वाला सीएसएस प्रीप्रोसेसर सिंटैक्स माना जाता है।<ref name="doc">[http://css-tricks.com/poll-results-popularity-of-css-preprocessors/ Poll Results: Popularity of CSS Preprocessors]</ref> यह टीजे होलोवेचुक द्वारा बनाया गया था जोनोड.जे.एस के पूर्व प्रोग्रामर और [[ लूना (प्रोग्रामिंग भाषा) |लूना (प्रोग्रामिंग भाषा)]] भाषा के निर्माता थे। यह JADE (प्रोग्रामिंग लैंग्वेज) और नोड.जे.एस में लिखा गया है। | ||
== चयनकर्ता == | == चयनकर्ता == | ||
सीएसएस के विपरीत | सीएसएस के विपरीत जो घोषणा ब्लॉक को खोलने और बंद करने के लिए ब्रैकेट या कर्ली ब्रैकेट का उपयोग करते है इंडेंटेशन का उपयोग किया जाता है। इसके अतिरिक्त अर्धविराम (;) वैकल्पिक रूप से छोड़े गए हैं। इसलिए निम्नलिखित सीएसएस: | ||
<syntaxhighlight lang="css"> | <syntaxhighlight lang="css"> | ||
body { | body { | ||
| Line 30: | Line 29: | ||
color: white | color: white | ||
</syntaxhighlight> | </syntaxhighlight> | ||
इसके | इसके अतिरिक्त कोलन (:) और कॉमा (,) भी वैकल्पिक हैं; इसका मतलब है कि ऊपर के रूप में लिखा जा सकता है, | ||
<syntaxhighlight lang="css"> | <syntaxhighlight lang="css"> | ||
body | body | ||
| Line 38: | Line 37: | ||
== चर == | == चर == | ||
स्टाइलस वेरिएबल्स को परिभाषित करने की अनुमति देता है, | स्टाइलस वेरिएबल्स को परिभाषित करने की अनुमति देता है, चूंकि कम और सैस के विपरीत यह वेरिएबल्स को परिभाषित करने के लिए प्रतीक का उपयोग नहीं करता है। इसके अतिरिक्त संपत्ति और कीवर्ड को अलग करके चर असाइनमेंट स्वचालित रूप से किया जाता है। इस तरह चर [[पायथन (प्रोग्रामिंग भाषा)]] में चर के समान होता हैं। | ||
<syntaxhighlight lang="css"> | <syntaxhighlight lang="css"> | ||
message = 'Hello, World!' | message = 'Hello, World!' | ||
| Line 58: | Line 57: | ||
== मिश्रण और कार्य == | == मिश्रण और कार्य == | ||
मिक्सिन्स और | मिक्सिन्स और कार्य / फलन दोनों को एक ही तरीके से परिभाषित किया गया है, लेकिन उन्हें अलग-अलग विधि से लागू किया जाता है। | ||
उदाहरण के लिए | उदाहरण के लिए यदि आप विभिन्न कैस्केडिंग स्टाइल शीट्स या ब्राउज़र समर्थन का उपयोग किए बिना सीएसएस बॉर्डर त्रिज्या गुण को परिभाषित करना चाहते हैं तो आप इसे बना सकते हैं: | ||
<syntaxhighlight lang="css"> | <syntaxhighlight lang="css"> | ||
| Line 68: | Line 67: | ||
border-radius n | border-radius n | ||
</syntaxhighlight> | </syntaxhighlight> | ||
फिर, इसे मिक्सिन के रूप में | फिर, इसे मिक्सिन के रूप में सम्मिलित करने के लिए आप इसे इस प्रकार संदर्भित करेंगे: | ||
<syntaxhighlight lang="css"> | <syntaxhighlight lang="css"> | ||
| Line 86: | Line 85: | ||
== इंटरपोलेशन == | == इंटरपोलेशन == | ||
तर्कों और | तर्कों और पहचान कर्ताओं में चर सम्मिलित करने के लिए कोष्ठक वर्ण चर (ओं) को घेरते हैं। उदाहरण के लिए, <syntaxhighlight lang="css"> -webkit-{'border' + '-radius'} </syntaxhighlight> का मूल्यांकन करता है <syntaxhighlight lang="css">-webkit-border-radius</syntaxhighlight> | ||
| Line 96: | Line 95: | ||
* {{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/ | * [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] | ||
Revision as of 16:49, 23 June 2023
 | |
| द्वारा डिज़ाइन किया गया | TJ Holowaychuk |
|---|---|
| Developer | LearnBoost (March 29, 2011 - March 26, 2015) / Automattic (March 26, 2015 - Present)[1] |
| पहली प्रस्तुति | 2010 |
| Stable release | 0.54.8[2]
/ July 16, 2020 |
| टाइपिंग अनुशासन | dynamic |
| ओएस | Cross-platform |
| लाइसेंस | MIT License |
| फ़ाइल नाम एक्सटेंशनएस | .styl |
| वेबसाइट | Stylus (Github) |
| Influenced by | |
| CSS, Sass, LESS | |
स्टाइलस एक गतिशील स्टाइलशीट प्रीप्रोसेसर भाषा होती है जिसे व्यापक शैली पत्रक (सीएसएस) में संकलित किया गया है। इसका डिज़ाइन सैस (स्टाइलशीट भाषा) और कम (स्टाइलशीट भाषा) से प्रभावित है। इसे चौथा सबसे अधिक इस्तेमाल किया जाने वाला सीएसएस प्रीप्रोसेसर सिंटैक्स माना जाता है।[3] यह टीजे होलोवेचुक द्वारा बनाया गया था जोनोड.जे.एस के पूर्व प्रोग्रामर और लूना (प्रोग्रामिंग भाषा) भाषा के निर्माता थे। यह JADE (प्रोग्रामिंग लैंग्वेज) और नोड.जे.एस में लिखा गया है।
चयनकर्ता
सीएसएस के विपरीत जो घोषणा ब्लॉक को खोलने और बंद करने के लिए ब्रैकेट या कर्ली ब्रैकेट का उपयोग करते है इंडेंटेशन का उपयोग किया जाता है। इसके अतिरिक्त अर्धविराम (;) वैकल्पिक रूप से छोड़े गए हैं। इसलिए निम्नलिखित सीएसएस:
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;
}
इंटरपोलेशन
तर्कों और पहचान कर्ताओं में चर सम्मिलित करने के लिए कोष्ठक वर्ण चर (ओं) को घेरते हैं। उदाहरण के लिए,
-webkit-{'border' + '-radius'}
का मूल्यांकन करता है
-webkit-border-radius
संदर्भ
- ↑ "LICENSE". GitHub. 2015-03-26. Retrieved 2015-12-21.
- ↑ "Release 0.54.8". GitHub. 2020-07-16. Retrieved 2021-04-06.
- ↑ Poll Results: Popularity of CSS Preprocessors
बाहरी संबंध
- Official website
- Stylus source code repository (Git)
- Source code comparison with Sass/S सीएसएस and LESS
- Online Stylus Compiler
 | This software article is a stub. You can help Wikipedia by expanding it. |
