less.js 🚀 - गार्ड को अपरिभाषित चर के साथ काम करने दें

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

@menu-base-color: white;
@menu-base-color: @base-color when (@base-color);
...or...
@menu-base-color: @base-color when isset(@base-color);

hubertgrzeskowiak 12 जुल॰ 2013

+1, हमारे पास पहले से ही istext , isnumber है जिसमें isdefined है और isundefined कम के साथ थीमिंग में बहुत मदद करेगा।

यानी value या userValue उपयोग करें यदि isdefined

कम से कम अर्थपूर्ण यूआई के लिए थीमिंग सम्मेलन स्थापित करने का प्रयास करते समय मैं इस मुद्दे में बहुत कुछ चला रहा हूं।

jlukic 20 नव॰ 2013

इस पर +1 - वास्तव में बहुत अच्छा होगा।

SirRawlins 14 अग॰ 2014

इस पर मेरे लिए भी +1

micchickenburger 16 अक्तू॰ 2014

is-defined फ़ंक्शन जोड़ने के लिए कोई बड़ी बात नहीं है (मुझे उम्मीद है कि यह v2 जारी होते ही पहले प्लगइन्स में से एक में दिखाई देगा)। हालांकि ईमानदार होने के लिए दुखद बात यह है कि जो लोग इस सुविधा को चाहते हैं वे वास्तव में इस तथ्य को याद करते हैं कि उपरोक्त दोनों उपयोग-मामले हल करने योग्य हैं (कई मामलों में यहां तक कि अधिक कॉम्पैक्ट कोड के साथ) w/o उस तरह की कोई भी सुविधा।

@InitArt का उपयोग-मामला:

// library.less
<strong i="9">@variable</strong>: false;

a when (@variable) {
    color: red;
}

// ......................................
// user.less
<strong i="10">@import</strong> "library.less"
<strong i="11">@variable</strong>: true;

@ nemesis13 का उपयोग-मामला:

// library.less
@base-color: green;
@menu-base-color: @base-color;

.menu {
    background-color: @menu-base-color;
}

// ......................................
// user.less
<strong i="16">@import</strong> "library.less"
@base-color: white;
// or:
@menu-base-color: black;
// or whatever...

यानी संक्षेप में: परीक्षण के बजाय यदि एक चर परिभाषित किया गया है तो उस चर के लिए केवल एक डिफ़ॉल्ट मान प्रदान करें क्योंकि परिवर्तनीय मान स्वतंत्र रूप से ओवरराइड करने योग्य हैं।

seven-phases-max 16 अक्तू॰ 2014

👍1

क्या कोई जवाब दे सकता है कि मैक्स का उदाहरण उनके लिए सक्षम क्यों नहीं है? में ही सिर्फ
मान लें कि ऐसा इसलिए है क्योंकि आप नहीं जानते कि चर को ऊपर परिभाषित किया गया है या
आयात के नीचे? या यह कुछ और है?
हम किसी ऐसी चीज पर विचार नहीं करने जा रहे हैं जिसमें उपयोग के मामले नहीं हैं।
ऐसा करने का नकारात्मक पक्ष यह है कि वेरिएबल को गलत तरीके से टाइप करने वाले लोगों को एक नहीं दिखाई देगा
त्रुटि। हम इस पर एक चेतावनी के साथ काम कर सकते हैं लेकिन अगर आपने इसे चालू किया है
उद्देश्य आप एक चेतावनी नहीं चाहेंगे .. इसके साथ मेरी एकमात्र समस्या है
सुझाव।

lukeapage 18 अक्तू॰ 2014

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

निम्नलिखित मूल विषय (टेम्पलेट) पर विचार करें:

.my-class {
    color: @text-color;
    background-color: @background-color;
    border-color: @border-color;
}

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

JechoJekov 26 दिस॰ 2014

@JechoJekov

