क्या LESS में "विस्तार" सुविधा है?

Question

SASS में एक सुविधा होती है, @extendजो एक चयनकर्ता को दूसरे चयनकर्ता के गुणों को प्राप्त करने की अनुमति देती है, लेकिन गुणों की नकल किए बिना (जैसे मिश्रण)।

क्या LESS के पास भी यह सुविधा है?

Comments

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

— जॉन्सलिंकर्टर्ट

... मेरी पिछली टिप्पणी में जोड़ने के लिए, दूसरे प्रश्न में "कोडिंग-स्टाइल" टैग शामिल है जो मेरी बात का समर्थन करता है।

— जॉन्सलिंकर्टर्ट

Answer 1

हाँ, Less.js शुरू की extendमें v1.4.0 ।

:extend()

@extendSASS और स्टाइलस द्वारा उपयोग किए गए एट-रूल ( ) सिंटैक्स को लागू करने के बजाय , LESS ने छद्म श्रेणी के सिंटैक्स को लागू किया, जो LESS के कार्यान्वयन को सीधे या तो चयनकर्ता के लिए या एक बयान के अंदर लागू करने की सुविधा देता है। तो ये दोनों काम करेंगे:

.sidenav:extend(.nav) {...}

या

.sidenav {
    &:extend(.nav);
    ...
}

इसके अतिरिक्त, आप का उपयोग कर सकते हैं all "नेस्टेड" कक्षाओं को भी विस्तारित करने निर्देश का :

.sidenav:extend(.nav all){};

और आप उन कक्षाओं की अल्पविराम से अलग की गई सूची जोड़ सकते हैं जिन्हें आप विस्तारित करना चाहते हैं:

.global-nav {
    &:extend(.navbar, .nav all, .navbar-fixed-top all, .navbar-inverse);
    height: 70px;
}

नेस्टेड चयनकर्ताओं का विस्तार करते समय आपको मतभेदों पर ध्यान देना चाहिए:

नेस्टेड चयनकर्ताओं .selector1और selector2:

.selector1 {
  property1: a;
   .selector2 {
    property2: b;
   }
}

अब .selector3:extend(.selector1 .selector2){};आउटपुट:

.selector1 {
  property1: a;
}
.selector1 .selector2,
.selector3 {
  property2: b;
}

, .selector3:extend(.selector1 all){};आउटपुट:

.selector1,
.selector3 {
  property1: a;
}
.selector1 .selector2,
.selector3 .selector2 {
  property2: b;
}

, .selector3:extend(.selector2){};आउटपुट

.selector1 {
  property1: a;
}
.selector1 .selector2 {
  property2: b;
}

और आगे .selector3:extend(.selector2 all){};:

.selector1 {
  property1: a;
}
.selector1 .selector2,
.selector1 .selector3 {
  property2: b;
}

Comments

"LASS का वाक्य- @extendविन्यास SASS और स्टाइलस द्वारा लागू किए गए एट-रूल ( ) सिंटैक्स से अधिक पारंपरिक सीएसएस के लिए" वफादार "है , जो आमतौर पर ब्राउज़र में CSS पार्सर को निर्देश या निर्देश देने के लिए आरक्षित है।" <- क्या बिल्ली यह मतलब है माना जाता है? मार्केटिंग की तरह खुशबू आती है।

— साइमन

आइए इस चर्चा को चैट में जारी रखें

— steveax

@ साइमनमैन मुझे लगता है कि आप सही हैं, मेरा मतलब यह नहीं था कि वह इस तरह से आवाज़ करे। लेकिन लोअर के सिंटैक्स के बारे में बहुत विवाद है, प्रतीत होता है क्योंकि लोगों को एसएएसएस के समान सिंटैक्स का उपयोग करने के लिए कम की उम्मीद थी। लेकिन CSS में, pseuso-selectors पैटर्न मिलान नियमों के लिए उपयोग किया जाता है यह निर्धारित करने के लिए कि दस्तावेज़ के पेड़ में कौन से शैली के नियम तत्वों पर लागू होते हैं, जबकि "उच्च-स्तरीय" निर्देशों (जैसा मैंने उल्लेख किया है) के लिए at-rules का उपयोग किया जाता है। तो शायद मुझे उस विवरण को प्रदान करने के लिए उत्तर को संपादित करना चाहिए? या यह एक और सवाल है: "कम से कम ने छद्म चयनकर्ता वाक्यविन्यास क्यों चुना?"

— जॉन्सलिंकर्टर्ट

आपको वास्तव में कम दस्तावेज़ीकरण को ऑनलाइन अपडेट करना चाहिए, मैं इसके बारे में कुछ भी नहीं देख सकता: विस्तार () और यह पहले से जानना अच्छा होगा

— जोशुआ बम्ब्रिक

कोड के साथ प्रलेखन, समुदाय बनाए रखा है। इस प्रकार के सुझाव वास्तविक रेपो पर होने के लिए बहुत अच्छे होंगे, और पुल अनुरोधों का हमेशा स्वागत है ;-)

— jonschlinkert

Answer 2

कम ढांचे में एक समारोह का विस्तार करने का आसान तरीका

.sibling-1 {
    color: red
}
.sibling-2 {
    background-color: #fff;
    .sibling-1();
}

उत्पादन

.sibling-1 {
  color: red
}
.sibling-2 {
  background-color: #fff;
  color: red
}

Https://codepen.io/sprushika/pen/MVZoGB/ देखें