LESS में तत्काल बाल चयनकर्ता

Question

क्या इसके उत्पादन में तत्काल बाल चयनकर्ता (>) को लागू करने के लिए कुछ भी है?

अपनी शैली में। मैं कुछ इस तरह लिखना चाहता हूं:

.panel {
    ...
    > .control {
        ...
    }
}

और LESS कुछ उत्पन्न करते हैं जैसे:

.panel > .control { ... }

Comments

stackoverflow.com/questions/7634932/less-js-strong-nested-rules

— ९वीड

स्पष्ट रूप से, आपके प्रश्न में स्निपेट पहले से ही सही उत्तर था।

— ९वीडी

@thirtydot ज़रूर, सिवाय इसके कि यह काम नहीं करता ... यदि आप स्थान नहीं हटाते हैं या "&" जोड़ते हैं। मैं कम.जे का उपयोग कर रहा हूँ अन्य पार्सर्स के लिए पक्के तौर पर नहीं कह सकते।

— डेव

मैंने अभी इसका परीक्षण किया है, और आपके प्रश्न का मूल कोड कम से कम में काम करता है। खुद के लिए देखें: jsfiddle.net/thirtydot/vcE8t

— तीस

हाँ मेरी क्षमायाचना, यह अंतरिक्ष के साथ एक आकर्षण की तरह काम करता है। आपके लिए +1। मुझे नहीं पता कि कल मेरे लिए यह कैसे काम नहीं करता था ... अन्यथा मैंने सवाल पोस्ट नहीं किया होता।

— डेव

Answer 1

अपडेट करें

दरअसल, मूल प्रश्न में कोड ठीक काम करता है। आप सिर्फ >बच्चे के चयनकर्ता के साथ रह सकते हैं ।

---

उत्तर मिला।

.panel {
    ...
    >.control {
        ...
    }
}

">" और "।" के बीच स्थान की कमी पर ध्यान दें, अन्यथा यह काम नहीं करेगा।

Comments

मुझे संदेह नहीं है कि यह एक बग है अगर यह वहाँ एक जगह के साथ काम नहीं करता है, जब तक कि यह विशेष रूप से प्रलेखित न हो।

— BoltClock

यह सिर्फ पार्सर को मूर्ख बना रहा है। यह इसे एकल चयनकर्ता के रूप में देखता है, इसलिए आपको प्राप्त होता है .panel >.control।

— रिकार्डो टोमासी

मैं इसे बग के बजाय एक सुविधा के रूप में लेता हूं। जब आप इसे "और" के विपरीत उपयोग करते हैं तो यह अधिक सुसंगत होता है। मुझे लगता है कि यह स्पष्ट कोड है यदि आप केवल छद्म कक्षाओं के साथ "&" का उपयोग करते हैं, न कि बाल वर्गों के।

— डेव

यह सीएसएस की एक विशेषता है, जो दोनों को स्वीकार करता है div > pऔर div>p। संगति हमेशा चयनकर्ताओं के बीच की जगह का उपयोग करना होगा (उत्पन्न सीएसएस पर एक नज़र डालें)।

— रिकार्डो तोमासी

यकीन है, लेकिन मैं का उपयोग करने की स्थिरता के साथ और अधिक चिंतित था।

— डेव

Answer 2

आधिकारिक तरीका:

.panel {
  & > .control {
    ...
  }
}

& हमेशा वर्तमान चयनकर्ता को संदर्भित करता है।

Http://lesscss.org/features/#features-overview-feature-nested-rules देखें

Comments

मुझे लगता है कि यह भी सिर्फ पार्सर को बेवकूफ बना रहा है (जैसे आपको दूसरे उत्तर के बारे में महसूस हुआ)। मुझे समझाने दो। जैसा आपने कहा, और हमेशा वर्तमान (माता-पिता) चयनकर्ता को संदर्भित करता है। तो इसके बाद जो कुछ भी है वह माता-पिता पर लागू होना चाहिए । और, यह छद्म वर्गों की भूमिका है। तत्काल बच्चे कक्षाएं छद्म कक्षाओं के बजाय **** हांफते हुए बच्चे कक्षाओं के करीब हैं। इसलिए सिर्फ> का उपयोग करना अधिक सहज और तार्किक है।

— डेव

आपको क्या लगता है कि अधिक सही है? div > pया div >p? &Combinator विहित रास्ता मेरी भावनाओं को भी कम समय में यह करना, नहीं है। आपका स्पष्टीकरण पुष्ट है। कुछ लोग एक पंक्ति में अपने सीएसएस लिखते हैं ...

— रिकार्डो टोमासी

अधिकांश लोग LESS का उपयोग करते हैं, इसलिए उन्हें उत्पन्न होने वाले वास्तविक CSS की परवाह नहीं करनी चाहिए। किसी भी तरह, यह पता चला कि अंतरिक्ष का उपयोग> के बाद किया जा सकता है। इसलिए & विशुद्ध रूप से बेमानी है।

— डेव

Answer 3

'&' का उपयोग करते समय सही वाक्यविन्यास निम्नलिखित होगा जो यहां निरर्थक होगा।

.panel{
   > .control{
   }
}

कम दिशा-निर्देशों के अनुसार , पूर्वजों को पैरामीटर करने के लिए 'और' का उपयोग किया जाता है (लेकिन यहां ऐसी कोई आवश्यकता नहीं है)। में इस कम उदाहरण , और: मंडराना आवश्यक खत्म हो गया है : मंडराना अन्यथा यह वाक्यात्मक त्रुटि में परिणाम होगा। हालांकि, यहां '&' का उपयोग करने के लिए ऐसी कोई वाक्यात्मक आवश्यकता नहीं है। अन्यथा सभी घोंसलों के लिए 'और' की आवश्यकता होगी क्योंकि वे मूल रूप से माता-पिता की बात कर रहे हैं।

Comments

@JJF कोई सवाल नहीं है क्योंकि यह एक जवाब है?

— बिल वुडगेर

Answer 4

उस स्थिति में जब आपको अधिक चयनकर्ताओं को लक्षित करने की आवश्यकता होती है:

.parent {
    >.first-child,
    >.second-child,
    >.third-child {
    ...
    }
}

Answer 5

इसके अलावा, आप इस तरह के पहले के रूप में पहले बच्चे तत्व, लक्षित कर रहे हैं <td>एक की <tr>है, तो आप कुछ इस तरह इस्तेमाल कर सकते हैं:

tr {
    & > td:first-child {font-weight:bold;}
}

जब उन्हें जरूरत नहीं होती है तो यह वर्ग घोषणाओं को कम करने में मदद करता है।