स्टाइलस (स्टाइल शीट भाषा): Difference between revisions
No edit summary |
No edit summary |
||
| Line 16: | Line 16: | ||
| file_ext = <code>.styl</code> | | file_ext = <code>.styl</code> | ||
}} | }} | ||
== चयनकर्ता == | |||
स्टाइलस एक गतिशील स्टाइलशीट प्रीप्रोसेसर भाषा है जिसे कैस्केडिंग स्टाइल शीट्स (सीएसएस) में संकलित किया गया है। इसका डिज़ाइन सैस और लेस से प्रभावित है। इसे चौथा सबसे अधिक उपयोग किया जाने वाला सीएसएस प्रीप्रोसेसर सिंटैक्स माना जाता है। इसे नोड.जेएस के पूर्व प्रोग्रामर और लूना भाषा के निर्माता टीजे होलोवेचुक द्वारा बनाया गया था। यह जेड और नोड.जेएस में लिखा गया है।<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 29: | Line 35: | ||
color: white | color: white | ||
</syntaxhighlight> | </syntaxhighlight> | ||
इसके अतिरिक्त कोलन (:) और कॉमा (,) भी वैकल्पिक हैं; इसका | इसके अतिरिक्त कोलन (:) और कॉमा (,) भी वैकल्पिक हैं; इसका अर्थ है कि ऊपर के रूप में लिखा जा सकता है, | ||
<syntaxhighlight lang="css"> | <syntaxhighlight lang="css"> | ||
body | body | ||
| Line 37: | Line 43: | ||
== चर == | == चर == | ||
स्टाइलस वेरिएबल्स को परिभाषित करने की अनुमति देता है, चूंकि | स्टाइलस वेरिएबल्स को परिभाषित करने की अनुमति देता है, चूंकि लेस और सैस के विपरीत यह वेरिएबल्स को परिभाषित करने के लिए प्रतीक का उपयोग नहीं करता है। इसके अतिरिक्त संपत्ति और कीवर्ड को अलग करके चर असाइनमेंट स्वचालित रूप से किया जाता है। इस तरह चर [[पायथन (प्रोग्रामिंग भाषा)]] में चर के समान होता हैं। | ||
<syntaxhighlight lang="css"> | <syntaxhighlight lang="css"> | ||
message = 'Hello, World!' | message = 'Hello, World!' | ||
| Line 57: | Line 63: | ||
== मिश्रण और कार्य == | == मिश्रण और कार्य == | ||
मिक्सिन्स और कार्य | मिक्सिन्स और कार्य दोनों को एक ही विधि से परिभाषित किया गया है, किन्तु उन्हें अलग-अलग विधि से प्रयुक्त किया जाता है। | ||
उदाहरण के लिए यदि आप विभिन्न कैस्केडिंग स्टाइल शीट्स या ब्राउज़र समर्थन का उपयोग किए बिना सीएसएस बॉर्डर त्रिज्या गुण को परिभाषित करना चाहते हैं तो आप इसे बना सकते हैं: | उदाहरण के लिए यदि आप विभिन्न कैस्केडिंग स्टाइल शीट्स या ब्राउज़र समर्थन का उपयोग किए बिना सीएसएस बॉर्डर त्रिज्या गुण को परिभाषित करना चाहते हैं तो आप इसे बना सकते हैं: | ||
| Line 85: | Line 91: | ||
== इंटरपोलेशन == | == इंटरपोलेशन == | ||
तर्कों और पहचान कर्ताओं में चर सम्मिलित करने के लिए कोष्ठक वर्ण चर ( | तर्कों और पहचान कर्ताओं में चर सम्मिलित करने के लिए कोष्ठक वर्ण चर (s) को घेरते हैं। उदाहरण के लिए, <syntaxhighlight lang="css"> -webkit-{'border' + '-radius'} </syntaxhighlight> का मूल्यांकन करता है <syntaxhighlight lang="css">-webkit-border-radius</syntaxhighlight> | ||
Revision as of 21:08, 24 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]
और लेस से प्रभावित है। इसे चौथा सबसे अधिक उपयोग किया जाने वाला सीएसएस प्रीप्रोसेसर सिंटैक्स माना जाता है। इसे नो
चयनकर्ता
सीएसएस के विपरीत जो घोषणा ब्लॉक को खोलने और बंद करने के लिए ब्रैकेट या कर्ली ब्रैकेट का उपयोग करते है इंडेंटेशन का उपयोग किया जाता है। इसके अतिरिक्त अर्धविराम (;) वैकल्पिक रूप से छोड़े गए हैं। इसलिए निम्नलिखित सीएसएस:
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
संदर्भ
- ↑ "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. |
