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

From Vigyanwiki
Revision as of 19:49, 16 June 2023 by alpha>Indicwiki (Created page with "{{short description|Dynamic stylesheet language}} {{infobox programming language | name = Less | logo = 200px | released = {{start date and age|{{wikid...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Less
LESS Logo.svg
द्वारा डिज़ाइन किया गयाAlexis Sellier
DeveloperAlexis Sellier, Dmitry Fadeyev
पहली प्रस्तुतिScript error: The module returned a nil value. It is supposed to return an export table.; Error: first parameter cannot be parsed as a date or time. (Script error: The module returned a nil value. It is supposed to return an export table.)
Stable release
Script error: The module returned a nil value. It is supposed to return an export table. / Script error: The module returned a nil value. It is supposed to return an export table.; Error: first parameter cannot be parsed as a date or time. (Script error: The module returned a nil value. It is supposed to return an export table.)
टाइपिंग अनुशासनDynamic
कार्यान्वयन भाषाJavaScript
ओएसCross-platform
लाइसेंसApache License 2.0
फ़ाइल नाम एक्सटेंशनएस.less
वेबसाइटlesscss.org
Influenced by
CSS, Sass
Influenced
Sass, Less Framework, Bootstrap (v3)

कम (लीनर स्टाइल शीट; कभी-कभी कम के रूप में शैलीबद्ध) एक गतिशील preprocessor स्टाइल शीट भाषा है जिसे व्यापक शैली पत्रक (सीएसएस) में संकलित किया जा सकता है और क्लाइंट साइड या सर्वर साइड पर चलाया जा सकता है।[1] एलेक्सिस सेलियर द्वारा डिज़ाइन किया गया, लेस Sass (स्टाइलशीट भाषा) से प्रभावित है और इसने Sass के नए SCSS सिंटैक्स को प्रभावित किया है, जिसने इसके CSS-जैसे ब्लॉक फ़ॉर्मेटिंग सिंटैक्स को अनुकूलित किया है।[2] लेस एक खुला स्रोत सॉफ्टवेयर प्रोजेक्ट है। इसका पहला संस्करण रूबी (प्रोग्रामिंग भाषा) में लिखा गया था; हालाँकि, बाद के संस्करणों में, रूबी का उपयोग बहिष्कृत कर दिया गया है और जावास्क्रिप्ट द्वारा प्रतिस्थापित किया गया है। लेस का इंडेंट सिंटैक्स एक मेटलंग्वेज # नेस्टेड है, क्योंकि वैध सीएसएस प्रोग्रामिंग भाषाओं के समान शब्दार्थ के साथ वैध लेस कोड है। लेस निम्नलिखित तंत्र प्रदान करता है: चर (प्रोग्रामिंग), नेस्टिंग (कंप्यूटिंग)#प्रोग्रामिंग में, मिश्रण, ऑपरेटर (प्रोग्रामिंग) और फ़ंक्शन (कंप्यूटर विज्ञान); लेस और अन्य सीएसएस प्रीकंपाइलर के बीच मुख्य अंतर यह है कि लेस ब्राउज़र द्वारा लेस.जेएस के माध्यम से रीयल-टाइम संकलन की अनुमति देता है।[1][3]


सुविधाएँ

चर

कम चर को परिभाषित करने की अनुमति देता है। लेस में वेरिएबल्स को एक चिह्न (@) के साथ परिभाषित किया गया है। वेरिएबल असाइनमेंट (कंप्यूटर प्रोग्रामिंग) एक कोलन (विराम चिह्न) (:) के साथ किया जाता है।

अनुवाद के दौरान, चर के मान आउटपुट CSS दस्तावेज़ में डाले जाते हैं।[1] 

@pale-green-color: #4D926F;

#header {
  color: @pale-green-color;
}
h2 {
  color: @pale-green-color;
}

उपरोक्त कोड कम में निम्नलिखित सीएसएस कोड को संकलित करेगा। 

#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}


मिश्रण

मिक्सिन्स एक वर्ग के सभी गुणों को अपनी संपत्ति में से एक के रूप में वर्ग नाम सहित किसी अन्य वर्ग में एम्बेड करने की अनुमति देता है, इस प्रकार एक प्रकार का कॉन्स्टेंट (प्रोग्रामिंग) या चर के रूप में व्यवहार करता है। वे कार्यों की तरह भी व्यवहार कर सकते हैं और तर्क ले सकते हैं। सीएसएस मिक्सिन्स का समर्थन नहीं करता है: किसी भी दोहराए गए कोड को प्रत्येक स्थान पर दोहराया जाना चाहिए। मिक्सिन्स अधिक कुशल और स्वच्छ कोड दोहराव के साथ-साथ कोड के आसान परिवर्तन की अनुमति देता है।[1] 

