स्टाइलस (स्टाइल शीट भाषा)

Stylus

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

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

चयनकर्ता

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

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

बाहरी संबंध

• Official website
• Stylus source code repository (Git)
• Source code comparison with Sass/S सीएसएस and LESS
• Online Stylus Compiler