मुझे लगता है कि आप इस सुविधा अनुरोध के बिंदु को याद कर रहे हैं, ध्यान दें कि आपके उपयोग के मामले में आपको अभी भी इन गुणों में से प्रत्येक के लिए गार्ड लगाने की आवश्यकता होगी (इसलिए मैंने जो तर्क ऊपर दो पदों का सुझाव दिया है वह अभी भी लागू होता है)। इसलिए मुझे नहीं लगता कि आपका उपयोग-मामला # 1400 में कुछ नया जोड़ता है (मूल रूप से ऐसा लगता है कि आप एक अलग सुविधा का सुझाव दे रहे हैं जैसे "छोड़ें संपत्ति यदि उसके सभी मान अपरिभाषित चर के साथ सेट हैं" या ऐसा कुछ है लेकिन यह एक और है बड़ी कहानी)।

seven-phases-max 27 दिस॰ 2014

@ सात-चरण-अधिकतम

शायद यह सबसे अच्छा होगा यदि एक चर को "अपरिभाषित" या "अनसेट" मान पर सेट करना संभव हो। संपत्ति को इस तरह के मूल्य पर सेट करने का मतलब यह होगा कि संपत्ति को अंतिम सीएसएस में प्रस्तुत नहीं किया गया है। यह वाक्य रचना को सरल करता है और यह सत्यापित करना संभव बनाता है कि चर घोषित किया गया है।

JechoJekov 27 दिस॰ 2014

@JechoJekov

शायद यह सबसे अच्छा होगा यदि एक चर को "अपरिभाषित" या "अनसेट" मान पर सेट करना संभव हो।

जैसा कि मैंने उल्लेख किया है कि यह एक और विशेषता है जिसके लिए अपने स्वयं के टिकट की आवश्यकता होती है (अपनी चर्चा के साथ)।

seven-phases-max 27 दिस॰ 2014

रोडमैप के लिए बस कुछ स्पष्टीकरण: इसे "रेडीफॉर इम्प्लिमेंटेशन" के रूप में चिह्नित किया गया है, लेकिन इस धागे में आम सहमति नहीं लगती है, और ऐसा लगता है कि @ सेवन-फेज-मैक्स ने एक अच्छा विकल्प सुझाया है। @lukeapage @ सात-चरण-अधिकतम, कार्यान्वयन के लिए तैयार होना चाहिए हटा दिया जाना चाहिए?

matthew-dean 4 फ़र॰ 2015

@ मैथ्यू-डीन कोई विचार नहीं। मुझे लगता है कि यहां "रेडीफॉरइम्प्लीमेंटेशन" अभी भी वैध है, जिसका अर्थ है "यह सुविधा वास्तव में बेकार नहीं लगती है, लेकिन अगर कोई पीआर के साथ आता है तो ऐसी चीज को लागू करने से कोई प्रतिरोध नहीं होगा" या एक प्रकार का :)

seven-phases-max 4 फ़र॰ 2015

सो कैसे? (विचाराधीन)

matthew-dean 4 फ़र॰ 2015

मेरे लिए, "कार्यान्वयन के लिए तैयार" का अर्थ है कि आम सहमति है (लेकिन जरूरी नहीं कि सर्वसम्मत) कि इसे संबोधित या कार्यान्वित किया जाए। मुझे लगता है कि "विचाराधीन" आपकी परिभाषा को पूरा करता है।

matthew-dean 4 फ़र॰ 2015

स्कोपिंग का उपयोग करते समय अभी भी इस समस्या में चल रहा है

<strong i="6">@foo</strong>: 'bar';
& { 
  // not sure if <strong i="7">@foo</strong> is defined
}

isDefined . का उपयोग करने की क्षमता पसंद करेंगे

jlukic 1 सित॰ 2015

जबकि is-defined जैसा कुछ समझ में आता है (एक वाक्य रचनात्मक चीनी के रूप में), यह वास्तव में आवश्यक नहीं है। बस _always_ @foo को परिभाषित करें (जो भी डिफ़ॉल्ट मान आपको चाहिए), आखिरकार यदि आप अपनी शैलियों के भीतर एक चर का उपयोग कर रहे हैं - तो आप _can_ अनुमान लगाते हैं कि आपको इसे परिभाषित करने की आवश्यकता है, जैसे:

// in a far far away galaxy of your library default variables:
<strong i="8">@foo</strong>: undefined;