.rounded-corners (@radius: 5px 10px 8px 2px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px 25px 35px 0px);
}

उपरोक्त कोड कम में निम्नलिखित सीएसएस कोड को संकलित करेगा: 

#header {
  -webkit-border-radius: 5px 10px 8px 2px;
  -moz-border-radius: 5px 10px 8px 2px;
  border-radius: 5px 10px 8px 2px;
}
#footer {
  -webkit-border-radius: 10px 25px 35px 0px;
  -moz-border-radius: 10px 25px 35px 0px;
  border-radius: 10px 25px 35px 0px;
}

लेस में एक विशेष प्रकार का नियम सेट होता है जिसे पैरामीट्रिक मिक्सिन्स कहा जाता है जिसे समान वर्गों में मिलाया जा सकता है, लेकिन मापदंडों को स्वीकार करता है। 

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p {
    font-size: 16px;
    a {
      text-decoration: none;
      color: red;
      &:hover {
        border-width: 1px;
        color: #fff;
      }
    }
  }
}

उपरोक्त कोड कम में निम्नलिखित सीएसएस कोड को संकलित करेगा: 

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 16px;
}
#header p a {
  text-decoration: none;
  color: red;
}
#header p a:hover {
  border-width: 1px;
  color: #fff;
}


कार्य और संचालन

कम संचालन और कार्यों की अनुमति देता है। संचालन संपत्ति के मूल्यों और रंगों के जोड़, घटाव, विभाजन और गुणन की अनुमति देता है, जिसका उपयोग गुणों के बीच जटिल संबंध बनाने के लिए किया जा सकता है। फ़ंक्शंस जावास्क्रिप्ट कोड के साथ एक-से-एक मैप करते हैं, जिससे मूल्यों में हेरफेर की अनुमति मिलती है। 

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 3;
}
#footer {
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

उपरोक्त कोड कम में निम्नलिखित सीएसएस कोड को संकलित करेगा: 

#header {
  color: #333;
  border-left: 1px;
  border-right: 3px;
}
#footer {
  color: #114411;
  border-color: #7d2717;
}


तुलना

सास

Sass (स्टाइलशीट लैंग्वेज) और लेस दोनों CSS प्रीप्रोसेसर हैं, जो स्थिर नियमों के बजाय एक प्रोग्रामिंग निर्माण में स्वच्छ CSS लिखने की अनुमति देते हैं।[4] कम सास से प्रेरित है।[5][2]Sass को CSS को सरल और विस्तारित दोनों करने के लिए डिज़ाइन किया गया था, इसलिए घुंघराले ब्रेसिज़ जैसी चीज़ों को सिंटैक्स से हटा दिया गया था। लेस को यथासंभव सीएसएस के करीब होने के लिए डिजाइन किया गया था, और इसके परिणामस्वरूप मौजूदा सीएसएस को वैध लेस कोड के रूप में इस्तेमाल किया जा सकता है।[6] सैस के नए संस्करणों ने एससीएसएस (सैसी सीएसएस) नामक एक सीएसएस-जैसी सिंटैक्स भी पेश किया।

साइटों पर प्रयोग करें

साइटों पर कई तरीकों से कम लागू किया जा सकता है। कोड को ऑन-द-फ्लाई में बदलने के लिए एक विकल्प कम.js जावास्क्रिप्ट फ़ाइल को शामिल करना है। ब्राउजर तब आउटपुट सीएसएस प्रस्तुत करता है। एक अन्य विकल्प कम कोड को शुद्ध CSS में प्रस्तुत करना और CSS को साइट पर अपलोड करना है। इस विकल्प के साथ कोई .less फ़ाइलें अपलोड नहीं की जाती हैं और साइट को less.js JavaScript कन्वर्टर की आवश्यकता नहीं होती है।

कम सॉफ्टवेयर

