स्टाइलस (स्टाइल शीट भाषा)
द्वारा डिज़ाइन किया गया | TJ Holowaychuk |
---|---|
Developer | LearnBoost (March 29, 2011[1] | - March 26, 2015 ) / Automattic (March 26, 2015 - Present)
पहली प्रस्तुति | 2010 |
Stable release | 0.54.8[2]
/ July 16, 2020 |
टाइपिंग अनुशासन | dynamic |
ओएस | Cross-platform |
लाइसेंस | MIT License |
फ़ाइल नाम एक्सटेंशनएस | .styl |
वेबसाइट | Stylus (Github) |
Influenced by | |
CSS, Sass, LESS |
स्टाइलस एक गतिशील स्टाइलशीट preprocessor भाषा है जिसे व्यापक शैली पत्रक (सीएसएस) में संकलित किया गया है। इसका डिज़ाइन Sass (stylesheet language) और LESS (stylesheet language) से प्रभावित है। इसे चौथा सबसे अधिक इस्तेमाल किया जाने वाला CSS प्रीप्रोसेसर सिंटैक्स माना जाता है।[3] यह टीजे होलोवेचुक द्वारा बनाया गया था, जो Node.js के पूर्व प्रोग्रामर और लूना (प्रोग्रामिंग भाषा) भाषा के निर्माता थे। यह JADE (प्रोग्रामिंग लैंग्वेज) और Node.js में लिखा गया है।
चयनकर्ता
सीएसएस के विपरीत, जो घोषणा ब्लॉक को खोलने और बंद करने के लिए ब्रैकेट # कर्ली ब्रैकेट का उपयोग करता है, इंडेंटेशन का उपयोग किया जाता है। इसके अतिरिक्त, अर्धविराम (;) वैकल्पिक रूप से छोड़े गए हैं। इसलिए, निम्नलिखित सीएसएस:
body {
color: white;
}
छोटा किया जा सकता है:
body
color: white
इसके अलावा, कोलन (:) और कॉमा (,) भी वैकल्पिक हैं; इसका मतलब है कि ऊपर के रूप में लिखा जा सकता है,
body
color white
चर
स्टाइलस वेरिएबल्स को परिभाषित करने की अनुमति देता है, हालांकि LESS और Sass के विपरीत, यह वेरिएबल्स को परिभाषित करने के लिए प्रतीक का उपयोग नहीं करता है। इसके अतिरिक्त, संपत्ति और कीवर्ड को अलग करके चर असाइनमेंट स्वचालित रूप से किया जाता है। इस तरह, चर पायथन (प्रोग्रामिंग भाषा) में चर के समान हैं।
message = 'Hello, World!'
div::before
content message
color #ffffff
स्टाइलस कंपाइलर उपरोक्त दस्तावेज़ का अनुवाद इसमें करेगा:
div::before {
content: 'Hello, World!';
color: #ffffff;
}
मिश्रण और कार्य
मिक्सिन्स और फ़ंक्शंस दोनों को एक ही तरीके से परिभाषित किया गया है, लेकिन उन्हें अलग-अलग तरीकों से लागू किया जाता है।
उदाहरण के लिए, यदि आप विभिन्न कैस्केडिंग स्टाइल शीट्स#ब्राउज़र समर्थन का उपयोग किए बिना CSS बॉर्डर त्रिज्या गुण को परिभाषित करना चाहते हैं, तो आप इसे बना सकते हैं:
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