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

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

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

बाहरी संबंध

• Official website
• Stylus source code repository (Git)
• Source code comparison with Sass/SCSS and LESS
• Online Stylus Compiler