// the code where you need it
& when not(<strong i="9">@foo</strong> = undefined) { 
    // <strong i="10">@foo</strong> is defined by user    
}

// some user code
<strong i="11">@foo</strong>: bar;

हालांकि मुझे लगता है कि मैंने इसे पहले से ही ऊपर के उदाहरणों में लिखा है (मैं सिर्फ इस तथ्य को आवाज देना सुनिश्चित करने की कोशिश कर रहा हूं कि इस सुविधा की कमी किसी भी चीज़ के लिए शो-स्टॉपर नहीं हो सकती है। यदि आप किसी भी उपयोग-मामले को जानते हैं जहां यह है एक, कृपया साझा करें)।

seven-phases-max 1 सित॰ 2015

मैं ब्राउज़र में थीम पूर्वावलोकन सेट करने का प्रयास कर रहा हूं।

इसका मतलब है कि मुझे less.js का उपयोग करना होगा और रन-टाइम सेटिंग्स के साथ डिफ़ॉल्ट @theme चर को ओवरराइट करना होगा।

अला

window.less.modifyVars({
  theme: 'someOtherValue'
})

मेरे LESS में मैं एक वैश्विक theme.less फ़ाइल आयात कर रहा हूँ जिसमें शामिल है

<strong i="14">@theme</strong>: undefined;

.setTheme {
  <strong i="15">@theme</strong> : 'default';
}
.setTheme;

मैंने भी कोशिश की है

<strong i="19">@theme</strong>: 'default';

पहले मामले में, आउटपुट मूल्य undefined है दूसरे मामले में यह हमेशा default होता है, भले ही modifyVars में सेट किया गया हो

उदाहरण के लिए यहां थीम ड्रॉपडाउन पर क्लिक करें ।

वर्तमान कार्य (जो लाइव साइट पर है) मैन्युअल रूप से परिवर्तनीय आयात पथ को पकड़ना है, और इसे regexp का उपयोग करके पार्स करना है, फिर उन सभी चरों को modifyVars के साथ आयात करें, जैसा कि आप अनुमान लगा सकते हैं कि यह बहुत गन्दा है

jlukic 1 सित॰ 2015

@ सात-चरण-अधिकतम मैंने इसे @import मुद्दों के कारण एक बहुत ही विशिष्ट परीक्षण मामले में सीमित कर दिया है।

दोनों मामलों में मान लें:

जावास्क्रिप्ट

window.less.modifyVars({
  theme: 'changedValue'
});

पहले मामले में theme.less में, outer सही ढंग से changedValue . पर सेट है

घटक रहित

<strong i="17">@import</strong> 'theme.less';

विषय.विहीन

<strong i="22">@theme</strong>: 'default';
.outer {
  value: @theme; // value is set to changedValue
}

इस विफल मामले में, थीम.लेस @theme में default पर सेट है न कि changedValue पर

घटक रहित

<strong i="32">@import</strong> 'theme.less';

विषय.विहीन

<strong i="37">@theme</strong>: 'default';
<strong i="38">@import</strong> "@{theme}"; // theme is set to default not changedValue

jlukic 2 सित॰ 2015

"var in mixin" के मामले में, स्निपेट में बदल जाता है:

// defaults:
.setTheme {
   <strong i="6">@theme</strong>: undefined;
}

// custom:
.setTheme {
  <strong i="7">@theme</strong>: 'default';
}
.setTheme;

हालांकि modifyVars के लिए यह हमेशा आपके द्वारा आजमाए गए स्निपेट के लिए 'someOtherValue' परिणाम होना चाहिए (क्योंकि modifyVars सीधे संकलित के अंत में सादे @theme: 'someOtherValue'; लाइन को जोड़कर काम करता है सोर्स कोड)। तो अगर modifyVars काम नहीं कर रहा है तो समस्या कहीं और होने की संभावना है।
मैंने button पृष्ठ कोड देखा लेकिन यह कहना बहुत जटिल है कि संभवतः क्या गलत हो सकता है। त्वरित नज़र में मैं नहीं देख सकता (या शायद समझ नहीं सकता) कैसे कम कोड को फिर से संकलित किया जाता है और परिणामस्वरूप सीएसएस को modifyVars के बाद फिर से लागू किया जाता है (सरल स्निपेट में यह less.refreshStyles के बाद modifyVars less.refreshStyles के माध्यम से किया जाता है modifyVars )।

