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

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

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

बाहरी संबंध

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