Name Description Software License Platform Functionality
WinLess - Windows GUI for less.js GUI Less Compiler Apache 2.0[7] Windows Compiler
Crunch Less editor and compiler (requires Adobe AIR) GPL[8] Windows, Mac OS X Compiler
Editor
less.js-windows Simple command-line utility for Windows that will compile *.less files to CSS using less.js. MIT License[9] Windows Compiler
less.app Less Compiler Proprietary Mac OS X Compiler
CodeKit Less Compiler Proprietary Mac OS X Compiler
LessEngine Less Compiler Free OpenCart Plugin Compiler
SimpLESS Less Compiler free but no explicit license[10] Windows
Mac OS X
Linux		 Compiler
Chirpy Less Compiler Ms-PL[11] Visual Studio Plugin Compiler
Mindscape Web Workbench Syntax highlighting and IntelliSense for Less and Sass Proprietary Visual Studio Plugin Compiler
Syntax Highlighting
Eclipse Plugin for Less Eclipse Plugin EPL 1.0[12] Eclipse Plugin Syntax highlighting
Content assist
Compiler
mod_less Apache2 module to compile Less on the fly Open Source Linux Compiler
grunt-contrib-less Node.js Grunt task to convert Less to CSS MIT[13] Node.js Compiler
Web Essentials Visual Studio extension with support for Less and Sass Apache 2.0 [14] Windows Syntax highlighting, Content assist, Compiler
clessc Pure C++ compiler MIT[15] at least Windows, Linux, MacOS Compiler
Less WebCompiler Web-based compiler MIT[16] at least Windows, Linux, MacOS Compiler, Syntax highlighting, Minifier


यह भी देखें

संदर्भ

  1. ↑ 1.0 1.1 1.2 1.3 The Core Less Team. "Getting started | Less.js". Less.js. Retrieved 2021-03-19.
  2. ↑ 2.0 2.1 Weizenbaum, Nathan (2009-06-17). "Sass and Less : Nex3". Archived from the original on 2009-06-21. Retrieved 2021-03-19.
  3. ↑ Meng, Jiew (2010-12-14). Mortensen, Peter (ed.). "css - Is there a SASS.js? Something like LESS.js?". Stack Overflow. Retrieved 2021-03-19.
  4. ↑ Atwood, Jeff (2010-04-30). "सीएसएस में क्या गलत है". Coding Horror. Retrieved 2022-12-03.
  5. ↑ The Core Less Team. "About | Less.js". Less.js. Retrieved 2021-03-19.
  6. ↑ Eppstein, Chris (2010-11-10). "sass_and_less_compared.markdown". GitHub Gist. Retrieved 2021-03-19.
  7. ↑ Lagendijk, Mark (2013-01-29). "License Information · Issue #55 · marklagendijk/WinLess". GitHub. Retrieved 2021-03-19.
  8. ↑ Dean, Matthew (2011-12-02). "Crunch/LICENSE.txt at master · matthew-dean/Crunch". GitHub. Retrieved 2021-03-19.
  9. ↑ Smart, Duncan (2013-07-25). "less.js-windows/LICENSE at master · duncansmart/less.js-windows". GitHub. Retrieved 2021-03-19.
  10. ↑ Engel, Christian (2012-07-29). "SimpLESS/LICENSE.txt at master · Paratron/SimpLESS". GitHub. Retrieved 2021-03-19.
  11. ↑ Evan Nagle. "Chirpy - VS Add In For Handling Js, Css, DotLess, and T4 Files - CodePlex Archive". CodePlex. Archived from the original on 2021-02-20. Retrieved 2021-03-19.
  12. ↑ Vincent Simonet. "Eclipse plugin for LESS". normalesup.org. Retrieved 2021-03-19.
  13. ↑ Kellen, Tyler (2012-09-04). "grunt-contrib-less/LICENSE-MIT at master · gruntjs/grunt-contrib-less". GitHub. Retrieved 2021-03-19.
  14. ↑ Kristensen, Mads (2014-06-18). "WebEssentials2013/LICENSE.txt at master · madskristensen/WebEssentials2013". GitHub. Retrieved 2021-03-19.
  15. ↑ Bram van der Kroef (2017-07-11). "clessc/LICENSE at master · BramvdKroef/clessc". GitHub. Retrieved 2021-03-19.
  16. ↑ SamBrishes (2018-12-15). "snout.less/LICENSE.md at master · pytesNET/snout.less". GitHub. Retrieved 2021-03-19.


बाहरी संबंध

Retrieved from ‘https://www.vigyanwiki.in/index.php?title=कम_(स्टाइल_शीट_भाषा)&oldid=203290’