बीटीडब्ल्यू।, बस के मामले में, क्या आप वाकई is-default का उपयोग कुछ इस तरह करने की योजना नहीं बना रहे हैं:

.setTheme when not(is-defined(@theme)) {
  <strong i="26">@theme</strong>: 'default';
}
.setTheme;

? यदि ऐसा है, तो समस्या यह है कि ऐसा कोड सीधे आलसी-मूल्यांकन सिद्धांत का उल्लंघन करेगा ( is-defined यदि चर परिभाषित नहीं किया गया है, तो झूठी वापसी करनी चाहिए, लेकिन चूंकि यह _will_ उस दायरे में तुरंत परिभाषित किया जाएगा , is-defined में भी है सच लौटने के लिए -> अघुलनशील रिकर्सन। (सशर्त अनिवार्य-जैसे पुनर्वितरणों को सुरक्षित रूप से कम # 2072 में सुरक्षित रूप से अनुमति क्यों नहीं दी जा सकती है, इस बारे में अधिक जानकारी के लिए)।
यानी यह वास्तव में अपेक्षित रूप से काम कर सकता है (जब तक कि is-defined को इस तरह के रिकर्सन का स्पष्ट रूप से पता लगाने और जमानत देने के लिए कोडित नहीं किया जाता है) लेकिन केवल अनिर्दिष्ट/अपरिभाषित व्यवहार के रूप में, सामान्य परिवर्तनीय दृश्यता नियमों के साथ संगति इस प्रकार भी बना रही है अधिक गड़बड़।

seven-phases-max 2 सित॰ 2015

@jlukic

<strong i="8">@theme</strong>: 'default';
<strong i="9">@import</strong> "@{theme}"; // theme is set to default not changedValue

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

seven-phases-max 2 सित॰ 2015

मुझे पूरा यकीन है कि इसका उस अद्भुत काले जादू से कुछ लेना-देना है।

मैं डीबग करने के लिए बहुत ही सरल कम फाइलों के साथ काम कर रहा हूं, हालांकि मुझे अभी तक टेस्ट-केस रेपो बनाने का मौका नहीं मिला है।

मेरे परीक्षणों में, विफलता आयात में {@variable} मानों का उपयोग करने के लिए विशिष्ट है, लेकिन सीएसएस गुणों में नहीं।

वास्तव में कम के साथ थीम का आनंद ले रहे हैं, इन मुद्दों को पार करना पसंद करेंगे। यहाँ एक मजेदार थीमिंग उदाहरण है LESS के साथ मैंने पिछले हफ्ते Meteor DevShop पर दिखाया था (ऊपर दाईं ओर पेंटबकेट आइकन पर क्लिक करें)

jlukic 2 सित॰ 2015

@jlukic मैंने इसका परीक्षण किया और modifyVars आयात में vars के लिए काम करता है जैसा कि lessc और less.js के साथ अपेक्षित है ( कोडपेन डेमो देखें, यह थोड़ा मुश्किल कोड है क्योंकि इसे करना था भयानक यूआरएल से आयात करें, लेकिन मुझे लगता है कि यह आपके पृष्ठों के प्रदर्शन के बराबर है ... तो वास्तव में ऐसा लगता है कि समस्या कहीं और है)।

seven-phases-max 2 सित॰ 2015

मेरे लिए टेस्ट केस तैयार करने के लिए समय निकालने के लिए धन्यवाद। यह काफी स्पष्ट कट है। मुझे यकीन नहीं है कि मेरे लिए क्या हो रहा है.. मुझे जांच करनी होगी

jlukic 2 सित॰ 2015

क्या इस अनुरोध पर कोई आंदोलन हुआ है? मैं पिछले कुछ समय से एक अपरिभाषित चर जांच के लिए चिंतित हूं। फिलहाल, मेरे पास एक ऐसा काम है जो आदर्श से बहुत दूर है...

p {
  & when not (@body-text-color = null) {
    color: @body-text-color;
  }
}

लेकिन, इसके लिए काम करने के लिए, चर मौजूद होना चाहिए और डिफ़ॉल्ट रूप से null के रूप में परिभाषित किया जाना चाहिए। यह कहीं अधिक प्रभावी/लचीला होगा यदि मैं इसके बजाय जांच कर सकता हूं कि चर पहले स्थान पर भी मौजूद है या नहीं।

ashenden 3 जन॰ 2016

👍4

+1

ivantcholakov 19 अक्तू॰ 2016

तो संक्षेप में: एक प्लगइन के भीतर is-defined(name) (और/या get-value-of(var-name, fallback-value-if-not-defined) ) फ़ंक्शन के कार्यान्वयन के लिए कोड की 15 से कम पंक्तियों की आवश्यकता होती है। तो बस ऐसा करें यदि आप काफी बहादुर हैं।

seven-phases-max 25 अप्रैल 2017

इसके लिए +1। क्या प्लगइन के रूप में इस पर कोई प्रगति हुई है? मेरा मतलब है, @ सात-चरण-अधिकतम आप अधिकांश योगदानकर्ताओं की तुलना में बेहतर कोड जानते हैं, मुझे लगता है। यदि इसके लिए कोड की लगभग 15 पंक्तियों की आवश्यकता है, तो इसे अभी तक क्यों नहीं किया गया है?

darkguy2008 20 मई 2017

यदि इसके लिए कोड की लगभग 15 पंक्तियों की आवश्यकता है, तो इसे अभी तक क्यों नहीं किया गया है?

क्योंकि वास्तव में किसी की दिलचस्पी नहीं है? जब कोई और आपके लिए ऐसा करता है तो हर सुविधा शांत और "बेहद उपयोगी" होती है ... लेकिन यह जादुई रूप से इतना महत्वपूर्ण नहीं होता है जब यह आपके अपने समय के बारे में हो;)

आप अधिकांश योगदानकर्ताओं की तुलना में कोड को बेहतर जानते हैं

इसका मतलब यह नहीं है कि मुझे किसी और की रुचि के बाद अपनी रुचि का कुछ भी रखना है, क्षमा करें (खासकर अगर यह कुछ ऐसा है जो मैं व्यक्तिगत रूप से दुरुपयोग/खराब-कोड-शैली के रूप में मानता हूं)।

seven-phases-max 20 मई 2017

खाली आवाज नहीं करने के लिए, @ashenden के उपयोग के मामले के लिए: यहां आपके किसी भी नियम को "अज्ञात" द्वारा अनुकूलन योग्य बनाने का उचित तरीका है (जाहिर है कि ऐसा मामला मानते हुए जहां सामान्य सीएसएस ओवरराइडिंग किसी कारण से लागू नहीं है) त्रुटिपूर्ण के बिना "ब्लाइंड-मूव-हर-सीएसएस-वैल्यू-टू-ए-वेरिएबल-प्लस-यूज-कुछ-दैट-यू-न-यूज" का विचार (मैं विवरण में नहीं जाऊंगा कि यह वास्तव में क्यों टूटा हुआ है क्योंकि यह एक कहानी है एक लंबा ब्लॉग-पोस्ट)।

आमतौर पर "हुक" नाम की अवधारणा होती है, इसलिए निम्नलिखित "मेरे दिमाग को त्योहार नहीं बना सकते":

// .............................................
// base code:

p {
    & when not (is-defined(@body-text-color)) {
        color: @body-text-color;
    }
    & when not (is-defined(@body-text-color)) {
        background-color: @body-back-color;
    }
}

span {
    & when not (is-defined(@body-text-color)) {
        color: @body-text-color;
    }
    & when not (is-defined(@body-text-color)) {
        background-color: @body-back-color;
    }
}

// .............................................
// customization:

@body-back-color: blue; // how about gradient?

के साथ प्रतिस्थापित किया जाना चाहिए:

// .............................................
// base code:

p {
    .body-text();
    .body-back();
    // ^ it's actually better to group all this into a singe entity, e.g. .p()
    // so that as you don't know WHAT or HOW to be customized
    // you don't pre-enforce any limitations and/or hardcoded approach
    // for something YOU do not even write
}

span {
    .body-text();
    .body-back();
}

.body-text() {}
.body-back() {}

// .............................................
// customization:

.body-back() {background-color: blue}

रेखाओं को गिनें, संभावनाओं को गिनें, सीमाओं को गिनें।
यानी वास्तव में, यदि आप कुछ CSS गुणों का उपयोग नहीं करते हैं, तो कृपया उन्हें उन लोगों के लिए अकेला छोड़ दें जो .

seven-phases-max 20 मई 2017

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

मैं इस तरह के मॉड्यूल जैसे पुस्तकालय में थीम लोड करना चाहता हूं:

मेरे मूल ऐप में मैं वैरिएबल @theme : 'पीला' परिभाषित करता हूं और फिर लाइब्रेरी कम आयात करता हूं।

और यहाँ इस मामले में कौन सी लाइब्रेरी कम दिख सकती है:

@import 'थीम/@{थीम}';

तन {
पृष्ठभूमि: @ प्राथमिक रंग;
}

इस तरह मैं @primaryColor : पीले और @primaryColor : red के साथ येलो.लेस और डिफॉल्ट.लेस हो सकता था।

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

waterplea 18 सित॰ 2017

ठीक है, कोई बात नहीं, ऐसा लगता है कि मुझे मिल गया, मुझे बस इस तरह एक आयात मिश्रण की आवश्यकता है:

<strong i="6">@theme</strong>: 'default';

.imports(@theme) when (<strong i="7">@theme</strong> = 'yellow') {
    <strong i="8">@import</strong> "themes/yellow";
}
.imports(@theme) when (<strong i="9">@theme</strong> = 'default') {
    <strong i="10">@import</strong> "themes/default";
}
.imports(@theme);

waterplea 18 सित॰ 2017

@waterplea आप अपने कोड को सरल बना सकते हैं:

<strong i="7">@theme</strong>: default;

.imports(yellow) {<strong i="8">@import</strong> "themes/yellow";}
.imports(default) {<strong i="9">@import</strong> "themes/default";}
.imports(@theme);

हटाए गए अनावश्यक उद्धरणों पर भी ध्यान दें।

हालांकि ईमानदार होने के लिए मैं नहीं देख सकता कि कैसे @theme: yellow; (+ सभी मिश्रण कोड) बेहतर है तो केवल स्पष्ट @import "themes/yellow"; लाइन। यानी सबसे पहले क्या आप ओवरराइडिंग के बारे में जानते हैं? यानी आपको डिफ़ॉल्ट @import "themes/default"; को छिपाने की आवश्यकता नहीं है, यदि आपके पुस्तकालय उपयोगकर्ता को yellow सामान लागू करने की आवश्यकता है - वह सिर्फ आपकी पीली थीम (आपकी मुख्य लाइब्रेरी फ़ाइल के बाद कहीं भी आयात करती है, और फिर भी यह है एक ही पंक्ति) और वॉयला - आपकी लाइब्रेरी पीली फ़ाइल में निर्दिष्ट चर मानों का उपयोग करती है।

seven-phases-max 6 नव॰ 2017

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

waterplea 7 नव॰ 2017

आपने जो लिखा है वह हमारे मामले में काम नहीं करेगा क्योंकि हम एंगुलर के लिए यूआई किट बना रहे हैं और यह अत्यधिक मॉड्यूलर है।
_{मैंने इस अनंत बार पहले देखा है - यह सबसे दुखद कम (गलत) समझने की समस्या में से एक है - लोग केवल मौलिक कम आलसी-मूल्यांकन सिद्धांत को याद करते हैं और प्राकृतिक कम ओवरराइडिंग का उपयोग करने के बजाय, भारी फ़ाइल-इंजेक्शन वाले पुस्तकालयों का निर्माण करते हैं- सीधे विपरीत चर शब्दार्थ (जैसे PHP, Sass आदि) वाली भाषाओं की आदतों से प्रेरित आधारित अनुकूलन पैटर्न।} _{यह सिर्फ एक आदमी के लगातार चिल्लाने से ज्यादा कुछ होना चाहिए "दोस्तों, आप इसे गलत करते हैं!"}

seven-phases-max 7 नव॰ 2017

मुझे इसे ठीक करना अच्छा लगेगा, मैं दावा नहीं कर रहा हूं कि मैं सबकुछ समझता हूं :) मेरे उदाहरण पर अपने सुझाव की व्याख्या करने की देखभाल करें? यहाँ हमें क्या मिला है:

