कम - त्वरित गाइड

LESS एक सीएसएस प्री-प्रोसेसर है जो वेबसाइट के लिए अनुकूलन योग्य, प्रबंधनीय और पुन: प्रयोज्य शैली शीट को सक्षम बनाता है। LESS एक गतिशील शैली पत्रक भाषा है जो CSS की क्षमता का विस्तार करती है। LESS भी क्रॉस ब्राउज़र फ्रेंडली है।

CSS Preprocessor एक स्क्रिप्टिंग भाषा है जो CSS को बढ़ाती है और नियमित CSS सिंटैक्स में संकलित हो जाती है, ताकि इसे आपके वेब ब्राउजर द्वारा पढ़ा जा सके। ऐसा लगता है कि कार्यक्षमताओं प्रदान करता है चर , कार्यों , mixins और संचालन है कि आप गतिशील सीएसएस का निर्माण करने की अनुमति देते हैं।

क्यों कम है?

आइये अब समझते हैं कि हम LESS का उपयोग क्यों करते हैं।

  • LESS क्लीनर, क्रॉस-ब्राउज़र फ्रेंडली CSS को तेजी से और आसानी से बनाने का समर्थन करता है।

  • LESS को जावास्क्रिप्ट में डिज़ाइन किया गया है और इसे लाइव में उपयोग करने के लिए भी बनाया गया है , जो अन्य CSS प्री-प्रोसेसर की तुलना में तेजी से संकलित होता है।

  • LESS आपके कोड को मॉड्यूलर तरीके से रखता है जो वास्तव में पठनीय और आसानी से परिवर्तनशील बनाकर महत्वपूर्ण है।

  • LESS वैरिएबल के उपयोग से तेजी से रखरखाव किया जा सकता है ।

इतिहास

LESS द्वारा डिजाइन किया गया था Alexis Sellier2009 में। LESS एक ओपन-सोर्स है। LESS का पहला संस्करण रूबी में लिखा गया था; बाद के संस्करणों में, रूबी का उपयोग जावास्क्रिप्ट द्वारा प्रतिस्थापित किया गया था।

विशेषताएं

  • क्लीनर और अधिक पठनीय कोड एक संगठित तरीके से लिखा जा सकता है।

  • हम शैलियों को परिभाषित कर सकते हैं और इसे पूरे कोड में पुन: उपयोग किया जा सकता है।

  • LESS जावास्क्रिप्ट पर आधारित है और CSS का एक सुपर सेट है।

  • LESS एक चुस्त उपकरण है जो कोड अतिरेक की समस्या को हल करता है।

लाभ

  • LESS आसानी से सीएसएस उत्पन्न करता है जो ब्राउज़रों में काम करता है।

  • कम आप का उपयोग करके बेहतर और सुव्यवस्थित कोड लिखने के लिए सक्षम बनाता है नेस्टिंग ।

  • चर के उपयोग से रखरखाव तेजी से प्राप्त किया जा सकता है ।

  • LESS आपको अपने नियम सेटों में संदर्भित करके पूरी कक्षाओं को आसानी से पुन: उपयोग करने में सक्षम बनाता है।

  • लेस संचालन का उपयोग प्रदान करता है जो कोडिंग को तेज करता है और समय बचाता है।

नुकसान

  • यदि आप सीएसएस प्रीप्रोसेसिंग के लिए नए हैं तो सीखने में समय लगता है।

  • मॉड्यूल के बीच तंग युग्मन के कारण, निर्भर मॉड्यूल का पुन: उपयोग और / या परीक्षण करने के लिए अधिक प्रयास किए जाने चाहिए।

  • LASS में SASS जैसे पुराने प्रीप्रोसेसर की तुलना में कम फ्रेमवर्क है, जिसमें कंपास , ग्रेविटी और सूसी शामिल हैं ।

इस अध्याय में, हम चरण-दर-चरण तरीके से समझेंगे, LESS कैसे स्थापित करें।

लेस के लिए सिस्टम आवश्यकताएँ

  • Operating System - क्रॉस-प्लेटफॉर्म

  • Browser Support - IE (इंटरनेट एक्सप्लोरर 8+), फ़ायरफ़ॉक्स, गूगल क्रोम, सफारी।

लेस की स्थापना

आइए अब LESS की स्थापना को समझते हैं।

Step 1 - हम चाहते हैं NodeJsकम उदाहरणों को चलाने के लिए। NodeJs डाउनलोड करने के लिए, लिंक खोलेंhttps://nodejs.org/en/, आप नीचे दिखाए गए अनुसार एक स्क्रीन देखेंगे -

ज़िप फ़ाइल के नवीनतम सुविधाएँ संस्करण को लोड करें।

Step 2- अपने सिस्टम पर Node.js स्थापित करने के लिए सेटअप चलाएँ ।

Step 3- अगला, NPM (नोड पैकेज मैनेजर) के माध्यम से सर्वर पर LESS इंस्टॉल करें। कमांड प्रॉम्प्ट में निम्न कमांड चलाएँ।

npm install -g less

Step 4 - LESS के सफल इंस्टॉलेशन के बाद, आप कमांड प्रॉम्प्ट पर निम्नलिखित लाइनें देखेंगे -