यहां एक न्यूनतम संरचनात्मक उदाहरण दिया गया है:

पुस्तकालय:

आयात रहित
@import 'theme-default';
@import 'mixins';
मिश्रण रहित
some mixins here like resetting default browser button styles
विषय-डिफ़ॉल्ट। रहित
@primary: red;
@secondary: blue;
विषय-माध्यमिक.विहीन
@primary: green;
@secondary: yellow;
बटनघटक
@import 'import';
.button { color: @primary; }

प्रोजेक्ट 1 (डिफ़ॉल्ट थीम का उपयोग करना चाहिए):

अवयव
@import 'import';
body { background: @secondary; }

प्रोजेक्ट 2 (द्वितीयक विषय का उपयोग करना चाहिए):

अवयव
@import 'import';
body { background: @secondary; }

हमारे पुस्तकालय को एक नोड मॉड्यूल के रूप में जोड़ा गया है और परियोजनाओं के भीतर हम पुस्तकालय से सिर्फ बटन घटक आयात करते हैं। चूंकि यह उस बटन के लिए एक कोणीय मॉड्यूल है, जिसकी अपनी कम फ़ाइल है, इसे बाकी प्रोजेक्ट 1 या प्रोजेक्ट 2 से अलग से संकलित किया गया है।

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

तो इसके बजाय, मूल रूप से, यहां बताया गया है कि मैंने कैसे import.less लिखा:
@import 'theme-default';
@import 'mixins';
@import (optional) '~custom-theme';

और प्रोजेक्ट्स के भीतर, अगर मैं प्रोजेक्ट कोड और लाइब्रेरी घटकों दोनों के लिए थीम वेरिएबल्स को ओवरराइड करना चाहता हूं, तो मैं इस फाइल को वेबपैक का उपयोग करके मॉड्यूल के रूप में उपनाम करता हूं। इस फ़ाइल में @ प्राइमरी या सेकेंडरी थीम पर स्विच करने का स्पष्ट ओवरराइडिंग हो सकता है:
@import '~myLibrary/styles/theme-secondary';

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

waterplea 8 नव॰ 2017

समझा। तब हम वास्तव में एक ही बात कर रहे हैं (बस अलग-अलग शब्दों में)। जैसे ही buttonComponent (या कोई अन्य घटक) अलग से संकलित किया जाता है, "प्रोजेक्ट कस्टमाइज़ेशन मास्टर" import.less फ़ाइल बना रहता है और आपने ठीक वही किया जो मैंने सुझाया था। (जबकि Project 1 और Project 2 buttonComponent के समान स्तर के केवल एक और "कुछ और" (या "ऑल-इन-वन"?) घटक बन जाते हैं और नहीं काफी "प्रोजेक्ट")।