`-- [email protected]
   +-- [email protected]
   | `-- [email protected]
   +-- [email protected]
   +-- [email protected]
   +-- [email protected]
   +-- [email protected]
   | `-- [email protected]
   +-- [email protected]
   | `-- [email protected]
   +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | |   +-- [email protected]
   | |   `-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   `-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | +-- [email protected]
   | | +-- [email protected]
   | | | +-- [email protected]
   | | | | `-- [email protected]
   | | | +-- [email protected]
   | | | +-- [email protected]
   | | | | `-- [email protected]
   | | | +-- [email protected]
   | | | `-- [email protected]
   | | +-- [email protected]
   | | | `-- [email protected]
   | | +-- [email protected]
   | | | +-- [email protected]
   | | | +-- [email protected]
   | | | | `-- [email protected]
   | | | +-- [email protected]
   | | | `-- [email protected]
   | | `-- [email protected]
   | |   `-- [email protected]
   | +-- [email protected]
   | | +-- [email protected]
   | | +-- [email protected]
   | | +-- [email protected]
   | | `-- [email protected]
   | +-- [email protected]
   | | +-- [email protected]
   | | +-- [email protected]
   | | | +-- [email protected]
   | | | +-- [email protected]
   | | | `-- [email protected]
   | | `-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   | `-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   `-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | `-- [email protected]
   `-- [email protected]

उदाहरण

निम्नलिखित LESS का एक सरल उदाहरण है।

hello.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>
   
   <body>
      <h1>Welcome to TutorialsPoint</h1>
      <h3>Hello!!!!!</h3>
   </body>
</html>

हमें अब एक फ़ाइल बनाएँ style.less जो काफी सीएसएस के समान है, फर्क सिर्फ इतना है कि यह साथ सहेज लिया जाएगा .less विस्तार। फोल्डर के अंदर .html और .less दोनों फाइल बनाई जानी चाहिएnodejs।

style.less

@primarycolor: #FF7F50;
@color:#800080;
h1 {
   color: @primarycolor;
}

h3 {
   color: @color;
}

निम्नलिखित कमांड का उपयोग करके style.css के लिए स्टाइल स्टाइल फाइल को संकलित करें -

lessc style.less style.css

जब आप ऊपर कमांड चलाते हैं, तो यह style.css फ़ाइल को स्वचालित रूप से बना देगा । जब भी आप LESS फ़ाइल बदलते हैं, तो ऊपर दिए गए कमांड को चलाना आवश्यक हैcmdऔर फिर style.css फ़ाइल अपडेट हो जाएगी।

Style.css जब आप उपरोक्त आदेश चलाने फ़ाइल निम्न कोड होगा -

style.css

h1 {
  color: #FF7F50;
}

h3 {
  color: #800080;
}

उत्पादन

अब उपरोक्त कोड कैसे काम करता है, यह देखने के लिए हम निम्नलिखित कदम उठाते हैं -

  • ऊपर दिए गए html कोड को सेव करें hello.htm फ़ाइल।

  • ब्राउज़र में इस HTML फ़ाइल को खोलें, निम्न आउटपुट प्रदर्शित होगा।

विवरण

यह सीएसएस संपत्तियों का एक समूह है जो एक वर्ग के गुणों को दूसरी कक्षा में उपयोग करने की अनुमति देता है और वर्ग का नाम इसके गुणों के रूप में शामिल करता है। LESS में, आप मिक्सिन को उसी तरह से घोषित कर सकते हैं जैसे क्लास या आईडी चयनकर्ता का उपयोग करके सीएसएस शैली। यह कई मूल्यों को संग्रहीत कर सकता है और जब भी आवश्यक हो कोड में पुन: उपयोग किया जा सकता है।

उदाहरण

निम्न उदाहरण लेस फ़ाइल में नेस्टेड नियमों के उपयोग को दर्शाता है -

<html>
   <head>
      <title>Nested Rules</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <div class = "container">
         <h1>First Heading</h1>
         <p>LESS is a dynamic style sheet language that extends the capability of CSS.</p>
         <div class = "myclass">
            <h1>Second Heading</h1>
            <p>LESS enables customizable, manageable and reusable style sheet for web site.</p>
         </div>
      </div>
   </body>
</html>

अगला, style.less फ़ाइल बनाएँ ।

style.less

.container {
   h1 {
      font-size: 25px;
      color:#E45456;
   }
   p {
      font-size: 25px;
      color:#3C7949;
   }

   .myclass {
      h1 {
         font-size: 25px;
         color:#E45456;
      }
      p {
         font-size: 25px;
         color:#3C7949;
      }
   }
}

निम्नलिखित कमांड का उपयोग करके आप style.less फ़ाइल को style.css में संकलित कर सकते हैं -

lessc style.less style.css

उपरोक्त आदेश निष्पादित करें; यह निम्नलिखित कोड के साथ अपने आप style.css फ़ाइल बनाएगा -

style.css

.container h1 {
   font-size: 25px;
   color: #E45456;
}

.container p {
   font-size: 25px;
   color: #3C7949;
}

.container .myclass h1 {
   font-size: 25px;
   color: #E45456;
}

.container .myclass p {
   font-size: 25px;
   color: #3C7949;
}

उत्पादन

उपरोक्त कोड कैसे काम करता है, यह देखने के लिए इन चरणों का पालन करें -

  • ऊपर दिए गए html कोड को सेव करें nested_rules.html फ़ाइल।

  • ब्राउज़र में इस HTML फ़ाइल को खोलें, निम्न आउटपुट प्रदर्शित होगा।

विवरण

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

उदाहरण

निम्न उदाहरण नेस्टेड निर्देशों का उपयोग और कम फ़ाइल में बुदबुदाहट प्रदर्शित करता है -

<html>
   <head>
      <title>Nested Directives</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Nested Directives</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

इसके बाद, file style.less बनाएं ।

style.less

.myclass {
   @media screen {
      color: blue;
      @media (min-width: 1024px) {
         color: green;
      }
   }
   @media mytext {
      color: black;
   }
}

निम्नलिखित कमांड का उपयोग करके आप style.less फ़ाइल को style.css में संकलित कर सकते हैं -

lessc style.less style.css

उपरोक्त आदेश निष्पादित करें; यह निम्नलिखित कोड के साथ अपने आप style.css फ़ाइल बनाएगा -

style.css

@media screen {
   .myclass {
      color: blue;
   }
}
@media screen and (min-width: 1024px) {
   .myclass {
      color: green;
   }
}
@media mytext {
   .myclass {
      color: black;
   }
}

उत्पादन

उपरोक्त कोड कैसे काम करता है, यह देखने के लिए इन चरणों का पालन करें -

  • ऊपर दिए गए html कोड को सेव करें nested_directives_bubbling.html फ़ाइल।

  • ब्राउज़र में इस HTML फ़ाइल को खोलें, निम्न आउटपुट प्रदर्शित होगा।

विवरण

LESS कुछ अंकगणितीय संक्रियाओं जैसे कि प्लस (+), माइनस (-), गुणा (*) और विभाजन (/) के लिए समर्थन प्रदान करता है और वे किसी भी संख्या, रंग या चर पर काम कर सकते हैं। जब आप वेरिएबल का उपयोग कर रहे होते हैं तो ऑपरेशन बहुत समय बचाते हैं और आपको लगता है कि यह सरल गणित पर काम कर रहा है।

उदाहरण

निम्न उदाहरण LESS फ़ाइल में संचालन के उपयोग को प्रदर्शित करता है -

<html>
   <head>
      <title>Less Operations</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Operations</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

इसके बाद, file style.less बनाएं ।

style.less

@fontSize: 10px;
.myclass {
   font-size: @fontSize * 2;
   color:green;
}

निम्नलिखित कमांड का उपयोग करके आप style.less फ़ाइल को style.css में संकलित कर सकते हैं -

lessc style.less style.css

उपरोक्त आदेश निष्पादित करें; यह निम्नलिखित कोड के साथ अपने आप style.css फ़ाइल बनाएगा -

style.css

.myclass {
   font-size: 20px;
   color: green;
}

उत्पादन

उपरोक्त कोड कैसे काम करता है, यह देखने के लिए इन चरणों का पालन करें -

  • ऊपर दिए गए html कोड को सेव करें operations.html फ़ाइल।

  • ब्राउज़र में इस HTML फ़ाइल को खोलें, निम्न आउटपुट प्रदर्शित होगा।

विवरण

यह चयनकर्ताओं को गतिशील रूप से बनाता है और संपत्ति या चर मान का उपयोग करता है।

उदाहरण

निम्न उदाहरण LESS फ़ाइल में भागने के उपयोग को दर्शाता है -

<html>
   <head>
      <title>Less Escaping</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Escaping</h1>
      <p>LESS enables customizable, manageable and reusable style sheet for web site.</p>
   </body>
</html>

अब style.less फ़ाइल बनाएँ ।

style.less

p {
   color: ~"green";
}

निम्नलिखित कमांड का उपयोग करके आप style.less फ़ाइल को style.css में संकलित कर सकते हैं -

lessc style.less style.css

उपरोक्त आदेश निष्पादित करें, यह निम्नलिखित कोड के साथ अपने आप style.css फ़ाइल बनाएगा -

style.css

p {
   color: green;
}

कुछ भी लिखा अंदर ~ "some_text" के रूप में प्रदर्शित किया जाएगा some_text सीएसएस कोड को कम कोड संकलन के बाद।

उत्पादन

अब उपरोक्त कोड कैसे काम करता है, यह देखने के लिए हम निम्नलिखित चरणों का पालन करते हैं -

  • ऊपर दिए गए html कोड को सेव करें escaping.html फ़ाइल।

  • ब्राउज़र में इस HTML फ़ाइल को खोलें, निम्न आउटपुट प्रदर्शित होगा।

विवरण

LESS मानों के हेरफेर के साथ जावास्क्रिप्ट कोड को मैप करता है और स्टाइल शीट में HTML तत्वों के पहलुओं में हेरफेर करने के लिए पूर्वनिर्धारित कार्यों का उपयोग करता है। यह रंग में हेरफेर करने के लिए कई कार्य प्रदान करता है जैसे कि राउंड फंक्शन, फ्लोर फंक्शन, साइल फंक्शन, प्रतिशत फंक्शन आदि।

उदाहरण

निम्न उदाहरण LESS फ़ाइल में कार्यों के उपयोग को दर्शाता है -

<html>
   <head>
      <title>Less Functions</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Functions</h1>
      <p class = "mycolor">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

अब style.less फ़ाइल बनाएँ ।

style.less

@color: #FF8000;
@width:1.0;
.mycolor {
   color: @color;
   width: percentage(@width);
}

निम्नलिखित कमांड का उपयोग करके आप style.less फ़ाइल को style.css में संकलित कर सकते हैं -

lessc style.less style.css

अब उपरोक्त कमांड को निष्पादित करें; यह निम्नलिखित कोड के साथ अपने आप style.css फ़ाइल बनाएगा -

style.css

.mycolor {
   color: #FF8000;
   width: 100%;
}

उत्पादन

उपरोक्त कोड कैसे काम करता है, यह देखने के लिए इन चरणों का पालन करें -

  • ऊपर दिए गए html कोड को सेव करें functions.html फ़ाइल।

  • इस HTML फ़ाइल को एक ब्राउज़र में खोलें, प्रदर्शित करें आपको निम्न आउटपुट प्राप्त होगा।

विवरण

मिश्रणों को एक सामान्य नाम के तहत समूहित करने के लिए नामस्थान का उपयोग किया जाता है। नेमस्पेस का उपयोग करके, आप नाम में संघर्ष से बच सकते हैं और बाहर से मिक्सिन्स के एक समूह को इनकैप्सुलेट कर सकते हैं।

उदाहरण

निम्न उदाहरण LESS फ़ाइल में नेमस्पेस और एक्सेसर्स के उपयोग को दर्शाता है -

<html>
   <head>
      <title>Less Namespaces and Accessors</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Namespaces and Accessors</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

अब style.less फ़ाइल बनाएँ ।

style.less

.class1 {
   .class2 {
      .val(@param) {
         font-size: @param;
         color:green;
      }
   }
}

.myclass {
   .class1 > .class2 > .val(20px);
}

निम्नलिखित कमांड का उपयोग करके आप style.less फ़ाइल को style.css में संकलित कर सकते हैं -

lessc style.less style.css

उपरोक्त आदेश निष्पादित करें; यह निम्नलिखित कोड के साथ अपने आप style.css फ़ाइल बनाएगा -

style.css

.myclass {
   font-size: 20px;
   color: green;
}

उत्पादन

उपरोक्त कोड कैसे काम करता है, यह देखने के लिए इन चरणों का पालन करें -

  • ऊपर दिए गए html कोड को सेव करें namespaces_accessors.html फ़ाइल।

  • ब्राउज़र में इस HTML फ़ाइल को खोलें, निम्न आउटपुट प्रदर्शित होगा।

विवरण

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

उदाहरण

निम्न उदाहरण LESS फ़ाइल में नेमस्पेस और एक्सेसर्स के उपयोग को दर्शाता है -

<html>
   <head>
      <title>Less Scope</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Scope</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

अब style.less फ़ाइल बनाएँ ।

style.less

@var: @a;
@a: 15px;

.myclass {
   font-size: @var;
   @a:20px;
   color: green;
}

निम्नलिखित कमांड का उपयोग करके आप style.less फ़ाइल को style.css में संकलित कर सकते हैं -

lessc style.less style.css

उपरोक्त आदेश निष्पादित करें; यह निम्नलिखित कोड के साथ अपने आप style.css फ़ाइल बनाएगा -

style.css

.myclass {
   font-size: 20px;
   color: green;
}

उत्पादन

उपरोक्त कोड कैसे काम करता है, यह देखने के लिए इन चरणों का पालन करें -

  • ऊपर दिए गए html कोड को सेव करें scope.html फ़ाइल।

  • ब्राउज़र में इस HTML फ़ाइल को खोलें, निम्न आउटपुट प्रदर्शित होगा।

विवरण

टिप्पणियाँ उपयोगकर्ताओं के लिए कोड को स्पष्ट और समझने योग्य बनाती हैं। आप कोड में ब्लॉक शैली और इनलाइन टिप्पणी दोनों का उपयोग कर सकते हैं, लेकिन जब आप LESS कोड संकलित करते हैं, तो सीएसएस फ़ाइल में सिंगल लाइन टिप्पणियां दिखाई नहीं देंगी।

उदाहरण

निम्न उदाहरण कम फ़ाइल में टिप्पणियों के उपयोग को दर्शाता है -

<html>
   <head>
      <title>Less Comments</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>

   <body>
      <h1>Example using Comments</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
      <p class = "myclass1">It allows reusing CSS code and 
      writing LESS code with same semantics.</p>
   </body>
</html>

अब style.less फ़ाइल बनाएँ ।

style.less

/* It displays the
green color! */
.myclass {
   color: green;
}

// It displays the blue color
.myclass1 {
   color: red;
}

निम्नलिखित कमांड का उपयोग करके आप style.less फ़ाइल को style.css में संकलित कर सकते हैं -

lessc style.less style.css

अब उपरोक्त कमांड को निष्पादित करें; यह निम्नलिखित कोड के साथ अपने आप style.css फ़ाइल बनाएगा -

style.css

/* It displays the
green color! */
.myclass {
   color: green;
}

.myclass1 {
   color: red;
}

उत्पादन

उपरोक्त कोड कैसे काम करता है, यह देखने के लिए इन चरणों का पालन करें -

  • ऊपर दिए गए html कोड को सेव करें comments.html फ़ाइल।

  • ब्राउज़र में इस HTML फ़ाइल को खोलें, निम्न आउटपुट प्रदर्शित होगा।

विवरण

इसका उपयोग LESS या CSS फाइलों की सामग्री को आयात करने के लिए किया जाता है।

उदाहरण

निम्न उदाहरण LESS फ़ाइल में आयात के उपयोग को प्रदर्शित करता है -

<html>
   <head>
      <title>Less Importing</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>

   <body>
      <h1>Example using Importing</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
      <p class = "myclass1">It allows reusing CSS code and 
      writing LESS code with same semantics.</p>
      <p class = "myclass2">LESS supports creating cleaner, 
      cross-browser friendly CSS faster and easier.</p>
   </body>
</html>

अब myfile.less फ़ाइल बनाएँ ।

myfile.less

.myclass {
   color: #FF8000;
}

.myclass1 {
   color: #5882FA;
}

अब style.less फ़ाइल बनाएँ ।

style.less

@import "http://www.tutorialspoint.com/less/myfile.less";
.myclass2 {
   color: #FF0000;
}

Myfile.less फ़ाइल जो में आयात किया जाएगा style.less पथ सेhttps://www.tutorialspoint.com/less/myfile.less

निम्नलिखित कमांड का उपयोग करके आप style.less फ़ाइल को style.css में संकलित कर सकते हैं -

lessc style.less style.css

उपरोक्त आदेश निष्पादित करें; यह निम्नलिखित कोड के साथ अपने आप style.css फ़ाइल बनाएगा -

style.css

.myclass {
   color: #FF8000;
}

.myclass1 {
   color: #5882FA;
}

.myclass2 {
   color: #FF0000;
}

उत्पादन

उपरोक्त कोड कैसे काम करता है, यह देखने के लिए इन चरणों का पालन करें -

  • ऊपर दिए गए html कोड को सेव करें importing.html फ़ाइल।

  • ब्राउज़र में इस HTML फ़ाइल को खोलें, निम्न आउटपुट प्रदर्शित होगा।

इस अध्याय में, हम LESS में चर की चर्चा करेंगे। LESS चर को एक @ प्रतीक के साथ परिभाषित करने की अनुमति देता है । चर काम एक साथ किया जाता हैcolon(:)।

निम्न तालिका विस्तार में LESS चर के उपयोग को प्रदर्शित करती है।

अनु क्रमांक। चर उपयोग और विवरण
1 अवलोकन

एक ही मूल्य के दोहराव से कई बार चरों के उपयोग से बचा जा सकता है ।
2 परिवर्तनीय प्रक्षेप

चरों का उपयोग अन्य स्थानों जैसे चयनकर्ता के नाम , संपत्ति के नाम , URL s और @import वक्तव्यों में भी किया जा सकता है ।
3 चर नाम

हम एक वैरिएबल नाम के साथ वेरिएबल को परिभाषित कर सकते हैं, जिसमें वैल्यू होती है।
4 धीरे लोड हो रहा है

आलसी लोडिंग में, चर का उपयोग तब भी किया जा सकता है जब वे नहीं होते हैं।
5 डिफ़ॉल्ट चर

डिफॉल्ट वेरिएबल में एक वैरिएबल सेट करने की क्षमता होती है, जब वह पहले से सेट न हो। इस सुविधा की आवश्यकता नहीं है क्योंकि बाद में उन्हें परिभाषित करके चर आसानी से ओवरराइड किया जा सकता है।

एक्सटेंड एक लेस छद्म वर्ग है जो अन्य चयनकर्ता शैलियों का उपयोग करके एक चयनकर्ता में विस्तारित करता है :extend चयनकर्ता।

उदाहरण

निम्न उदाहरण LESS फ़ाइल में विस्तार का उपयोग दर्शाता है -

extend_syntax.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "style">
         <h2>Welcome to TutorialsPoint</h2>
         <p>Hello!!!!!</p>
      </div>
   </body>
</html>

अगला, style.less फ़ाइल बनाएँ ।

style.less

h2 {
   &:extend(.style);
   font-style: italic;
}

.style {
   background: green;
}

आप संकलन कर सकते हैं extend.less करने के लिए फ़ाइल extend.css निम्नलिखित कमांड का उपयोग करके -

lessc style.less style.css

उपरोक्त आदेश निष्पादित करें; यह निम्नलिखित कोड के साथ अपने आप style.css फ़ाइल बनाएगा -

style.css

h2 {
   font-style: italic;
}

.style,
h2 {
   background: blue;
}

उत्पादन

उपरोक्त कोड कैसे काम करता है, यह देखने के लिए इन चरणों का पालन करें -

  • ऊपर दिए गए html कोड को सेव करें extend_syntax.htm फ़ाइल।

  • ब्राउज़र में इस HTML फ़ाइल को खोलें, निम्न आउटपुट प्रदर्शित होगा।

सिंटेक्स का विस्तार करें

विस्तार को नियमों में रखा गया है या चयनकर्ता से जुड़ा हुआ है। यह एक या अधिक कक्षाओं वाले छद्म वर्ग के समान है, जो अल्पविराम द्वारा अलग हो जाते हैं। वैकल्पिक कीवर्ड का उपयोग करनाall, प्रत्येक चयनकर्ता का पालन किया जा सकता है।

उदाहरण

निम्न उदाहरण LESS फ़ाइल में विस्तार सिंटैक्स के उपयोग को दर्शाता है -

extend_syntax.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "style">
         <h2>Welcome to TutorialsPoint</h2>
         
         <div class = "container">
            <p>Hello!!!!!</p>
         </div>
      
      </div>
   </body>
</html>

अब style.less फ़ाइल बनाएँ ।

style.less

.style:extend(.container, .img) {
   background: #BF70A5;
}

.container {
   font-style: italic;
}

.img {
   font-size: 30px;
}

निम्नलिखित कमांड का उपयोग करके आप style.less फ़ाइल को style.css में संकलित कर सकते हैं -

lessc style.less style.css

उपरोक्त आदेश निष्पादित करें; यह निम्नलिखित कोड के साथ अपने आप style.css फ़ाइल बनाएगा -

style.css

.style {
   background: #BF70A5;
}

.container,
.style {
   font-style: italic;
}

.img,
.style {
   font-size: 30px;
}

उत्पादन

उपरोक्त कोड कैसे काम करता है, यह देखने के लिए इन चरणों का पालन करें -

  • ऊपर दिए गए html कोड को सेव करें extend_syntax.htm फ़ाइल।

  • ब्राउज़र में इस HTML फ़ाइल को खोलें, निम्न आउटपुट प्रदर्शित होगा।

निम्न तालिका सभी प्रकार के विस्तार सिंटैक्स को सूचीबद्ध करती है जिसे आप LESS में उपयोग कर सकते हैं -

अनु क्रमांक। प्रकार और विवरण
1 चयनकर्ता के लिए संलग्न बढ़ाएँ

एक्सटेंड एक चयनकर्ता से जुड़ा हुआ है जो एक छद्म वर्ग के समान है जो चयनकर्ता के साथ पैरामीटर के रूप में है।
2 अंदर के नियम का विस्तार करें

&:extend(selector) सिंटैक्स को नियम के शरीर के अंदर रखा जा सकता है।
3 नेस्टेड चयनकर्ताओं का विस्तार

नेस्ट सेलेक्टर्स का विस्तार एक्सटेंशन चयनकर्ता के उपयोग से किया जाता है ।
4 एक्सटेंड के साथ सटीक मिलान

डिफ़ॉल्ट रूप से, extend चयनकर्ताओं के बीच सटीक मेल की तलाश करता है।
5 nth अभिव्यक्ति

Nth अभिव्यक्ति का रूप विस्तार में महत्वपूर्ण है अन्यथा, यह चयनकर्ता को अलग मानता है।
6 "सभी" बढ़ाएँ

कीवर्ड जब सब में पिछले पर पहचाना जाता हैextend तर्क तो LESS उस चयनकर्ता को दूसरे चयनकर्ता के हिस्से के रूप में मिलाता है।
7 चयनकर्ता विस्तार के साथ इंटरपोल

extend प्रक्षेपित चयनकर्ता से जुड़ा जा सकता है।
8 @ मीडिया के अंदर स्कोपिंग / विस्तार

चयनकर्ता का मिलान केवल उसी मीडिया घोषणा के अंदर मौजूद होता है।
9 डुप्लीकेशन डिटेक्शन

यह चयनकर्ताओं के दोहराव का पता नहीं लगा सकता है।

निम्नलिखित विस्तार के लिए उपयोग मामलों के प्रकार हैं

अनु क्रमांक। प्रकार और विवरण
1 क्लासिक उपयोग का मामला

LESS में बेस क्लास को जोड़ने से बचने के लिए क्लासिक उपयोग केस का उपयोग किया जाता है।
2 सीएसएस आकार को कम करना

विस्तारक का उपयोग चयनकर्ता को उन गुणों को स्थानांतरित करने के लिए किया जाता है जहां तक ​​आप उपयोग करना चाहते हैं; यह सीएसएस उत्पन्न कोड को कम करने में मदद करता है।
3 संयोजन शैलियाँ / एक और अधिक उन्नत मिश्रण

विस्तार का उपयोग करके हम एक विशेष चयनकर्ताओं की समान शैलियों को अन्य चयनकर्ता में जोड़ सकते हैं।

मिक्सिंग प्रोग्रामिंग भाषाओं में फ़ंक्शंस के समान हैं। मिक्स सीएसएस गुणों का एक समूह है जो आपको किसी अन्य वर्ग के लिए एक वर्ग के गुणों का उपयोग करने की अनुमति देता है और इसके गुणों के रूप में वर्ग नाम भी शामिल है। LESS में, आप उसी तरह से मिक्सचर की घोषणा कर सकते हैं जैसे कि क्लास या आईडी सेलेक्टर का उपयोग करके CSS स्टाइल। यह कई मूल्यों को संग्रहीत कर सकता है और जब भी आवश्यक हो कोड में पुन: उपयोग किया जा सकता है।

निम्न तालिका कम के उपयोग को दर्शाता है mixins विस्तार से।

अनु क्रमांक। मिश्रण का उपयोग और विवरण
1 मिक्सिंग आउटपुट नहीं

मिश्रण को केवल उसके बाद कोष्ठक रखकर आउटपुट में गायब किया जा सकता है।
2 मिक्सिंस में चयनकर्ता

मिश्रण में न केवल गुण हो सकते हैं, बल्कि वे चयनकर्ता भी शामिल कर सकते हैं।
3 नेमस्पेस

मिश्रणों को एक सामान्य नाम के तहत समूहित करने के लिए नामस्थान का उपयोग किया जाता है।
4 संरक्षित नामस्थान

जब गार्ड को नाम स्थान पर लागू किया जाता है, तो इसके द्वारा परिभाषित मिश्रण का उपयोग केवल तभी किया जाता है जब गार्ड की स्थिति सही हो।
5 महत्वपूर्ण कीवर्ड

! महत्वपूर्ण कीवर्ड विशेष संपत्ति ओवरराइड करने के लिए प्रयोग किया जाता है।

उदाहरण

निम्न उदाहरण LESS फ़ाइल में मिश्रणों के उपयोग को दर्शाता है -

<html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
      <title>LESS Mixins</title>
   </head>

   <body>
      <h1>Welcome to Tutorialspoint</h1>
      <p class = "p1">LESS is a CSS pre-processor that enables customizable, 
      manageable and reusable style sheet for web site.</p>
      <p class = "p2">LESS is a dynamic style sheet language that extends the capability of CSS.</p>
      <p class = "p3">LESS is cross browser friendly.</p>
   </body>
</html>

अगला, style.less फ़ाइल बनाएँ ।

style.less

.p1 {
   color:red;
}

.p2 {
   background : #64d9c0;
   .p1();
}

.p3 {
   background : #LESS520;
  .p1;
}

निम्नलिखित कमांड का उपयोग करके आप style.less को style.css पर संकलित कर सकते हैं -

lessc style.less style.css

उपरोक्त आदेश निष्पादित करें; यह निम्नलिखित कोड के साथ अपने आप style.css फ़ाइल बनाएगा -

style.css

.p1 {
   color: red;
}

.p2 {
   background: #64d9c0;
   color: red;
}

.p3 {
   background: #LESS520;
   color: red;
}

उत्पादन

उपरोक्त कोड कैसे काम करता है, यह देखने के लिए इन चरणों का पालन करें -

  • ऊपर दिए गए html कोड को सेव करें less_mixins.html फ़ाइल।

  • ब्राउज़र में इस HTML फ़ाइल को खोलें, निम्न आउटपुट प्रदर्शित होगा।

मिश्रण को बुलाते समय कोष्ठक वैकल्पिक होते हैं। उपरोक्त उदाहरण में, दोनों कथन.p1(); तथा .p1; वहीं काम करें।

विवरण

पैरामीट्रिक मिश्रण एक या एक से अधिक मापदंडों का उपयोग करते हैं जो दूसरे ब्लॉक में मिश्रित होने पर मिक्सिन आउटपुट को अनुकूलित करने के लिए तर्क और इसके गुणों को लेस की कार्यक्षमता का विस्तार करते हैं।

उदाहरण के लिए, एक साधारण LESS कोड स्निपेट पर विचार करें -

.border(@width; @style; @color) {
   border: @width @style @color;
}

.myheader {
   .border(2px; dashed; green);
}

यहां हम पैरामीट्रिक मिक्सिन के रूप में उपयोग कर रहे हैं। तीन मापदंडों के साथ - चौड़ाई, शैली और रंग। इन मापदंडों का उपयोग करके, आप पास किए गए पैरामीटर मान के साथ मिक्सिन आउटपुट को अनुकूलित कर सकते हैं।

निम्न तालिका विवरण के साथ विभिन्न प्रकार के पैरामीट्रिक मिश्रणों का वर्णन करती है।

अनु क्रमांक। प्रकार और विवरण
1 एकाधिक मापदंडों के साथ मिश्रण

पैरामीटर को कॉमा या अर्धविराम का उपयोग करके अलग किया जा सकता है।
2 नामित पैरामीटर्स

मिश्रण उनके नाम का उपयोग करके पदों के बजाय पैरामीटर मान प्रदान करते हैं।
3 @ सारगर्भित चर

जब एक मिश्रण को बुलाया जाता है, तो @arguments में सभी पारित किए गए तर्क शामिल होते हैं।
4 उन्नत तर्क और @ श्रेष्ठ चर

मिक्सिन प्रयोग करके तर्कों की चर संख्या लेता है ....।
5 पैटर्न मिलान

मापदंडों को पास करके मिश्रण के व्यवहार को बदलें।

इस अध्याय में, हम इसका महत्व समझेंगे Mixins as Functions। फ़ंक्शंस की तरह, मिक्सिन्स नेस्टेड हो सकते हैं, मापदंडों को स्वीकार कर सकते हैं, और मान भी लौटा सकते हैं।

निम्न तालिका में विवरण के रूप में मिश्रणों के उपयोग को प्रदर्शित किया गया है ।

अनु क्रमांक। मिश्रण का उपयोग और विवरण
1 मिक्सिन गुंजाइश

मिश्रण में चरों का समावेश होता है; इनका उपयोग कॉलर के दायरे में किया जा सकता है और दिखाई देता है।
2 मिक्सिन और रिटर्न वैल्यू

मिक्सिन फ़ंक्शंस के समान हैं और वैरिएबल जिन्हें मिक्सिन में परिभाषित किया गया है, रिटर्न मान के रूप में व्यवहार करेंगे।
3 मिक्स एक और मिक्सिन के अंदर

जब भी किसी मिक्सिन को किसी अन्य मिक्सिन के अंदर परिभाषित किया जाता है, तो इसे रिटर्न वैल्यू के रूप में भी इस्तेमाल किया जा सकता है।

विवरण

अलग किए गए नियमों में गुण, नेस्टेड नियम, चर घोषणा, मिश्रण आदि जैसे नियम शामिल हैं। यह एक चर में संग्रहित है और एक अन्य संरचना में शामिल है; नियमों के सभी गुण उस संरचना में कॉपी हो जाते हैं।

उदाहरण

निम्न उदाहरण दिखाता है कि LESS फ़ाइल में मिश्रण करने के लिए एक नियम कैसे पारित किया जाए -

passing_ruleset.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "cont">
         <h2>Welcome to TutorialsPoint</h2>
         <p>The largest Tutorials Library on the web.</p>
      </div>
   </body>
</html>

अगला, style.less फ़ाइल बनाएँ ।

style.less

@detached-ruleset: {
   .mixin() {
      font-family: "Comic Sans MS";
      background-color: #AA86EE;
   }
};

.cont {
   @detached-ruleset();
   .mixin();
}

निम्नलिखित कमांड का उपयोग करके आप style.less फ़ाइल को style.css में संकलित कर सकते हैं -

lessc style.less style.css

उपरोक्त आदेश निष्पादित करें; यह निम्नलिखित कोड के साथ अपने आप style.css फ़ाइल बनाएगा -

style.css

.cont {
   font-family: "Comic Sans MS";
   background-color: #AA86EE;
}

उत्पादन

उपरोक्त कोड कैसे काम करता है, यह देखने के लिए इन चरणों का पालन करें -

  • ऊपर दिए गए html कोड को सेव करें passing_ruleset.htm फ़ाइल।

  • ब्राउज़र में इस HTML फ़ाइल को खोलें, निम्न आउटपुट प्रदर्शित होगा।

देखते हुए

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

निम्न तालिका सभी प्रकार के दायरे सूचीबद्ध करती है -

अनु क्रमांक। प्रकार और विवरण
1 परिभाषा और कॉलर स्कोप दृश्यता

चर और मिश्रण को अलग किए गए नियम के अंदर परिभाषित किया गया है।
2 संदर्भित डिटेल्ड स्कोप संशोधित नहीं करेगा

केवल संदर्भ देते हुए, नियम किसी भी नए दायरे में नहीं जाता है।
3 अनलॉकिंग, अलग किए गए नियम स्कोप को संशोधित करेगा

अलग किए गए नियमों को इसमें आयात करके गुंजाइश तक पहुँचा जा सकता है।

विवरण

@importनिर्देश का उपयोग कोड में फ़ाइलों को आयात करने के लिए किया जाता है। यह विभिन्न फ़ाइलों पर LESS कोड को फैलाता है और कोड की संरचना को आसानी से बनाए रखने की अनुमति देता है। आप कोड में कहीं भी @import स्टेटमेंट डाल सकते हैं ।

उदाहरण के लिए, आप फ़ाइल का उपयोग करके आयात कर सकते हैं @importकीवर्ड @import "file_name.less" के रूप में ।

फाइल एक्सटेंशन्स

आप विभिन्न फ़ाइल एक्सटेंशन के आधार पर @import स्टेटमेंट का उपयोग कर सकते हैं जैसे -

  • यदि आप .css एक्सटेंशन का उपयोग कर रहे हैं , तो इसे CSS माना जाएगा और @import स्टेटमेंट वैसा ही रहेगा ।

  • यदि इसमें कोई अन्य एक्सटेंशन शामिल है, तो इसे LESS माना जाएगा और आयात किया जाएगा।

  • यदि कोई LESS एक्सटेंशन नहीं है, तो यह आयातित LESS फ़ाइल के रूप में जोड़ा और शामिल किया जाएगा।

@import "style";      // imports the style.less
@import "style.less"; // imports the style.less
@import "style.php";  // imports the style.php as a less file
@import "style.css";  // it will kept the statement as it is

उदाहरण

निम्न उदाहरण SCSS फ़ाइल में चर के उपयोग को दर्शाता है -

<!doctype html>
   <head>
      <title>Import Directives</title>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <h2>Example of Import Directives</h2>
      <p class = "myline">Welcome to Tutorialspoint...</p>
   </body>
</html>

इसके बाद, import_dir.less फ़ाइल बनाएँ ।

import_dir.less

.myline {
   font-size: 20px;
}

अब, style.less फ़ाइल बनाएँ ।

style.less

@import "http://www.tutorialspoint.com/less/import_dir.less";
.myline {
   color:#FF0000;
}

Import_dir.less फ़ाइल में आयात किया जाएगा style.less पथ से फाइलhttps://www.tutorialspoint.com/less/import_dir.less।

निम्नलिखित कमांड का उपयोग करके आप style.less को style.css पर संकलित कर सकते हैं -

lessc style.less style.css

उपरोक्त आदेश निष्पादित करें; यह निम्नलिखित कोड के साथ अपने आप style.css फ़ाइल बनाएगा -

style.css

.myline {
   font-size: 20px;
}

.myline {
   color: #FF0000;
}

उत्पादन

उपरोक्त कोड कैसे काम करता है, यह देखने के लिए इन चरणों का पालन करें -

  • ऊपर दिए गए html कोड को सेव करें import_directives.html फ़ाइल।

  • ब्राउज़र में इस HTML फ़ाइल को खोलें, निम्न आउटपुट प्रदर्शित होगा।

इस अध्याय में, हम इसका महत्व समझेंगे Import Optionsकम में। लेस ऑफर करता है@import कथन जो शैली पत्रक को LESS और CSS शैली पत्रक दोनों को आयात करने की अनुमति देता है।

निम्न तालिका आयात निर्देशों को सूचीबद्ध करती है जिन्हें आयात विवरणों में लागू किया जाएगा।

अनु क्रमांक। आयात विकल्प और विवरण
1 संदर्भ

यह केवल संदर्भ के रूप में LESS फ़ाइल का उपयोग करता है और इसे आउटपुट नहीं करेगा।
2 पंक्ति में

यह आपको संसाधित किए बिना अपने CSS को आउटपुट में कॉपी करने में सक्षम बनाता है।
3 कम से

यह आयातित फ़ाइल को नियमित LESS फ़ाइल के रूप में मानेगा, जो भी फ़ाइल एक्सटेंशन हो सकती है।
4 सीएसएस

यह आयातित फ़ाइल को नियमित CSS फ़ाइल के रूप में मानेगा, जो भी फ़ाइल एक्सटेंशन हो सकती है।
5 एक बार

यह केवल एक बार फ़ाइल आयात करेगा।
6 विभिन्न

यह फ़ाइल को कई बार आयात करेगा।
7 ऐच्छिक

यह संकलित करना जारी रखता है, भले ही आयात करने की फ़ाइल नहीं मिली है।

एक से अधिक कीवर्ड का उपयोग करने की अनुमति है @import हालांकि, आपको खोजशब्दों को अलग करने के लिए अल्पविराम का उपयोग करना होगा।

उदाहरण के लिए -

@import (less, optional) "custom.css";

विवरण

यदि आप अभिव्यक्ति पर सरल मूल्यों या तर्कों की संख्या से मेल खाना चाहते हैं, तो आप गार्ड का उपयोग कर सकते हैं। यह मिक्सिन घोषणा के साथ जुड़ा हुआ है और इसमें ऐसी स्थिति शामिल है जो मिक्सिन से जुड़ी हुई है। प्रत्येक मिश्रण में एक या एक से अधिक गार्ड होंगे जो कॉमा द्वारा अलग किए जाते हैं; कोष्ठक के भीतर एक गार्ड संलग्न किया जाना चाहिए। LESS इसके बजाय संरक्षित मिश्रण का उपयोग करता हैif/else मिलान किए गए मिश्रण को निर्दिष्ट करने के लिए बयान और गणना करता है।

निम्न तालिका वर्णन के साथ-साथ विभिन्न प्रकार के मिश्रण गार्डों का वर्णन करती है।

अनु क्रमांक। प्रकार और विवरण
1 गार्ड तुलना ऑपरेटर

आप संख्या, तार, पहचानकर्ता, आदि की तुलना करने के लिए तुलना ऑपरेटर (=) का उपयोग कर सकते हैं।
2 गार्ड लॉजिकल ऑपरेटर्स

गार्ड के साथ तार्किक ऑपरेटरों के आसपास काम करने के लिए आप और कीवर्ड का उपयोग कर सकते हैं ।
3 प्रकार जाँच कार्य

इसमें मिश्रित मिश्रणों के लिए मूल्य प्रकार निर्धारित करने के लिए अंतर्निहित कार्य शामिल हैं।
4 सशर्त मिश्रण

LESS, अन्य मिक्सिंग मैचों के साथ मिक्सिन से मिलान करने के लिए डिफ़ॉल्ट फ़ंक्शन का उपयोग करता है ।

उदाहरण

निम्न उदाहरण LESS फ़ाइल में मिक्सर गार्ड के उपयोग को प्रदर्शित करता है -

<!doctype html>
   <head>
      <title>Mixin Guards</title>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <h2>Example of Mixin Guards</h2>
      <p class = "class1">Hello World...</p>
      <p class = "class2">Welcome to Tutorialspoint...</p>
   </body>
</html>

अब, style.less फ़ाइल बनाएँ ।

style.less

.mixin (@a) when (lightness(@a) >= 50%) {
   font-size: 14px;
}

.mixin (@a) when (lightness(@a) < 50%) {
   font-size: 16px;
}

.mixin (@a) {
   color: @a;
}

.class1 {
   .mixin(#FF0000)
}

.class2 {
   .mixin(#555)
}

निम्नलिखित कमांड का उपयोग करके आप style.less को style.css पर संकलित कर सकते हैं -

lessc style.less style.css

उपरोक्त आदेश निष्पादित करें; यह निम्नलिखित कोड के साथ अपने आप style.css फ़ाइल बनाएगा -

style.css

.class1 {
   font-size: 14px;
   color: #FF0000;
}

.class2 {
   font-size: 16px;
   color: #555;
}

उत्पादन

उपरोक्त कोड कैसे काम करता है, यह देखने के लिए इन चरणों का पालन करें -

  • ऊपर दिए गए html कोड को सेव करें mixin-guard.html फ़ाइल।

  • ब्राउज़र में इस HTML फ़ाइल को खोलें, निम्न आउटपुट प्रदर्शित होगा।

विवरण

गार्ड का उपयोग सरल मूल्यों या अभिव्यक्तियों पर कई तर्कों से मेल खाने के लिए किया जाता है। यह CSS चयनकर्ताओं पर लागू होता है। यह मिक्सिन घोषित करने और इसे तुरंत कॉल करने के लिए सिंटैक्स है। सफलतापूर्वक बाहर लाने के लिएifटाइप स्टेटमेंट; इस सुविधा से जुड़ें&, जो आपको कई गार्डों के समूह की अनुमति देता है।

उदाहरण

निम्नलिखित उदाहरण के उपयोग को दर्शाता है css LESS फ़ाइल में गार्ड -

css_guard.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "cont">
         <h2>Welcome to TutorialsPoint</h2>
      </div>
		
      <div class = "style">
         <h3>The largest Tutorials Library on the web.</h3>
      </div>
   </body>
</html>

अगला, style.less फ़ाइल बनाएँ ।

style.less

@usedScope: global;
.mixin() {
   @usedScope: mixin;
   .cont when (@usedScope = global) {
      background-color: red;
      color: black;
   }
   
   .style when (@usedScope = mixin) {
      background-color: blue;
      color: white;
   }
   @usedScope: mixin;
}
.mixin();

निम्नलिखित कमांड का उपयोग करके आप style.less फ़ाइल को style.css में संकलित कर सकते हैं -

lessc style.less style.css

उपरोक्त आदेश निष्पादित करें; यह निम्नलिखित कोड के साथ अपने आप style.css फ़ाइल बनाएगा -

style.css

.style {
   background-color: blue;
   color: white;
}

उत्पादन

उपरोक्त कोड कैसे काम करता है, यह देखने के लिए इन चरणों का पालन करें -

  • ऊपर दिए गए html कोड को सेव करें css_guard.htm फ़ाइल।

  • ब्राउज़र में इस HTML फ़ाइल को खोलें, निम्न आउटपुट प्रदर्शित होगा।

इस अध्याय में, हम समझेंगे कि Loops में लूप कैसे काम करता है। लूप्स स्टेटमेंट हमें कई बार स्टेटमेंट या स्टेटमेंट ऑफ स्टेट को निष्पादित करने की अनुमति देता है। विभिन्न पुनरावृत्ति / पाश संरचनाएं बनाई जा सकती हैं जब पुनरावर्ती मिश्रण के साथ संयोजन होता हैGuard Expressions तथा Pattern Matching।

उदाहरण

निम्न उदाहरण LESS फ़ाइल में लूप के उपयोग को प्रदर्शित करता है -

loop_example.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "cont">
         <h2>Welcome to TutorialsPoint</h2>
         <p>The largest Tutorials Library on the web. </p>
      </div>
   </body>
</html>

अगला, style.less फ़ाइल बनाएँ ।

style.less

.cont(@count) when (@count > 0) {
   .cont((@count - 1));
   width: (25px * @count);
}

div {
   .cont(7);
}

निम्नलिखित कमांड का उपयोग करके आप style.less फ़ाइल को style.css में संकलित कर सकते हैं -

lessc style.less style.css

उपरोक्त आदेश निष्पादित करें; यह निम्नलिखित कोड के साथ अपने आप style.css फ़ाइल बनाएगा -

style.css

div {
   width: 25px;
   width: 50px;
   width: 75px;
   width: 100px;
   width: 125px;
   width: 150px;
   width: 175px;
}

उत्पादन

उपरोक्त कोड कैसे काम करता है, यह देखने के लिए इन चरणों का पालन करें -

  • ऊपर दिए गए html कोड को सेव करें loop_example.htm फ़ाइल।

  • ब्राउज़र में इस HTML फ़ाइल को खोलें, निम्न आउटपुट प्रदर्शित होगा।

विवरण

LESS में यह सुविधा एक ही संपत्ति का उपयोग करके कई संपत्तियों से अल्पविराम या अंतरिक्ष अलग सूची में मूल्यों को जोड़ने की अनुमति देती है। यह पृष्ठभूमि और रूपांतरित गुणों के लिए उपयोग किया जा सकता है।

निम्न तालिका मर्ज सुविधा द्वारा समर्थित दो प्रकार के कार्यों का वर्णन करती है।

अनु क्रमांक। प्रकार और विवरण
1 अल्पविराम

यह अंत में संपत्ति मूल्य जोड़ता है।
2 अंतरिक्ष

यह अंतरिक्ष के साथ संपत्ति मूल्य जोड़ता है।

इस अध्याय में, हम समझते हैं कि कैसे Parent Selectorsकाम। का उपयोग करके मूल चयनकर्ता को संदर्भित करना संभव है&(एम्परसेंड) संचालक। नेस्टेड नियम के जनक चयनकर्ताओं द्वारा प्रतिनिधित्व किया जाता है& ऑपरेटर और एक मौजूदा चयनकर्ता के लिए एक संशोधित वर्ग या छद्म वर्ग को लागू करते समय उपयोग किया जाता है।

निम्न तालिका माता-पिता के चयनकर्ता के प्रकार को दर्शाती है -

अनु क्रमांक। प्रकार और विवरण
1 एकाधिक और

& निकटतम चयनकर्ता का प्रतिनिधित्व करेगा और सभी अभिभावक चयनकर्ताओं का भी।
2 चयनकर्ता आदेश बदलना

चयनकर्ता के क्रम में परिवर्तन होने पर, विरासत में मिले चयनकर्ता (मूल) चयनकर्ताओं को प्रस्तुत करना उपयोगी होता है।
3 Combinatorial Explosion

& अल्पविराम द्वारा अलग की गई सूची में चयनकर्ताओं के सभी संभावित क्रमांकन का भी उत्पादन कर सकते हैं।

उदाहरण

निम्न उदाहरण LESS फ़ाइल में मूल चयनकर्ता के उपयोग को दर्शाता है -

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
      <title>Parent Selector</title>
   </head>

   <body>
      <h2>Welcome to TutorialsPoint</h2>
      <ul>
         <li><a>SASS</a></li>
         <li><a>LESS</a></li>
      </ul>
   </body>
</html>

अगला, style.less फ़ाइल बनाएँ ।

style.less

a {
   color: #5882FA;
   &:hover {
      background-color: #A9F5F2;
   }
}

निम्नलिखित कमांड का उपयोग करके आप style.less फ़ाइल को style.css में संकलित कर सकते हैं -

lessc style.less style.css

उपरोक्त आदेश निष्पादित करें; यह निम्नलिखित कोड के साथ अपने आप style.css फ़ाइल बनाएगा -

style.css

a {
   color: #5882FA;
}

a:hover {
   background-color: red;
}

उपरोक्त उदाहरण में, & चयनकर्ता को संदर्भित करता है a।

उत्पादन

उपरोक्त कोड कैसे काम करता है, यह देखने के लिए इन चरणों का पालन करें -

  • ऊपर दिए गए html कोड को सेव करें parent_selector1.htm फ़ाइल।

  • ब्राउज़र में इस HTML फ़ाइल को खोलें, निम्न आउटपुट प्रदर्शित होगा।

जनक चयनकर्ताओं जब आप डिफ़ॉल्ट के अलावा अन्य तरह से नेस्टेड शासन के चयनकर्ताओं गठबंधन करने के लिए की जरूरत है ऑपरेटर, जैसे कई उपयोग हैं। का एक और विशिष्ट उपयोग&बार-बार वर्ग नाम उत्पन्न करना है। अधिक जानकारी के लिए यहां क्लिक करें ।

विविध कार्य एक अलग तरह के कार्यों के समूह से मिलकर होते हैं।

निम्नलिखित सारणी सभी प्रकार के विविध कार्यों को सूचीबद्ध करती है -

अनु क्रमांक। कार्य और विवरण
1 रंग

यह एक स्ट्रिंग है जो रंगों का प्रतिनिधित्व करता है।
2 छवि का आकार

इसका उपयोग फ़ाइल से छवि के आयाम की जांच करने के लिए किया जाता है।
3 इमेज की चौड़ाई

यह फ़ाइल से छवि की चौड़ाई की जांच करता है।
4 चित्र की ऊंचाई

यह फ़ाइल से छवि की ऊंचाई की जांच करता है।
5 धर्मांतरित

एक संख्या को एक इकाई से दूसरी इकाई में परिवर्तित किया जाता है।
6 डेटा - यूरी

डेटा यूरी यूनिफ़ॉर्म रिसोर्स आइडेंटिफ़ायर (URI) स्कीमा है जिसे वेबपेजों पर रिसोर्स इनलाइन मिलता है।
7 चूक

डिफ़ॉल्ट फ़ंक्शन केवल तभी सही होता है जब यह गार्ड की स्थिति के अंदर उपलब्ध होता है और किसी अन्य मिक्सिन के साथ मेल नहीं खाता है।
8 इकाई

डिफ़ॉल्ट फ़ंक्शन केवल तभी सही होता है जब यह गार्ड की स्थिति के अंदर उपलब्ध होता है और किसी अन्य मिक्सिन के साथ मेल नहीं खाता है
9 इकाई प्राप्त करें

get - यूनिट फंक्शन अपनी यूनिट को वापस लौटाता है जहां तर्क संख्या और इकाइयों के साथ मौजूद होता है।
10 svg - ढाल

svg-gradient एक रंग से दूसरे रंग का संक्रमण है। यह एक ही तत्व में कई रंग जोड़ सकता है।

विवरण

नीचे दिए गए स्ट्रिंग कार्यों में से कुछ का समर्थन करता है -

  • escape
  • e
  • % प्रारूप
  • replace

निम्न तालिका विवरण के साथ उपरोक्त स्ट्रिंग कार्यों का वर्णन करती है।

अनु क्रमांक। प्रकार और विवरण उदाहरण
1

Escape

यह विशेष वर्णों पर URL एन्कोडिंग का उपयोग करके एक स्ट्रिंग या जानकारी को एन्कोड करता है। आप कुछ पात्रों को एनकोड नहीं कर सकते थे जैसे कि, , / , ? , @ , & , + , ~ , ! , $ , ' और कुछ वर्ण जैसे आप सांकेतिक शब्दों में बदलना कर सकते हैं \ , # , ^ , ( , ) , { , } , : , > , < , ] , [ तथा =।

 
escape("Hello!! welcome to Tutorialspoint!")

यह आउटपुट स्ट्रिंग से बच गया -

Hello%21%21%20welcome%20to%20Tutorialspoint%21
2

e

यह एक स्ट्रिंग फ़ंक्शन है जो स्ट्रिंग को पैरामीटर के रूप में उपयोग करता है और बिना उद्धरण के जानकारी देता है। यह एक सीएसएस से बचने है जो ~ "कुछ सामग्री" का उपयोग करता है मान और संख्या को पैरामीटर के रूप में बच गया है।

 
filter: e("Hello!! welcome to Tutorialspoint!");

यह आउटपुट स्ट्रिंग से बच गया -

filter: Hello!! welcome to Tutorialspoint!;
3

% format

यह फ़ंक्शन एक स्ट्रिंग को प्रारूपित करता है। इसे निम्न प्रारूप के साथ लिखा जा सकता है -

%(string, arguments ...)
 
format-a-d: %("myvalues: %a myfile: %d", 2 + 3, "mydir/less_demo.less");

यह स्वरूपित स्ट्रिंग को आउटपुट करता है -

format-a-d: "myvalues: 5 myfile: "mydir/less_demo.less"";
4

replace

यह एक स्ट्रिंग के भीतर पाठ को बदलने के लिए उपयोग किया जाता है। यह कुछ मापदंडों का उपयोग करता है -

  • string - यह स्ट्रिंग को खोजता है और इसमें प्रतिस्थापित करता है।

  • pattern - यह नियमित अभिव्यक्ति पैटर्न को खोजता है।

  • replacement - यह पैटर्न से मेल खाने वाली स्ट्रिंग को बदल देता है।

  • flags - ये वैकल्पिक नियमित अभिव्यक्ति झंडे हैं।

 
replace("Welcome, val?", "val\?", "to Tutorialspoint!");

यह स्ट्रिंग को प्रतिस्थापित करता है -

"Welcome, to Tutorialspoint!"

विवरण

LESS में सूची कार्य होते हैं जिनका उपयोग सूची में लंबाई और मूल्य की स्थिति को निर्दिष्ट करने के लिए किया जाता है।

निम्न तालिका में सूचीबद्ध सूची कार्यों का उपयोग किया गया है -

अनु क्रमांक। समारोह विवरण
1 लंबाई

यह पैरामीटर के रूप में मानों की अल्पविराम या अंतरिक्ष से अलग सूची लेगा।
2 उद्धरण

यह किसी सूची में निर्दिष्ट स्थान पर मान लौटाएगा।

विवरण

गणित कार्यों में वे विधियाँ शामिल होती हैं जिनका उपयोग संख्यात्मक कार्यों को करने के लिए किया जाता है जैसे कि गोल, वर्गमूल, शक्ति मान, मापांक, प्रतिशत, आदि।

निम्न तालिका में LESS में प्रयुक्त मैथ फंक्शंस को दर्शाया गया है -

अनु क्रमांक। समारोह विवरण उदाहरण
1

ceil

यह संख्या को अगले उच्चतम पूर्णांक तक बढ़ाता है।

 
ceil(0.7)

यह संख्या को गोल -

1
2

floor

यह संख्या को अगले सबसे कम पूर्णांक तक ले जाता है।

 
floor(3.3)

यह संख्या को गोल -

3
3

percentage

यह फ्लोटिंग पॉइंट नंबर को प्रतिशत स्ट्रिंग में बदल देता है।

 
percentage(0.2)

यह संख्या को प्रतिशत स्ट्रिंग में रूपांतरित करता है -

20%
4

round

यह एक फ्लोटिंग पॉइंट नंबर को गोल करता है।

 
round(3.77)

यह संख्या को गोलाई मूल्य के रूप में परिवर्तित करता है -

4
5

sqrt

यह एक संख्या का वर्गमूल देता है।

 
sqrt(25)

यह संख्या की वर्गमूल को परिभाषित करता है -

5
6

abs

यह किसी संख्या का पूर्ण मूल्य प्रदान करता है।

 
abs(30ft)

यह पूर्ण मान प्रदर्शित करता है -

30ft
7

sin

यह संख्याओं पर रेडियन देता है।

 
sin(2)

यह मान की गणना करता है -

0.90929742682
8

asin

यह एक संख्या के आर्सेन (साइन का उलटा) को निर्दिष्ट करता है जो -pi / 2 और pi / 2 के बीच मान लौटाता है।

 
asin(1)

यह असिन मूल्य की गणना करता है -

1.5707963267948966
9

cos

यह निर्दिष्ट मूल्य के कोसाइन को लौटाता है और इकाइयों के बिना संख्याओं पर रेडियन निर्धारित करता है।

 
cos(2)

यह कॉस मान की गणना करता है -

-0.4161468365471424
10

acos

यह एक संख्या के arccosine (कोसाइन का उलटा) को निर्दिष्ट करता है जो 0 और pi के बीच मान लौटाता है।

 
acos(1)

यह एसीस मान की गणना करता है -

0
1 1

tan

यह संख्या की स्पर्शरेखा निर्दिष्ट करता है।

 
tan(60)

यह तन मान की गणना करता है -

0.320040389379563
12

atan

यह एक निर्दिष्ट संख्या के आर्कटेन्जेंट (स्पर्श का उलटा) को निर्दिष्ट करता है।

 
atan(1)

यह अतन मान को प्रदर्शित करता है -

0.7853981633974483
13

pi

यह पीआई मान लौटाता है।

 
pi()

यह पीआई मान को निर्धारित करता है -

3.141592653589793
14

pow

यह दूसरे तर्क की शक्ति के लिए उठाए गए पहले तर्क के मूल्य को निर्दिष्ट करता है।

 
pow(3,3)

यह शक्ति मान को निम्नानुसार निर्दिष्ट करता है -

27
15

mod

यह दूसरे तर्क के संबंध में पहले तर्क का मापांक देता है। यह नकारात्मक और फ्लोटिंग पॉइंट नंबरों को भी संभालता है।

 
mod(7,3)

यह मापांक मान लौटाता है -

1
16

min

यह एक या अधिक तर्कों के सबसे छोटे मूल्य को निर्दिष्ट करता है।

 
min(70,30,45,20)

यह न्यूनतम मान लौटाता है -

20
17

max

यह एक या अधिक तर्कों के उच्चतम मूल्य को निर्दिष्ट करता है।

 
max(70,30,45,20)

यह अधिकतम मान लौटाता है -

70

इस अध्याय में, हम इसका महत्व समझेंगे Type Functionsकम में। उनका उपयोग मूल्य के प्रकार को निर्धारित करने के लिए किया जाता है।

निम्न तालिका LESS में प्रयुक्त टाइप फ़ंक्शंस दिखाती है ।

अनु क्रमांक। प्रकार कार्य और विवरण उदाहरण
1

isnumber

यह मान के रूप में एक पैरामीटर लेता है और सही है , अगर यह एक संख्या या गलत है।

 
isnumber(1234);       // true
isnumber(24px);       // true
isnumber(7.8%);       // true
isnumber(#fff);       // false
isnumber(red);        // false
isnumber("variable"); // false
isnumber(keyword);    // false
isnumber(url(...));   // false
2

isstring

यह पैरामीटर के रूप में एक मूल्य लेता है और सही है , अगर यह एक स्ट्रिंग या गलत है तो।

 
isstring("variable"); // true
isstring(1234);       // false
isstring(24px);       // false
isstring(7.8%);       // false
isstring(#fff);       // false
isstring(red);        // false
isstring(keyword);    // false
isstring(url(...));   // false
3

iscolor

यह मान के रूप में पैरामीटर लेता है और सही लौटाता है , यदि मान एक रंग या गलत है यदि यह नहीं है।

 
iscolor(#fff);        // true
iscolor(red);         // true
iscolor(1234);        // false
iscolor(24px);        // false
iscolor(7.8%);        // false
iscolor("variable");  // false
iscolor(keyword);     // false
iscolor(url(...));    // false
4

iskeyword

यह मान के रूप में पैरामीटर लेता है और सही लौटाता है , यदि मान कोई कीवर्ड या गलत है तो यह नहीं है।

 
iskeyword(keyword);   // true
iskeyword(1234);      // false
iskeyword(24px);      // false
iskeyword(7.8%);      // false
iskeyword(#fff);      // false
iskeyword(red) ;      // false
iskeyword("variable");// false
iskeyword(url(...));  // false
5

isurl

यह मान के रूप में एक पैरामीटर लेता है और सही लौटाता है , यदि मान एक यूआरएल या गलत है यदि यह नहीं है।

 
isurl(url(...));      // true
isurl(keyword);       // false
isurl(1234);          // false
isurl(24px);          // false
isurl(7.8%);          // false
isurl(#fff);          // false
isurl(red) ;          // false
isurl("variable");    // false
6

ispixel

यह मान को पैरामीटर के रूप में लेता है और सही है , अगर मूल्य पिक्सेल में एक संख्या है या अन्यथा गलत है।

 
ispixel(24px);          // true
ispixel(1234);          // false
ispixel(7.8%);          // false
ispixel(keyword);       // false
ispixel(#fff);          // false
ispixel(red) ;          // false
ispixel("variable");    // false
ispixel(url(...));      // false
7

isem

यह मान के रूप में एक पैरामीटर लेता है और सही लौटाता है , अगर मूल्य एक एम मान या गलत है यदि यह नहीं है।

 
isem(0.5em);            // true
isem(1234);             // false
isem(24px);             // false
isem(keyword);          // false
isem(#fff);             // false
isem(red) ;             // false
isem("variable");       // false
isem(url(...));         // false
8

ispercentage

यह पैरामीटर और रिटर्न के रूप में एक मूल्य लेता है सच , अगर मूल्य प्रतिशत या रिटर्न में है झूठे , अगर मूल्य प्रतिशत में नहीं है।

 
ispercentage(7.5%);       // true
ispercentage(url(...));   // false
ispercentage(keyword);    // false
ispercentage(1234);       // false
ispercentage(24px);       // false
ispercentage(#fff);       // false
ispercentage(red) ;       // false
ispercentage("variable"); // false
9

isunit

यह रिटर्न सच अगर एक मूल्य के पैरामीटर के रूप में प्रदान की निर्दिष्ट इकाइयों में एक नंबर है या यह वापस आ जाएगी झूठी यदि मान निर्दिष्ट इकाइयों में कोई अंक नहीं है।

 
isunit(10px, px);       // true
isunit(5rem, rem);      // true
isunit(7.8%, '%');      // true
isunit(2.2%, px);       // false
isunit(24px, rem);      // false
isunit(48px, "%");      // false
isunit(1234, em);       // false
isunit(#fff, pt);       // false
isunit("mm", mm);       // false
10

isruleset

यह मान के रूप में पैरामीटर लेता है और सही लौटाता है , यदि मान एक नियम या गलत है।

 
@rules: {
   color: green;
}

isruleset(@rules);      // true
isruleset(1234);        // false
isruleset(24px);        // false
isruleset(7.8%);        // false
isruleset(#fff);        // false
isruleset(blue);        // false
isruleset("variable");  // false
isruleset(keyword);     // false
isruleset(url(...));    // false

विवरण

लेस अलग-अलग तरीकों से रंगों को बदलने और हेरफेर करने के लिए उपयोगी रंग फ़ंक्शन की संख्या प्रदान करता है। लेस नीचे दी गई तालिका में दिखाए गए अनुसार कुछ रंग परिभाषा कार्यों का समर्थन करती है -

अनु क्रमांक। समारोह विवरण उदाहरण
1

rgb

यह लाल, हरे और नीले मूल्यों से रंग बनाता है। इसके निम्नलिखित पैरामीटर हैं -

  • red - इसमें 0 - 255 के बीच पूर्णांक या 0 - 100% के बीच प्रतिशत होता है।

  • green - इसमें 0 - 255 के बीच पूर्णांक या 0 - 100% के बीच प्रतिशत होता है।

  • blue - इसमें 0 - 255 के बीच पूर्णांक या 0 - 100% के बीच प्रतिशत होता है।

 
rgb(220,20,60)

यह आरजीबी मूल्यों के साथ रंग को रूपांतरित करता है -

#dc143c
2

rgba

यह लाल, हरे, नीले और अल्फा मूल्यों से रंग निर्धारित करता है। इसके निम्नलिखित पैरामीटर हैं -

  • red - इसमें 0 - 255 के बीच पूर्णांक या 0 - 100% के बीच प्रतिशत होता है।

  • green - इसमें 0 - 255 के बीच पूर्णांक या 0 - 100% के बीच प्रतिशत होता है।

  • blue - इसमें 0 - 255 के बीच पूर्णांक या 0 - 100% के बीच प्रतिशत होता है।

  • alpha - इसमें 0 - 1 के बीच की संख्या या 0 - 100% के बीच प्रतिशत होता है।

 
rgba(220,20,60, 0.5)

यह आरजीबी मूल्यों के साथ रंग वस्तु को रूपांतरित करता है -

rgba(220, 20, 60, 0.5)
3

argb

यह रंग के हेक्स प्रतिनिधित्व को परिभाषित करता है #AARRGGBBप्रारूप। यह निम्नलिखित पैरामीटर का उपयोग करता है -

  • color - यह रंग वस्तु को निर्दिष्ट करता है।

 
argb(rgba(176,23,31,0.5))

यह argb रंग के रूप में लौटाता है -

#80b0171f
4

hsl

यह रंग को रंग, संतृप्ति और लपट के मूल्यों से उत्पन्न करता है। इसके निम्नलिखित पैरामीटर हैं -

  • hue - इसमें 0 - 360 के बीच पूर्णांक होता है जो डिग्री का प्रतिनिधित्व करता है।

  • saturation - इसमें 0 - 1 के बीच की संख्या या 0 - 100% के बीच प्रतिशत होता है।

  • lightness - इसमें 0 - 1 के बीच की संख्या या 0 - 100% के बीच प्रतिशत होता है।

 
hsl(120,100%, 50%)

यह एचएसएल मानों का उपयोग करते हुए रंग वस्तु लौटाता है -

#00ff00
5

hsla

यह रंग को रंग, संतृप्ति, लपट और अल्फा मूल्यों से उत्पन्न करता है। इसके निम्नलिखित पैरामीटर हैं -

  • hue - इसमें 0 - 360 के बीच पूर्णांक होता है जो डिग्री का प्रतिनिधित्व करता है।

  • saturation - इसमें 0 - 1 के बीच की संख्या या 0 - 100% के बीच प्रतिशत होता है।

  • lightness - इसमें 0 - 1 के बीच की संख्या या 0 - 100% के बीच प्रतिशत होता है।

  • alpha - इसमें 0 - 1 के बीच की संख्या या 0 - 100% के बीच प्रतिशत होता है।

 
hsla(0,100%,50%,0.5)

यह HSLA मानों का उपयोग करते हुए रंग वस्तु को निर्दिष्ट करता है -

rgba(255, 0, 0, 0.5);
6

hsv

यह रंग को रंग, संतृप्ति और मूल्य मूल्यों से पैदा करता है। इसमें निम्नलिखित पैरामीटर हैं -

  • hue - इसमें 0 - 360 के बीच पूर्णांक होता है जो डिग्री का प्रतिनिधित्व करता है।

  • saturation - इसमें 0 - 1 के बीच की संख्या या 0 - 100% के बीच प्रतिशत होता है।

  • value - इसमें 0 - 1 के बीच की संख्या या 0 - 100% के बीच प्रतिशत होता है।

 
hsv(80,90%,70%)

यह hsv मूल्यों के साथ रंग वस्तु को रूपांतरित करता है -

#7db312
7

hsva

यह रंग से रंग, संतृप्ति, मूल्य और अल्फा मान पैदा करता है। यह निम्नलिखित मापदंडों का उपयोग करता है -

  • hue - इसमें 0 - 360 के बीच पूर्णांक होता है जो डिग्री का प्रतिनिधित्व करता है।

  • saturation - इसमें 0 - 1 के बीच की संख्या या 0 - 100% के बीच प्रतिशत होता है।

  • value - इसमें 0 - 1 के बीच की संख्या या 0 - 100% के बीच प्रतिशत होता है।

  • alpha - इसमें 0 - 1 के बीच की संख्या या 0 - 100% के बीच प्रतिशत होता है।

 
hsva(80,90%,70%,0.6)

यह hsva मूल्यों के साथ रंग वस्तु को निर्दिष्ट करता है -

rgba(125, 179, 18, 0.6)

इस अध्याय में, हम LESS में कलर चैनल फंक्शंस के महत्व को समझेंगे। LESS कुछ इन-बिल्ट फ़ंक्शंस का समर्थन करता है जो एक चैनल के बारे में मूल्य निर्धारित करते हैं। चैनल ने रंग परिभाषा के आधार पर मूल्य निर्धारित किया। एचएसएल रंगों में ह्यू, संतृप्ति और लपट चैनल है और आरजीबी रंग में लाल, हरा और नीला चैनल है। निम्न तालिका सभी रंग चैनल फ़ंक्शन को सूचीबद्ध करती है -

अनु क्रमांक। समारोह विवरण उदाहरण
1

hue

एचएसएल रंग अंतरिक्ष में, ह्यू चैनल को रंग वस्तु से निकाला जाता है।

 
background: hue(hsl(75, 90%, 30%));

यह सीएसएस में संकलित है जैसा कि नीचे दिखाया गया है -

background: 75;
2

saturation

एचएसएल रंग अंतरिक्ष में, संतृप्ति चैनल को रंग वस्तु से निकाला जाता है।

 
background: saturation(hsl(75, 90%, 30%));

यह सीएसएस में संकलित है जैसा कि नीचे दिखाया गया है -

background: 90%;
3

lightness

एचएसएल कलर स्पेस में, लाइटनेस चैनल को कलर ऑब्जेक्ट से निकाला जाता है।

 
background: lightness(hsl(75, 90%, 30%));

यह सीएसएस में संकलित है जैसा कि नीचे दिखाया गया है -

background: 30%;
4

hsvhue

HSV रंग स्थान में, ह्यू चैनल को कलर ऑब्जेक्ट से निकाला जाता है।

 
background: hsvhue(hsv(75, 90%, 30%));

यह सीएसएस में संकलित है जैसा कि नीचे दिखाया गया है -

background: 75;
5

hsvsaturation

एचएसएल रंग अंतरिक्ष में, संतृप्ति चैनल को रंग वस्तु से निकाला जाता है।

 
background: hsvsaturation(hsv(75, 90%, 30%));

यह सीएसएस में संकलित है जैसा कि नीचे दिखाया गया है -

background: 90%;
6

hsvvalue

एचएसएल रंग अंतरिक्ष में, मूल्य चैनल को रंग वस्तु से निकाला जाता है।

 
background: hsvvalue(hsv(75, 90%, 30%));

यह सीएसएस में संकलित है जैसा कि नीचे दिखाया गया है -

background: 30%;
7

red

लाल चैनल को रंग वस्तु से निकाला जाता है।

 
background: red(rgb(5, 15, 25));

यह सीएसएस में संकलित है जैसा कि नीचे दिखाया गया है -

background: 5;
8

green

ग्रीन चैनल को कलर ऑब्जेक्ट से निकाला जाता है।

 
background: green(rgb(5, 15, 25));

यह सीएसएस में संकलित है जैसा कि नीचे दिखाया गया है -

background: 15;
9

blue

ब्लू चैनल को कलर ऑब्जेक्ट से निकाला जाता है।

 
background: blue(rgb(5, 15, 25));

यह सीएसएस में संकलित है जैसा कि नीचे दिखाया गया है -

background: 25;
10

alpha

अल्फा चैनल को कलर ऑब्जेक्ट से निकाला जाता है।

 
background: alpha(rgba(5, 15, 25, 1.5));

यह सीएसएस में संकलित है जैसा कि नीचे दिखाया गया है -

background: 2;
1 1

luma

luma मूल्य एक रंग वस्तु से गणना की जाती है।

 
background: luma(rgb(50, 250, 150));

यह सीएसएस में संकलित है जैसा कि नीचे दिखाया गया है -

background: 71.2513323%;
12

luminance

गामा सुधार के बिना luma मूल्य की गणना की जाती है।

 
background: luminance(rgb(50, 250, 150));

यह सीएसएस में संकलित है जैसा कि नीचे दिखाया गया है -

background: 78.53333333%;

विवरण

लेस अलग-अलग तरीकों से रंगों को बदलने और हेरफेर करने के लिए उपयोगी संचालन कार्यों की संख्या प्रदान करता है और एक ही इकाइयों में पैरामीटर लेता है। नीचे दिए गए तालिका में दिखाए गए अनुसार LESS कुछ कलर ऑपरेशन फ़ंक्शंस का समर्थन करता है -

अनु क्रमांक। निर्देश और विवरण
1 तर

यह तत्व में एक रंग की तीव्रता या संतृप्ति को बदलता है।
2 desaturate

यह तत्व में एक रंग की तीव्रता या संतृप्ति को कम करता है।
3 हल्का

यह तत्व में एक रंग की लपट को बढ़ाता है।
4 गहरा करें

यह तत्व में एक रंग की तीव्रता या संतृप्ति को बदलता है।
5 में फीका

यह चयनित तत्वों के लिए अस्पष्टता बढ़ाता है।
6 फेड आउट

यह चयनित तत्वों के लिए अस्पष्टता कम कर देता है।
7 मुरझाना

इसका उपयोग चयनित तत्वों के लिए एक रंग की पारदर्शिता निर्धारित करने के लिए किया जाता है।
8 स्पिन

इसका उपयोग चयनित तत्वों के लिए एक रंग के कोण को घुमाने के लिए किया जाता है।
9 मिक्स

यह अपारदर्शिता के साथ दो रंगों को मिलाता है।
10 टिंट

यह रंग को सफेद के साथ मिलाता है क्योंकि आप रंग के अनुपात को कम करते हैं।
1 1 छाया

यह रंग के साथ काले रंग को मिलाता है क्योंकि आप रंग के अनुपात को कम करते हैं।
12 ग्रेस्केल

यह चयनित तत्वों में एक रंग से संतृप्ति को अलग करता है।
13 इसके विपरीत

यह तत्व में रंगों के लिए विपरीत सेट करता है।

इस अध्याय में, हम समझेंगे Color Blending Functionsकम में। ये फोटोशॉप, पटाखे या जीआईएमपी जैसे छवि संपादकों में उपयोग किए जाने वाले ऑपरेशन हैं, जो आपके सीएसएस रंगों को आपकी छवियों से मेल खाते हैं।

निम्न तालिका LESS में प्रयुक्त रंग सम्मिश्रण कार्यों को दिखाती है।

अनु क्रमांक। कार्य और विवरण
1 गुणा

यह दो रंगों को गुणा करता है और परिणामी रंग देता है।
2 स्क्रीन

यह दो रंग लेता है और एक उज्जवल रंग देता है। यह गुणा फ़ंक्शन के विपरीत काम करता है ।
3 उपरिशायी

यह गुणा और स्क्रीन के प्रभाव को मिलाकर परिणाम उत्पन्न करता है ।
4 नरम रोशनी

यह ओवरले के समान काम करता है लेकिन यह केवल रंग के एक हिस्से का उपयोग करता है, जो दूसरे रंग को नरम-हाइलाइट करता है।
5 कठिन प्रकाश

यह ओवरले के समान काम करता है लेकिन रंगों की भूमिका उलट है।
6 अंतर

यह पहले इनपुट रंग से दूसरे इनपुट रंग को घटाता है।
7 बहिष्करण

यह अंतर फ़ंक्शन के समान काम करता है लेकिन कम विपरीत के साथ।
8 औसत

यह प्रति-चैनल (RGB) आधार पर दो इनपुट रंगों की औसत गणना करता है।
9 नकार

यह अंतर फ़ंक्शन के विपरीत काम करता है , जो पहले रंग को दूसरे रंग से घटाता है।

कमांड लाइन का उपयोग करके, हम .css के लिए .less फ़ाइल संकलित कर सकते हैं ।

विश्व स्तर पर उपयोग के लिए कम स्थापित करना

निम्न कमांड का उपयोग एनएमसी के साथ एसआरसी (नोड पैकेज मैनेजर) को स्थापित करने के लिए किया जाता है ताकि ग्लोब को उपलब्ध कराया जा सके।

npm install less -g

आप पैकेज नाम के बाद एक विशिष्ट संस्करण भी जोड़ सकते हैं। उदाहरण के लिएnpm install [email protected] -g

नोड विकास के लिए स्थापित करना

निम्न कमांड का उपयोग आपके प्रोजेक्ट फ़ोल्डर में लेसक के नवीनतम संस्करण को स्थापित करने के लिए किया जाता है ।

npm i less -save-dev

यह आपके प्रोजेक्ट पैकेज में भी निर्भरता में जोड़ा जाता है।

बीटा के कम रिलीज

इसे बीटा के रूप में टैग किया जाता है जब lessc संरचना को प्रकाशित किया जाता है npmयहां, नई कार्यक्षमता को समय-समय पर विकसित किया जाता है। वर्तमान संस्करण को पाने के लिए कम -v का उपयोग किया जाता है।

एनपीसी के एक अप्रकाशित विकास संस्करण को स्थापित करना

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

सर्वर-साइड और कमांड लाइन उपयोग

bin/lesscरिपॉजिटरी में बाइनरी शामिल है। यह विंडोज, ओएस एक्स और नोडज के साथ * निक्स पर काम करता है।

कमांड लाइन उपयोग

से इनपुट पढ़ा जाता है stdin जब स्रोत डैश या हाइफ़न (-) पर सेट होता है।

lessc [option option = parameter ...]  [destination]

उदाहरण के लिए, हम संकलन कर सकते हैं .less सेवा .css निम्नलिखित कमांड का उपयोग करके -

lessc stylesheet.less stylesheet.css

हम संकलन कर सकते हैं .less सेवा .css द्वारा और निम्न आदेश का उपयोग करके परिणाम को छोटा करें।

lessc -x stylesheet.less stylesheet.css

विकल्प

कमांड लाइन के उपयोग में उपयोग किए जाने वाले विकल्पों की सूची निम्नलिखित है -

अनु क्रमांक। विकल्प और विवरण आदेश
1

Help

उपलब्ध विकल्पों के साथ मदद संदेश प्रदर्शित होता है।

 
lessc -help
lessc -h
2

Include Paths

इसमें पुस्तकालय के लिए उपलब्ध रास्ते शामिल हैं। इन पथों को कम फ़ाइलों में बस और अपेक्षाकृत संदर्भित किया जा सकता है। खिड़कियों में पथ बृहदान्त्र (:) या अर्धविराम (;) द्वारा अलग किए जाते हैं।

 
lessc --include-path = PATH1;PATH2
3

Makefile

यह आउटपुट के रूप में stdout करने के लिए एक makefile आयात निर्भरता सूची बनाता है।

 
lessc -M
lessc --depends
4

No Color

यह रंगीन आउटपुट को अक्षम करता है।

 
lessc --no-color
5

No IE Compatibility

यह IE संगतता जाँच अक्षम करता है।

 
lessc --no-ie-compat
6

Disable Javascript

यह कम फ़ाइलों में जावास्क्रिप्ट अक्षम करता है।

 
lessc --no-js
7

Lint

यह सिंटैक्स की जाँच करता है और बिना किसी आउटपुट के त्रुटि की रिपोर्ट करता है।

 
lessc --lint
lessc -l
8

Silent

यह त्रुटि संदेशों के प्रदर्शन को जबरन रोकता है।

 
lessc --silent
lessc -s
9

Strict Imports

यह आयात का मूल्यांकन करता है।

 
lessc --strict-imports
10

Allow Imports from Insecure HTTPS Hosts

यह असुरक्षित HTTPS होस्ट से आयात करता है।

 
lessc --insecure
1 1

Version

यह संस्करण संख्या प्रदर्शित करता है और बाहर निकलता है।

 
lessc -version
lessc -v
12

Compress

यह व्हाट्सएप को हटाने और आउटपुट को संपीड़ित करने में मदद करता है।

 
lessc -x
lessc --compress
13

Source Map Output Filename

यह कम में सोर्समैप उत्पन्न करता है। यदि सोर्समैप विकल्प को फ़ाइल नाम के बिना परिभाषित किया गया है, तो यह स्रोत के रूप में कम फ़ाइल नाम के साथ एक्सटेंशन मैप का उपयोग करेगा।

 
lessc --source-map
lessc -source-map = file.map
14

Source Map Rootpath

रूटपाथ निर्दिष्ट है और इसे सोर्समैप के अंदर कम फ़ाइल पथों में जोड़ा जाना चाहिए और मैप फ़ाइल में भी दिखाया जाना चाहिए जो आपके आउटपुट सीएसएस में निर्दिष्ट है।

 
lessc --source-map-rootpath = dev-files/
15

Source Map Basepath

एक पथ निर्दिष्ट किया गया है जिसे आउटपुट पथों से हटाया जाना है। बसपाथ रूटपथ विकल्प के विपरीत है।

 
lessc --source-map-basepath = less-files/
16

Source Map Less Inline

सभी कम फ़ाइलों को सोर्समैप में शामिल किया जाना चाहिए।

 
lessc --source-map-less-inline
17

Source Map Map Inline

यह निर्दिष्ट करता है कि आउटपुट css में मैप फ़ाइल इनलाइन होनी चाहिए।

 
lessc --source-map-map-inline
18

Source Map URL

URL को css में मैप फ़ाइल में पॉइंट्स को ओवरराइड करने की अनुमति है।

 
lessc --source-map-url = ../my-map.json
19

Rootpath

यह सापेक्ष आयात और यूआरएल में URL पुनर्लेखन के लिए पथ निर्धारित करता है।

 
lessc -rp=resources/
lessc --rootpath=resources/
20

Relative URLs

आयातित फ़ाइलों में, URL फिर से लिखा जाता है ताकि URL हमेशा आधार फ़ाइल के सापेक्ष हो।

 
lessc -ru
lessc --relative-urls
21

Strict Math

यह आपके सीएसएस में सभी मैथ फंक्शन को प्रोसेस करता है। डिफ़ॉल्ट रूप से, यह बंद है।

 
lessc -sm = on
lessc --strict-math = on
22

Strict Units

यह मिश्रित इकाइयों को अनुमति देता है।

 
lessc -su = on
lessc --strict-units = on
23

Global Variable

एक चर परिभाषित किया गया है जिसे फ़ाइल द्वारा संदर्भित किया जा सकता है।

 
lessc --global-var = "background = green"
24

Modify Variable

यह वैश्विक परिवर्तनीय विकल्प के विपरीत है; यह आपकी कम फ़ाइल के अंत में घोषणा को आगे बढ़ाता है।

 
lessc --modify-var = "background = green"
25

URL Arguments

प्रत्येक URL पर जाने के लिए, एक तर्क निर्दिष्ट करने की अनुमति है।

 
lessc --url-args = "arg736357"
26

Line Numbers

इनलाइन स्रोत-मैपिंग उत्पन्न होता है।

 
lessc --line-numbers = comments
lessc --line-numbers = mediaquery
lessc --line-numbers = all
27

Plugin

यह प्लगइन को लोड करता है।

 
lessc --clean-css
lessc --plugin = clean-css = "advanced"

ब्राउज़र में कम का उपयोग तब किया जाता है जब आप कम फ़ाइल को गतिशील रूप से संकलित करना चाहते हैं जब जरूरत होती है और सर्वर पर नहीं होती है; इसका कारण यह है कि कम एक बड़ी जावास्क्रिप्ट फ़ाइल है।

शुरुआत करने के लिए, हमें ब्राउज़र में LESS का उपयोग करने के लिए LESS स्क्रिप्ट को जोड़ना होगा -

<script src = "less.js"></script>

पृष्ठ पर शैली टैग खोजने के लिए, हमें पृष्ठ पर निम्नलिखित पंक्ति को जोड़ना होगा। यह संकलित सीएसएस के साथ स्टाइल टैग भी बनाता है।

<link href = "styles.less" rel = "stylesheet/less" type = "text/css"/>

विकल्प सेट करना

स्क्रिप्ट टैग से पहले, प्रोग्रामेटिक रूप से कम ऑब्जेक्ट पर विकल्प सेट किए जा सकते हैं। यह कम और प्रारंभिक लिंक टैग के सभी प्रोग्रामेटिक उपयोग को प्रभावित करेगा।

उदाहरण के लिए, हम विकल्प को निम्नानुसार सेट कर सकते हैं -

<script>
   less = {
      env: "development"
   };
</script>

<script src = "less.js"></script>

हम स्क्रिप्ट टैग पर अन्य प्रारूप में भी विकल्प निर्धारित कर सकते हैं जैसा कि नीचे दिया गया है -

<script>
   less = {
      env: "development"
   };
</script>

<script src = "less.js" data-env = "development"></script>

आप इन विकल्पों को लिंक टैग में भी जोड़ सकते हैं।

<link data-dump-line-numbers = "all" 
   data-global-vars = '{ "var": "#fff", "str": "\"quoted\"" }' 
   rel = "stylesheet/less" type = "text/css" href = "less/style.less">

गुण विकल्पों के लिए जिन बिंदुओं पर विचार किया जाना आवश्यक है वे हैं -

  • window.less <स्क्रिप्ट टैग <लिंक टैग महत्व स्तर हैं।

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

  • गैर-स्ट्रिंग मान वाले डेटा विशेषताएँ JSON मान्य होनी चाहिए।

देखो मोड

वॉच मोड को विकास के लिए एनवी विकल्प सेट करके और कम.वॉज़ फ़ाइल के जुड़ने के बाद कम (वॉच) को कॉल करके सक्षम किया जा सकता है। यदि आप चाहते हैं कि वॉच मोड अस्थायी आधार पर सक्षम हो, तो URL में # देखें!

<script>less = { env: 'development'};</script>
<script src = "less.js"></script>
<script>less.watch();</script>

परिवर्तनशील चर

LESS वैरिएबल का रन टाइम संशोधन सक्षम है। नया मान कहे जाने पर LESS फ़ाइल को फिर से जोड़ दिया जाता है। निम्न कोड संशोधित चर का मूल उपयोग दिखाता है -

less.modifyVars({
   '@buttonFace': '#eee',
   '@buttonText': '#fff'
});

डिबगिंग

हम विकल्प जोड़ सकते हैं ! डंपलाइनन्यूल्स: ऊपर बताए अनुसार url या डंपलाइनन्यूट्स विकल्प के लिए मीडियाक्वेरी । Mediaquery विकल्प fireless के साथ प्रयोग किया जा सकता है (यह कम-उत्पन्न सीएसएस शैलियों के मूल कम फ़ाइल नाम और लाइन नंबर प्रदर्शित करते हैं।)

विकल्प

स्क्रिप्ट फ़ाइल को लोड करने से पहले कम.जेएस, विकल्प वैश्विक कम ऑब्जेक्ट में सेट करना होगा ।

<script>
   less = {
      env: "development",
      logLevel: 2,
      async: false,
      fileAsync: false,
      poll: 1000,
      functions: {},
      dumpLineNumbers: "comments",
      relativeUrls: false,
      globalVars: {
         var1: '"string value"',
         var2: 'regular value'
      },
      rootpath: ":/a.com/"
   };
</script>

<script src = "less.js"></script>

  • async- यह एक बूलियन प्रकार है। आयातित फ़ाइलों का अनुरोध किया जाता है कि विकल्प async के साथ है या नहीं। डिफ़ॉल्ट रूप से, यह गलत है।

  • dumpLineNumbers- यह एक स्ट्रिंग प्रकार है। आउटपुट सीएसएस फ़ाइल में, स्रोत लाइन की जानकारी तब जोड़ी जाती है जब डंपलाइनन्यूज़ सेट हो जाता है। यह विशेष नियम से डिबगिंग में मदद करता है।

  • env- यह एक स्ट्रिंग प्रकार है। Env विकास या उत्पादन पर चल सकता है। जब दस्तावेज़ URL से शुरू होता है तो विकास स्वचालित रूप से सेट हो जाता हैfile:// या यह आपके स्थानीय मशीन में मौजूद है।

  • errorReporting - जब संकलन विफल हो जाता है, तो त्रुटि रिपोर्टिंग विधि सेट की जा सकती है।

  • fileAsync- यह एक बूलियन प्रकार है। जब कोई पेज फ़ाइल प्रोटोकॉल के साथ मौजूद होता है तो यह अनुरोध कर सकता है कि एसिंक्रोनस रूप से आयात किया जाए या नहीं।

  • functions - यह ऑब्जेक्ट प्रकार है।

  • logLevel- यह एक नंबर का प्रकार है। यह जावास्क्रिप्ट कंसोल में लॉगिंग स्तर प्रदर्शित करता है।

    • 2: सूचना और त्रुटियाँ

    • 1: त्रुटियां

    • 0: कुछ भी नहीं

  • poll- घड़ी मोड में, चुनावों के बीच मिलीसेकंड में समय प्रदर्शित होता है। यह एक पूर्णांक प्रकार है; डिफ़ॉल्ट रूप से, यह 1000 पर सेट है।

  • relativeUrls- यूआरएल रिश्तेदार होने के लिए समायोजित; डिफ़ॉल्ट रूप से, यह विकल्प गलत है। इसका मतलब है कि URL पहले से ही कम फ़ाइल प्रविष्टि के सापेक्ष हैं। यह एक बूलियन प्रकार है।

  • globalVars- कोड में वैश्विक चर की सूची सम्मिलित करता है। स्ट्रिंग प्रकार चर को उद्धरणों में शामिल किया जाना चाहिए

  • modifyVars- यह ग्लोबल वैरिएबल ऑप्शन के विपरीत है। यह आपकी कम फ़ाइल के अंत में घोषणा को आगे बढ़ाता है।

  • rootpath - यह हर URL संसाधन की शुरुआत में पथ सेट करता है।

  • useFileCache- प्रति सत्र फ़ाइल कैश का उपयोग करता है। कम फ़ाइलों में कैश को RevVars को कॉल करने के लिए उपयोग किया जाता है, जहां सभी कम फ़ाइलों को फिर से प्राप्त नहीं किया जाएगा।

LESS क्रॉस-ब्राउज़र फ्रेंडली है। यह Google क्रोम, मोज़िला फ़ायरफ़ॉक्स, सफारी और इंटरनेट एक्सप्लोरर जैसे आधुनिक ब्राउज़रों का समर्थन करता है और सीएसएस तत्वों का पुन: उपयोग करने की अनुमति देता है और समान शब्दार्थ के साथ LESS कोड लिखता है। क्लाइंट पक्ष पर LESS का उपयोग करते समय और किसी भी कॉस्मेटिक समस्या से बचने के लिए जावास्क्रिप्ट प्रदर्शित करते समय आपको प्रदर्शन निहितार्थ के बारे में सावधान रहना चाहिए

  • वर्तनी त्रुटि,
  • रंग बदलता है,
  • Texture
  • Look
  • लिंक, आदि

वेबसाइट के प्रदर्शन स्तर को बेहतर बनाने के लिए सर्वर की ओर LESS फाइलों को संकलित करें।

PhantomJS फ़ंक्शन. prototype.bind फ़ंक्शन को लागू नहीं करता है , इसलिए आपको PhantomJS के तहत चलने के लिए es5 शिम जावास्क्रिप्ट इंजन का उपयोग करने की आवश्यकता है । उपयोगकर्ता थीम को प्रभावित करने के लिए चर के साथ समायोजन कर सकते हैं और वास्तविक समय में उत्पादन में ग्राहक पक्ष LESS का उपयोग करके दिखा सकते हैं।

यदि आप पुराने ब्राउज़रों में LESS चलाना चाहते हैं, तो es-5 शिम जावास्क्रिप्ट इंजन का उपयोग करें, जो LESS का समर्थन करने वाली जावास्क्रिप्ट विशेषताओं को जोड़ता है। आप JSON.parse का उपयोग करके स्क्रिप्ट या लिंक टैग पर विशेषताओं का उपयोग कर सकते हैं जो ब्राउज़र द्वारा समर्थित होना चाहिए।

इस अध्याय में, हम समझेंगे कि साइट की कार्यक्षमता का विस्तार करने के लिए एक प्लगइन कैसे अपलोड किया जा सकता है। प्लगइन्स का उपयोग आपके काम को आसान बनाने के लिए किया जा सकता है।

कमांड लाइन

कमांड लाइन का उपयोग करके प्लगइन स्थापित करने के लिए, आपको सबसे पहले लोस्क प्लगइन स्थापित करना होगा। शुरुआत में कम-प्लगइन का उपयोग करके प्लगइन स्थापित किया जा सकता है । निम्न कमांड लाइन आपको क्लीन-सीएसएस प्लगइन स्थापित करने में मदद करेगी -

npm install less-plugin-clean-css

सीधे, आप निम्न कमांड का उपयोग करके स्थापित प्लगइन का उपयोग कर सकते हैं -

lessc --plugin = path_to_plugin = options

कोड में एक प्लगइन का उपयोग करना

नोड में, प्लगइन की आवश्यकता होती है और यह एक सरणी में एक विकल्प प्लगइन के रूप में कम करने के लिए पास होता है।

var pluginName = require("pluginName");
less.render(myCSS, { plugins: [pluginName] })
   .then(function(output) {
   },
   function(error) {
   });

ब्राउज़र में

कम.जेएस स्क्रिप्ट से पहले, प्लगइन लेखक को पेज में जावास्क्रिप्ट फ़ाइल को शामिल करना चाहिए।

<script src = "plugin.js"></script>

<script>
less = {
   plugins: [plugin]
};
</script>

<script src = "less.min.js"></script>

कम प्लगइन्स की सूची

निम्न तालिका LESS में उपलब्ध प्लगइन्स को सूचीबद्ध करती है।

पोस्टप्रोसेसर / फ़ीचर प्लगइन्स

अनु क्रमांक। प्लगइन्स और विवरण
1 Autoprefixer

इसका उपयोग LESS से अनुवाद के बाद CSS में उपसर्ग जोड़ने के लिए किया जाता है।
2 CSScomb

यह आपकी स्टाइलशीट के रखरखाव को बेहतर बनाने में मदद करता है।
3 स्वच्छ सीएसएस

यह LESS से CSS आउटपुट को छोटा करता है।
4 CSSWring

यह LESS से CSS आउटपुट को संपीड़ित या छोटा करता है।
5 सीएसएस-फ्लिप

इसका उपयोग CSS को बाएं से दाएं (LTR) या दाएं से बाएं (RTL) उत्पन्न करने के लिए किया जाता है।
6 कार्यों

यह LESS में ही LESS का कार्य लिखता है।
7 ग्लोब

इसका उपयोग कई फ़ाइलों को आयात करने के लिए किया जाता है।
8 समूह-सीएसएस मीडिया-प्रश्नों

यह कम के लिए पोस्ट-प्रोसेसिंग करता है।
9 इनलाइन यूआरएल

URL को डेटा uri में स्वचालित रूप से कनवर्ट करता है।
10 NPM आयात

यह कम के लिए npm पैकेज से आयात करता है।
1 1 pleeease

इसका उपयोग कम पोस्टप्रोसेस करने के लिए किया जाता है।
12 rtl

Ltr को ltr (बाएं-से-दाएं) से rtl (दाएं-बाएं) से उलटा किया जाता है।

फ्रेमवर्क / लाइब्रेरी इंपोर्टर्स

अनु क्रमांक। आयातकों और विवरण
1 बूटस्ट्रैप

बूटस्ट्रैप लेस कोड कस्टम लेस कोड से पहले आयात किया जाता है।
2 बोवर संकल्प

LESS फाइलें Bower संकुल से आयात की जाती हैं।
3 कम के लिए कार्डिनल सीएसएस

कस्टम LESS कोड से पहले, कार्डिनल के लिए LESS कोड आयात किया जाता है।
4 फ्लेक्सबॉक्स ग्रिड

अधिकांश सामान्य रूप से आयातित फ्रेमवर्क या लाइब्रेरी आयातक।
5 लचीली ग्रिड प्रणाली

यह लचीले ग्रिड सिस्टम का आयात करता है।
6 ईओण का

यह आयनिक ढांचे का आयात करता है।
7 Lesshat

यह हैशट मिक्सिन का आयात करता है।
8 कंकाल

यह कंकाल कम कोड आयात करता है।

फंक्शन लाइब्रेरी

अनु क्रमांक। आयातकों और विवरण
1 उन्नत रंग-कार्यों

इसका उपयोग अधिक विषम रंगों को खोजने के लिए किया जाता है।
2 cubehelix

1 के गामा सुधार मूल्य का उपयोग करके, क्यूबेलिक्स फ़ंक्शन दो रंगों के बीच एक रंग वापस कर सकता है।
3 सूचियों

यह हेरफेर फ़ंक्शन लाइब्रेरी को सूचीबद्ध करता है।

प्लगइन लेखकों के लिए

LESS एक लेखक को कम के साथ संयोजन करने की अनुमति देता है।

{
   install: function(less, pluginManager) {
   },
   
   setOptions: function(argumentString) {
   },
   
   printUsage: function() {
   },
   
   minVersion: [2, 0, 0]
}

  • pluginManager एक धारक प्रदान करता है जो फ़ाइल प्रबंधक, पोस्ट प्रोसेसर या आगंतुकों को जोड़ सकता है।

  • setOptions समारोह स्ट्रिंग गुजरता है।

  • printUsage फ़ंक्शन का उपयोग विकल्पों को समझाने के लिए किया जाता है।

LESS में प्रोग्रामेटिक उपयोग का मुख्य बिंदु कम है। यह फ़ंक्शन LESS में निम्न प्रारूप का उपयोग करता है -

less.render(input_data, options)
.then(function(output) {
   //code here
},
   
function(error) {
});

फ़ंक्शन को निम्न तरीके से भी लिखा जा सकता है -

less.render(css, options, function(error, output) {})

विकल्प एक वैकल्पिक तर्क जो एक रिटर्न हैpromise जब आप कॉलबैक निर्दिष्ट नहीं करते हैं और वापस लौटता है promiseजब आप कॉलबैक निर्दिष्ट करते हैं। आप फ़ाइल को स्ट्रिंग में पढ़कर प्रदर्शित कर सकते हैं और मुख्य फ़ाइल का फ़ाइल नाम फ़ील्ड सेट कर सकते हैं।

SourceMap विकल्प जैसे सेट sourcemap विकल्प की अनुमति देता है sourceMapURL , sourceMapBasepath , sourceMapRootpath , outputSourceFiles और sourceMapFileInline । यहाँ जिस बिंदु पर विचार करने की आवश्यकता है वह यह है कि sourceMap विकल्प कम के लिए उपलब्ध नहीं है। js.

आप नीचे दिए गए प्रारूप में दिखाए गए अनुसार श्रोता को जोड़कर लॉग तक पहुँच प्राप्त कर सकते हैं -

less.logger.addListener({
   debug: function(message) {
   },
   
   info: function(message) {
   },
   
   warn: function(message) {
   },
   
   error: function(message) {
   }
});

उपरोक्त परिभाषित कार्य वैकल्पिक हैं। यदि कोई त्रुटि प्रदर्शित होती है, तो वह त्रुटि को पास कर देगाcallback या promiseमें पेश less.render ।

इस अध्याय में, हम LESS में ऑनलाइन संकलक के महत्व को समझेंगे। ऑनलाइन कोड का उपयोग कम कोड को सीएसएस कोड में संकलित करने के लिए किया जाता है। ऑनलाइन संकलक उपकरण आसानी से सीएसएस कोड उत्पन्न करने में मदद करते हैं। निम्नलिखित ऑनलाइन कम संकलक उपलब्ध हैं -

  • winless.org/online-less-compiler

  • lesstester.com

  • dopefly.com/less-converte

  • lessphp.gpeasy.com/demo

  • leafo.net/lessphp/editor

  • estFiddle

ऑनलाइन वेब आईडीई / खेल के मैदान कम समर्थन के साथ

निम्न समर्थन के साथ उपलब्ध ऑनलाइन वेब आईडीई निम्नलिखित हैं।

अनु क्रमांक। ऑनलाइन वेब आईडीई और विवरण
1 CSSDeck लैब्स

यह एक ऐसी जगह है जहाँ आप आसानी से HTML, CSS, JS कोड वाले टेस्टकेस बना सकते हैं।
2

CodePen

यह फ्रंटएंड वेब के लिए एक खेल का मैदान है।
3 फिडल सलाद

यह एक ऐसी जगह है जहां आप पर्यावरण में एक मौजूदा कोड जोड़ सकते हैं।
4 जेएस बिन

यह जावास्क्रिप्ट और CSS कोड को मदद करता है।
5 jsFiddle

यह एक ऑनलाइन वेब एडिटर है।

इस अध्याय में, हम समझ जाएगा GUIs के लिए कम । आप अपने प्लेटफ़ॉर्म के लिए विभिन्न LESS टूल का उपयोग कर सकते हैं। के लिए कमांड लाइन के उपयोग और उपकरण इस पर क्लिक करें लिंक ।

निम्न तालिका जीयूआई संकलक को सूचीबद्ध करती है जो क्रॉस प्लेटफॉर्म का समर्थन करती है।

अनु क्रमांक। उपकरण और विवरण
1 क्रंच 2!

यह विंडोज, मैक और लिनक्स जैसे प्लेटफार्मों पर समर्थन करता है । यह एकीकृत संकलन के साथ संपादक प्रदान करता है।
2

Mixture

यह एक तेजी से प्रोटोटाइप और स्थिर साइट पीढ़ी उपकरण है जो डिजाइनरों और डेवलपर्स द्वारा उपयोग किया जाता है। यह त्वरित, कुशल है और आपके संपादक के साथ अच्छी तरह से काम करता है। यह एक साथ भयानक उपकरण और सर्वोत्तम प्रथाओं का संग्रह लाता है।
3 SimpLESS

यह एक न्यूनतर LESS संकलक है। यह ड्रैग, ड्रॉप और कम्पाइल फंक्शनलिटी प्रदान करता है। SimpLESS अपने CSS को प्रीफिक्सर का उपयोग करके उपसर्ग करने का समर्थन करता है जो SimpLESS की अनूठी विशेषता है। इसे टाइटेनियम प्लेटफॉर्म पर बनाया गया है।
4 कोअला

इसका उपयोग LESS, SASS और CoffeeScript संकलित करने के लिए किया जाता है। यह संकलित त्रुटि सूचना समर्थन और संकलन विकल्प समर्थन जैसी सुविधाएँ प्रदान करता है।

निम्न तालिका GUI कंपाइलरों को सूचीबद्ध करती है जो विंडोज प्लेटफॉर्म का समर्थन करते हैं।

अनु क्रमांक। उपकरण और विवरण
1 Prepros

यह एक उपकरण है जो LESS, SASS, कम्पास, स्टाइलस, जेड और कई और अधिक संकलन करता है।
2 winless

प्रारंभ में यह LESS.app का एक क्लोन था, इसकी कई सेटिंग्स हैं और अधिक सुविधा पूर्ण दृष्टिकोण लेता है। यह कमांड लाइन तर्कों के साथ शुरू करने का समर्थन करता है।

निम्न तालिका OS X प्लेटफ़ॉर्म का समर्थन करने वाले GUI कंपाइलरों को सूचीबद्ध करती है।

अनु क्रमांक। उपकरण और विवरण
1 CodeKit

t LESS.app का उत्तराधिकारी है और LASS को SASS, जेड, मार्कडाउन और कई अन्य प्रसंस्करण भाषाओं के बीच समर्थन करता है।
2 LiveReload

यह CSS को एडिट करता है और इमेज को तुरंत बदलता है। एसएएसएस, लेस, कॉफीस्क्रिप्ट और अन्य अच्छी तरह से काम करते हैं।

निम्न तालिका OS X प्लेटफ़ॉर्म का समर्थन करने वाले GUI कंपाइलरों को सूचीबद्ध करती है।

अनु क्रमांक। उपकरण और विवरण
1 Plessc

यह लोअर के लिए गुई फ्रंटेंड है। इसमें लॉग व्यूअर, ऑटो कंपाइल जैसे फीचर्स हैं, चुने हुए एडिटर और सोर्समैप सपोर्ट के साथ LESS फाइल खोलना।

इस अध्याय में, हम LESS में संपादकों और प्लगइन्स के महत्व को समझेंगे । एक संपादक एक प्रणाली या कार्यक्रम है जो उपयोगकर्ता को पाठ को संपादित करने की अनुमति देता है। प्लगइन सॉफ्टवेयर का एक टुकड़ा है जो साइट की कार्यक्षमता का विस्तार करने के लिए उपयोग किया जाता है।

आइए अब LESS के लिए संपादकों और IDEs पर चर्चा करें।

अनु क्रमांक। संपादकों और आईडीई और विवरण
1 की कमी!

यह विंडोज, मैक और लिनक्स जैसे क्रॉस-प्लेटफॉर्म का समर्थन करता है । यह एकीकृत संकलन के साथ संपादक प्रदान करता है।
2 माइंडस्केप वेब कार्यक्षेत्र

यह CoffeeScript, SASS, Compass और LESS एडिटिंग प्रदान करता है और विज़ुअल स्टूडियो में आधुनिक वेब विकास को आसान बनाता है।
3 NetBeans

यह एक ओपन-सोर्स जावा-आधारित आईडीई है। यह आपके डेस्कटॉप, मोबाइल और वेब अनुप्रयोगों के साथ-साथ HTML5, HTML और जावास्क्रिप्ट को शामिल करने वाले HTML अनुप्रयोगों के त्वरित विकास में मदद करता है।
4 TextMate

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

विम बंडल गतिशील स्टाइलशीट भाषा LESS के लिए इंडेंटिंग, हाइलाइटिंग और ऑटो पूरा करने जैसी कार्यक्षमताएं जोड़ता है।
6 Emacs

इसमें कम-सीएसएस-मॉडल होता है जो लेस सीएसएस के लिए एक एमएसीएस मोड प्रदान करता है (lesscss.org); Emacs कंपाइल-ऑन-सेव को सपोर्ट करता है।
7 जेटब्राइन्स वेबस्टॉर्म और फेपस्टॉर्म

WebStrom एक हल्का और शक्तिशाली आईडीई है। यह पूरी तरह से Node.js. के साथ जटिल ग्राहक-पक्ष और सर्वर विकास के लिए सुसज्जित है PhpStorm एक PHP IDE है, जो गहरी कोड समझ का समर्थन करता है, और सभी प्रमुख उपकरणों और चौखटों के लिए शीर्ष पायदान कोडिंग सहायता और समर्थन प्रदान करता है।
8 कोष्ठक

यह एक हल्का, शक्तिशाली और एक ओपन-सोर्स कोड संपादक है जो वेब डिजाइनरों और फ्रंट-एंड डेवलपर्स की मदद करता है।
9 CodeLobster

यह मुख्य रूप से PHP के लिए एक पोर्टेबल एकीकृत विकास वातावरण (IDE) है। यह HTML, CSS और JavaScript विकास का भी समर्थन करता है और Drupal, WordPress, Smarty, Joomla, JQuery, Facebook, Codeigniter, Yii और CakePHP के लिए प्लगइन्स उपलब्ध हैं।
10 काइनेटिकिंग आईडीई

यह एक त्वरित, स्वच्छ, हल्का और पोर्टेबल आईडीई है। यह एक पूर्ण आकार का विकास सूट है जो आपको स्मार्ट और तेज़ काम करने में मदद करता है।
1 1 nodeMirror

यह एक ओपन-सोर्स और आसानी से अनुकूलन योग्य आईडीई है। यह CodeMirror.net, pty.js और अन्य पुस्तकालयों का उपयोग करता है।
12 HTML- किट उपकरण

यह HTML5, CSS3, जावास्क्रिप्ट और अधिक के लिए एक आधुनिक वेब संपादक है। इसके साथ, आप आधुनिक मानकों के अनुरूप संपादक से परियोजनाओं को संपादित, पूर्वावलोकन, सत्यापित और प्रबंधित कर सकते हैं।

उदात्त पाठ 2 और 3

उदात्त पाठ निम्न तालिका में सूचीबद्ध के रूप में कम के लिए विभिन्न विकल्प प्रदान करता है -

अनु क्रमांक। विकल्प और विवरण
1 कम-उदात्त

उदात्त पाठ के लिए LESS सिंटैक्स स्निपेट्स के साथ .less फ़ाइलों के लिए सिंटैक्स हाइलाइटिंग प्रदान करता है ।
2 उदात्त-कम-से-सीएसएस

जब आप सहेजते हैं तो CSS को .lile फ़ाइल संकलित करने के लिए उदात्त पाठ 2 और 3 प्लगइन । इसकी जरूरत हैlessc पथ पर स्थापित है।
3 कम-निर्माण उदात्त

उदात्त पाठ 2 के लिए LESS बिल्ड सिस्टम, जो कम से कम और गैर-दोनों प्रकार की फ़ाइलों के लिए दो बिल्ड सिस्टम प्रदान करता है।
4

SublimeOnSaveBuild

जब आप सहेजें पर क्लिक करते हैं, तो निर्माण को ट्रिगर करने के लिए उदात्त पाठ 2 के लिए यह एक सरल प्लगइन है । पूर्व प्रोसेसर जैसे LESS, Compass और किसी अन्य के साथ अच्छी तरह से काम करता है।

ग्रहण

निम्न तालिका में सूचीबद्ध के रूप में ग्रहण के दो ग्रहण हैं -

अनु क्रमांक। प्लगइन्स और विवरण
1 कम प्लगइन ग्रहण करें

ग्रहण आईडीई का विस्तार करके, यह प्लगइन LESS स्टाइलशीट को संपादित और संकलित करने के लिए उपयोगी सुविधाएँ प्रदान करता है।
2 ट्रांसपिलर प्लगिन

यह ग्रहण प्लगइन आपकी फ़ाइलों जैसे LESS, SASS, CoffeeScript आदि को स्वचालित रूप से स्थानांतरित करता है।

दृश्य स्टूडियो

Visual Studio के पास LESS के लिए निम्नलिखित विभिन्न विकल्प हैं -

अनु क्रमांक। विकल्प और विवरण
1 सीएसएस कम है

यह एक्सटेंशन CSS भाषा सेवा के साथ LESS फाइलें खोलता है।
2 वेब अनिवार्य 2012

यह एक्सटेंशन आपको सामान्य कार्यों को बहुत आसान करने देता है और वेब डेवलपर्स के लिए विज़ुअल स्टूडियो में उपयोगी सुविधाओं को जोड़ता है।
3 वेब अनिवार्य 2013

यह कई नई विशेषताओं के साथ विजुअल स्टूडियो का विस्तार करता है जो एक विशिष्ट भाषा या संपादक के लिए विशिष्ट नहीं हैं।
4 वेब उपकरण 2013

यह ASP.NET को शामिल करने वाले विकास कार्यों में आपकी मदद करता है

Dreamweaver

ड्रीमविवर के साथ काम करते समय निम्नलिखित बिंदुओं पर विचार किया जाना चाहिए ।

  • यह वेब डिज़ाइनर और डेवलपर्स द्वारा उपयोग किया जाने वाला एक एडोब एप्लिकेशन है जिसका उपयोग एप्लिकेशन और वेबसाइट बनाने के लिए किया जाता है।

  • यह ब्राउज़र, डिवाइस और टैबलेट सहित कई प्लेटफार्मों पर काम करने में सक्षम है।

  • वेब डिजाइनर वेबसाइट प्रोटोटाइप बनाने के लिए ड्रीमविवर का उपयोग करते हैं।

  • DMXzone कम CSS कंपाइलर, सभी LESS CSS शक्तियों को सीधे Dreamweaver में बनाता है।

नोटपैड ++ 6.x

नोटपैड ++ पर काम करते समय निम्नलिखित बिंदुओं पर विचार किया जाना चाहिए ।

  • नोटपैड ++ एक मुफ्त टेक्स्ट एडिटर और सोर्स कोड एडिटर है जो टैब्ड एडिटिंग का समर्थन करता है, अर्थात, एक ही विंडो में कई खुली फाइलों के साथ काम करता है।

  • नोटपैड ++ के लिए LESS एक xml फ़ाइल है, जो .less फ़ाइलों के लिए सिंटैक्स हाइलाइटिंग या रंग प्रदान करती है। अधिक जानकारी प्राप्त करने के लिए, इस लिंक पर क्लिक करें ।

  • नोटपैड ++ इंस्टॉल करने के लिए इस लिंक पर क्लिक करें ।

Node.js कंपाइलर

निम्न के लिए Node.js संकलक का उपयोग किया जाता है।

घुरघुराना-योगदान कम

ग्रंट एक नोड कार्य धावक है। हर बार जब आप अपनी LESS फ़ाइलों में परिवर्तन करते हैं तो यह आपकी स्टाइलशीट को संकलित करेगा।

इकट्ठा कम

इकट्ठा-कम सीएसएस के लिए कम फ़ाइल संकलन के लिए एक शक्तिशाली ग्रन्ट प्लगइन है। कम कार्य JSON और लो - डैश (अंडरस्कोर) टेम्पलेट को कम बंडल, यूआई घटकों, संकुचित स्टाइलशीट या थीम को परिभाषित करने के लिए खींचता है।

घूंट-कम

यह गलप के लिए LESS प्लगइन है। अपने सीएसएस को छोटा करने के लिए gulp-minify-css का उपयोग किया जाता है। gulp-sourcemaps का उपयोग sourcemaps लाइब्रेरी बनाने के लिए किया जाता है।

अवकाश

यह एक ओपन-सोर्स टूल है जो LESS पर बनाया गया है और आपके CSS कोड को अनुकूलित करने में मदद करता है। यह सीएसएस कोड त्रुटि मुक्त, स्वच्छ और प्रबंधनीय रखता है।

autoless

यह एक .less फ़ाइल द्रष्टा है। इसमें निर्भरता ट्रैकिंग और क्रॉस-प्लेटफ़ॉर्म अधिसूचना शामिल है।

Less.js के लिए मिडिलवेयर कनेक्ट करें

इसका उपयोग LESS फ़ाइलों के जेएस ढांचे को जोड़ने के लिए प्रसंस्करण की अनुमति देने के लिए किया जाता है। यह अनुरोध पर स्रोत फ़ाइल संकलित करता है और अगले अनुरोध के लिए संकलित डेटा को कैश करता है।

अन्य प्रौद्योगिकी

निम्नलिखित कुछ अन्य तकनीकें हैं जो आपको LESS कोड संकलित करने में मदद करती हैं।

व्रोज 4 रनर सीएलआई

आप wro4j-runner.jar डाउनलोड कर सकते हैं और निम्नलिखित कमांड का उपयोग करके CSS में अपना LESS कोड संकलित कर सकते हैं -

java -jar wro4j-runner-1.5.0-jar-with-dependencies.jar --preProcessors lessCss

Wro4j धावक CLI के बारे में अधिक जानने के लिए आप निम्न लिंक पर जा सकते हैं

सीएसएस :: LESSp

इस मॉड्यूल का उपयोग CSS फ़ाइल में LESS फ़ाइल को पार्स और संकलित करने के लिए किया जाता है। निम्नलिखित आदेश का संकलन करने के लिए प्रयोग किया जाता है -

lessp.pl styles.less > styles.css

CSS :: LESSp के बारे में अधिक जानने के लिए आप निम्न लिंक पर जा सकते हैं

विंडोज स्क्रिप्ट होस्ट

निम्नलिखित कमांड लाइन कंपाइलर है जो विंडोज़ पर चलेगा।

cscript //nologo lessc.wsf input.less [output.css] [-compress]

OR

lessc input.less [output.css] [-compress]

Windows के लिए Less.js के बारे में अधिक जानने के लिए आप निम्न लिंक पर जा सकते हैं

dotless

विंडोज़ के लिए डॉटलेस चलाने के लिए कमांड लाइन कंपाइलर निम्नलिखित है।

dotless.Compiler.exe [-switches] <inputfile> [outputfile]

डॉटलेस के बारे में अधिक जानने के लिए आप निम्न लिंक पर जा सकते हैं

यूआई / थीम फ्रेमवर्क और घटक

LESS निम्नलिखित तालिका में सूचीबद्ध UI / थीम फ्रेमवर्क में से कुछ का समर्थन करता है -

अनु क्रमांक। फ्रेमवर्क और विवरण
1 1pxdeep

यह फ्लैट बूटस्ट्रैप 3 थीम है जो शक्तिशाली रंग योजना नियंत्रण प्रदान करता है।
2 Bootflat

यह बूटस्ट्रैप पर आधारित एक ओपन-सोर्स फ्रेमवर्क है।
3 BootPress

यह एक PHP फ्रेमवर्क है जो फ्लैट फ़ाइल CMS पर आधारित है
4 बूटस्ट्रैप

यह तेज और आसान वेब विकास के लिए शक्तिशाली मोबाइल पहला फ्रंट-एंड फ्रेमवर्क है।
5 बूटस्ट्रैप a11y विषय

यह वेब विकास के लिए आसान पहुँच प्रदान करता है।
6 Bootswatch

यह एक ओपन-सोर्स थीम है जो बूटस्ट्रैप के लिए मुफ्त थीम प्रदान करता है।
7 कार्डिनल

यह मोबाइल-प्रथम सीएसएस फ्रेमवर्क है जो उत्तरदायी वेबसाइटों, उपयोगकर्ता इंटरफेस और अनुप्रयोगों के लिए सीएसएस को बनाए रखने की अनुमति देता है।
8 CSSHorus

यह एक पुस्तकालय है जो मोबाइल वेबसाइटों का आसान विकास प्रदान करता है।
9 फ्लैट यूआई फ्री

यह बूटस्ट्रैप 3 पर आधारित है जिसमें बुनियादी और जटिल घटक शामिल हैं और बूटस्ट्रैप के लिए थीम डिज़ाइन प्रदान करता है।
10 सामने का आकार

यह एक फ्रंटएंड फ्रेमवर्क है जिसमें विजेट बनाने के लिए टूल का एक सेट होता है।
1 1

InContent

यह CSS3 और SASS / LESS का उपयोग करके छवि का विवरण निर्दिष्ट करता है।
12 स्याही

यह उत्तरदायी वेब इंटरफेस बनाता है।
13 JBST

यह वर्डप्रेस के लिए चाइल्ड थीम बनाने के लिए उपयोग किया जाने वाला शक्तिशाली थीम फ्रेमवर्क है और इसे स्टैंडअलोन वेबसाइट बिल्डर के रूप में उपयोग किया जाता है।
14 KNACSS

यह उत्तरदायी और एक्स्टेंसिबल शैली पत्रक का उपयोग करके HTML / CSS परियोजनाओं को विकसित करने के लिए उपयोग किया जाता है।
15 Kube

यह सीएसएस फ्रेमवर्क है जो पेशेवर डिजाइनरों और डेवलपर्स के लिए उपयोग किया जाता है।
16 मेट्रो यूआई सीएसएस

यह एक फ्रंटएंड फ्रेमवर्क है जिसका उपयोग परियोजनाओं पर विंडोज मेट्रो स्टाइल बनाने के लिए किया जाता है।
17 पूर्व

यह CSS फ्रेमवर्क है जो LESS का उपयोग करता है।
18 प्रस्तावना

यह सीएसएस फ्रेमवर्क है जो LESS का उपयोग करता है।
19 योजना

यह एक हल्का और उत्तरदायी ढांचा है जो जटिल वेबसाइटों के निर्माण में मदद करता है।
20 शब्दार्थ यूआई

यह एक यूजर इंटरफेस फ्रेमवर्क है जो HTML का उपयोग करके उत्तरदायी लेआउट बनाता है।
21 UIKit

यह एक फ्रंटएंड फ्रेमवर्क है जिसमें HTML, CSS और JS घटक शामिल हैं और वेब एप्लिकेशनों का उपयोग और विकास करना आसान है।
22

ngBoilerplate

यह AngularJS परियोजनाओं के लिए उपयोग की जाने वाली ग्रंट आधारित निर्माण प्रणाली है।
23 कम-रेल

यह एक गतिशील स्टाइलशीट भाषा है जो रेल परियोजनाओं के लिए Less.js का उपयोग करती है।
24 मूत

यह एक फ्रंटएंड फ्रेमवर्क है जिसमें उत्तरदायी वेब प्रोजेक्ट विकसित करने के लिए HTML, CSS और जावास्क्रिप्ट बूटस्ट्रैप घटक शामिल हैं।

ग्रिड सिस्टम

निम्न तालिका में सूचीबद्ध ग्रिड सिस्टम फ्रेमवर्क का समर्थन करता है -

अनु क्रमांक। फ्रेमवर्क और विवरण
1 लचीली ग्रिड प्रणाली

यह एक सीएसएस फ्रेमवर्क है जो लचीले तरीके से वेब प्रोजेक्ट बनाता है।
2 adaptGrid

यह वेब एप्लिकेशन विकसित करने के लिए एक उत्तरदायी ग्रिड सिस्टम है।
3 Fluidable

यह LESS प्रीप्रोसेसर पर आधारित हल्का उत्तरदायी ग्रिड सिस्टम है।
4 गोल्डन ग्रिड सिस्टम

यह उत्तरदायी डिजाइन के लिए ग्रिड प्रणाली है।
5 कम ज़ेन ग्रिड

इसका उपयोग उप पिक्सेल राउंडिंग समस्या को हल करने के लिए किया जाता है।
6 Order.less

यह एलईएस लाइब्रेरी है जिसका इस्तेमाल अलाइनमेंट, ग्रिड सिस्टम और मॉड्यूलर पैमानों के लिए किया जाता है।
7 जिम्मेदारी

यह एक अनुकूलन योग्य और स्टैंडअलोन ग्रिड प्रणाली है।
8 उत्तरदायी बॉयलरप्लेट

यह एक हल्का ग्रिड सिस्टम है जिसका उपयोग साइटों के लिए उत्तरदायी वेब डिज़ाइन बनाने के लिए किया जाता है।
9 Semantic.gs

यह अपने ऑपरेटिंग सिस्टम के लिए वेब ब्राउज़र का डिफ़ॉल्ट वितरण है।

मिक्सिन लाइब्रेरी

LESS निम्नलिखित तालिका में सूचीबद्ध मिक्सिन लाइब्रेरी प्रदान करता है -

अनु क्रमांक। फ्रेमवर्क और विवरण
1 3 एल

यह LESS प्रीप्रोसेसर के लिए नवीनतम CSS3 सुविधाएँ प्रदान करता है।
2 चेतन

यह एक पुस्तकालय है जिसका उपयोग परियोजनाओं में उपयोग होने वाले ब्राउज़र एनिमेशन के लिए किया जाता है।
3 Clearless

यह स्टाइल को नष्ट किए बिना और स्टाइलशीट में अत्यधिक आकार बनाए बिना पुन: प्रयोज्य लेस मिश्रणों का उपयोग करता है।
4 Css3LessPlease

यह css3please.com को कम से कम मिश्रण में रूपांतरित करता है और जब आप CSS चलाते हैं तो तत्व में तुरंत परिवर्तन हो जाएगा।
5 CssEffects

यह सीएसएस शैली प्रभाव को कम मिश्रण के रूप में लिखा गया है।
6 Cssowl

यह एक मिश्रित पुस्तकालय है जो LESS, SASS और स्टाइलस के लिए समर्थन करता है।
7 cube.less

यह केवल सीएसएस का उपयोग करके बनाया गया एक 3 डी एनिमेटेड क्यूब है।
8 tRRtoolbelt.less

यह एक पुस्तकालय है जो कम फ़ाइलों पर कार्रवाई करने के लिए मिश्रण और कार्य प्रदान करता है।
9 EST

यह LESS पर आधारित है जो LESS कोड को अधिक कुशलता से लिखने की अनुमति देता है।
10 षट्भुज

यह आकार और रंग के साथ CSS हेक्सागोन्स बनाता है।
1 1 बेघर

यह एक मिक्सिन लाइब्रेरी है जिसमें लेस.जेएस के लिए उपयोगी कार्य हैं।
12

LESS Elements

यह कम प्रीप्रोसेसर के लिए मिश्रण का एक संग्रह है।
13 कम टोपी

यह एक मिश्रित पुस्तकालय है जो सभी ब्राउज़रों के लिए CSS निर्यात करने में मदद करता है और छाया, ग्रेडिएंट्स और एनिमेशन आदि की संख्या बनाता है।
14 Lessley

यह परीक्षण सूट है जो LESS में लिखा गया है।
15 कम-बीड़ी

यह LESS मिश्रणों का एक संग्रह है जो कोड के दोहराव के बिना द्वि-दिशात्मक स्टाइल प्रदान करता है।
16

LESS-Mix

यह एक मिक्स लाइब्रेरी है जिसे LESS में लिखा गया है।
17 मीडिया क्वेरी करने वाली प्रकार

इसका उपयोग मीडिया क्वेरी बनाने के लिए किया जाता है जो इंटरनेट एक्सप्लोरर 8 और नीचे के संस्करणों को सामग्री तक पहुंचने की अनुमति देता है।
18 अधिक-Colors.less

यह वेब अनुप्रयोगों को डिजाइन करते समय रंग हेरफेर के लिए चर प्रदान करता है।
19 अधिक कम

यह एक पुस्तकालय है जो क्रॉस ब्राउज़र संगतता के लिए सीएसएस कोड लिखने की अनुमति देता है।
20 अधिक कम

यह Compass और Twitter बूटस्ट्रैप का संयोजन है जो CSS3 और क्रॉस ब्राउज़र मिक्सिन्स का उपयोग करके LESS को अधिक प्रदान करता है।
21 ज्यादा या कम

यह कम से कम के लिए शक्तिशाली मिश्रण प्रदान करता है।
22 normalize.less

यह LESS का उपयोग करके सामान्यीकृत सीएसएस प्रदान करता है।
23 ओबान

यह मिश्रणों का एक संग्रह है जो वेब एप्लिकेशन की विकास प्रक्रिया को गति देता है।
24 preboot

यह LESS सेवाओं का एक समूह है जो बेहतर CSS लिखने के लिए मिश्रण और चर का उपयोग करता है और बूटस्ट्रैप से बनता है।
25 प्रस्तावना-mixins

यह एक कम मिश्रण पुस्तकालय है।
26 Shape.LESS

यह आवेदन के लिए विभिन्न आकृतियों को निर्दिष्ट करने के लिए कई मिश्रण प्रदान करता है।
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2025 | All Rights Reserved