यानी इस तरह मैं कहूंगा कि आपने मेरे स्वाद के लिए "इसे सही किया"।

seven-phases-max 8 नव॰ 2017

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

stale[bot] 8 मार्च 2018

@ स्टेल पिंग।

ivantcholakov 8 मार्च 2018

तकनीकी रूप से सुविधा को लागू करने वाला एक प्लगइन 2015 से उपलब्ध है। लेकिन व्यक्तिगत रूप से मैंने कभी इसका परीक्षण नहीं किया, इसलिए अगर कुछ गलत हो जाता है तो कृपया मुझे दोष न दें (यह सिर्फ एफवाईआई है)।

seven-phases-max 8 मार्च 2018

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

stale[bot] 6 जुल॰ 2018

तो... मैं इस धागे के माध्यम से वापस स्किम्ड हो गया और मैं वास्तव में यह निर्धारित नहीं कर सकता कि यह ज्यादातर लोगों के गलत समझने के मामले कम गुंजाइश है या नहीं।

मुझे वास्तव में यह जांचने की आवश्यकता नहीं दिख रही है कि वर्र्स परिभाषित हैं या नहीं। यदि वे उपभोग करने जा रहे हैं तो वार्स को परिभाषित किया जाना चाहिए।

<strong i="7">@import</strong> "library";  // contains @library-color: blue;

@library-color: red;

.box {
  color: @library-color;
}

मुझे _Change__ मान के आधार पर किसी प्रॉपर्टी को सशर्त रूप से सेट करने की आवश्यकता समझ में नहीं आ रही है। यदि संपत्ति एक चर पर सेट है, तो बस चर का मान बदलें।

यही है, अगर library.less में यह है:

@library-color: blue;
.box {
  color: @library-color;
}

इसका आउटपुट सेट करने के लिए सभी को क्या करना होगा:

<strong i="16">@import</strong> "library";
@library-color: red;

यह आउटपुट होगा:

.box {
  color: red;
}

क्या उस धागे में ओपी और अन्य लोग उस व्यवहार को समझते हैं?

matthew-dean 6 जुल॰ 2018

👎2

मुझे लगता है कि "क्या var मौजूद है" का उपयोग केस झंडे करने का एक अच्छा तरीका है। यही है, मुझे नहीं लगता कि एक अवधारणात्मक रूप से सीधा-आगे "झूठा" है। या यों कहें, यह असामान्य है कि true ही एकमात्र "सत्य" मान है। दूसरे शब्दों में, मुझे लगता है कि यह व्यवहार के मुद्दे के बजाय शिक्षा का मामला है।

मुझे लगता है कि हमें इस मुद्दे को बंद करने पर विचार करना चाहिए, क्योंकि यह आमतौर पर एक पंक्ति के साथ तय किया जाता है जो डिफ़ॉल्ट चर मान घोषित करता है। यद्यपि कम v3.5 अधिक अनुमोदित सौदे की ओर बढ़ रहा है, हो सकता है कि गार्ड के अंदर चर का मूल्यांकन अधिक अनुमोदित रूप से किया जाए?

हालांकि मेरा वोट नहीं है। @the-variable: false; ऐसा लगता है कि सभी ओपी को जोड़ने की जरूरत है।

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

calvinjuarez 7 जुल॰ 2018

ठीक है बंद करना, धन्यवाद @calvinjuarez।

matthew-dean 7 जुल॰ 2018

यह खुला होने के बाद से क्या हुआ है if() फ़ंक्शन। तो आप color: if((@variable), green, red); कर सकते हैं

matthew-dean 7 जुल॰ 2018

👍2 🎉1

@ मैथ्यू-डीन इस टिप के साथ लिखने के लिए बहुत बहुत धन्यवाद। मैंने 3.0 रिलीज नोट्स में if() को जोड़ा, लेकिन इस मुद्दे से संबंध नहीं बनाया, जिसके लिए मेरे पास एक अनूठा मामला था (लेकिन कम संस्करण बनाने का समय नहीं)। फिर से, बहुत सराहना की। अच्छा किया, कम टीम।

kbav 11 जुल॰ 2018

@kbav कोई बात नहीं! उस टिप के शीर्ष पर एक और युक्ति: जब if() पहली बार पेश किया गया था, तो उसे परिस्थितियों के आसपास माता-पिता की आवश्यकता थी क्योंकि यह मूल रूप से "एम्बेडिंग" था जब गार्ड (जैसा कि, when के बाद का हिस्सा when (@variable) में

color: if(<strong i="10">@variable</strong>, green, red);

matthew-dean 11 जुल॰ 2018

Less.js: गार्ड को अपरिभाषित चर के साथ काम करने दें

सबसे उपयोगी टिप्पणी

सभी 46 टिप्पणियाँ

संबंधित मुद्दों