Less.js: :विस्तार मिश्रण

मुझे यह पसंद है, लेकिन स्पष्ट होने के लिए .. यह आपको कुछ ऐसा करने की अनुमति नहीं देता है जो आप पहले नहीं कर सकते थे, इसका मतलब है कि आपको मिल गया ..

.navbar,
.banner {
    // clearfix stuff
}

इसके बजाय

.navbar {
    // clearfix stuff
}
.banner {
    // clearfix stuff
}

या मैंने गलत समझा है?

मुझे पसंद है कि पैरामीट्रिक और सामान्य दोनों तरह के मिश्रण हों

.navbar,
.banner {
    // clearfix stuff
}
.....

या

.clearfix,
.navbar,
.banner {
    // clearfix stuff
}
....

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

निश्चित रूप से

.clearfix,
.navbar,
.banner {
    // clearfix stuff
}

से छोटा है

 .clearfix {
    // clearfix stuff
  }
 .navbar{
    // clearfix stuff
 }
.banner {
    // clearfix stuff
}

और अधिक जटिल उदाहरणों के लिए जो महत्वपूर्ण हो सकते हैं, और मुझे पता है कि कुछ लोगों ने इस कमी के कारण एसएएसएस में स्विच किया था

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

.transition(@transition) {
  -webkit-transition: @transition;
     -moz-transition: @transition;
       -o-transition: @transition;
          transition: @transition;
}
.navbar {
    &:extend(.transition(opacity .2s linear));
}
.banner {
    &:extend(.transition(opacity .3s linear));
}

मुझे लगता है कि यह मिश्रण की दो प्रतियां बना सकता है, जो कम कोड नहीं है, और नियमित मिश्रणों पर कोई फायदा नहीं है:

.navbar {
  -webkit-transition: opacity .2s linear;
     -moz-transition: opacity .2s linear;
       -o-transition: opacity .2s linear;
          transition: opacity .2s linear;
}
.banner {
  -webkit-transition: opacity .3s linear;
     -moz-transition: opacity .3s linear;
       -o-transition: opacity .3s linear;
          transition: opacity .3s linear;
}

हालांकि, अगर आप इस विशेष mixin एक बहुत उपयोग कर सकते हैं, इसलिए जब आप पर फिर से mixin का उपयोग .dropdown के रूप में ही चर के साथ .banner , यह इस में परिणाम हो सकता है:

.navbar {
  -webkit-transition: opacity .2s linear;
     -moz-transition: opacity .2s linear;
       -o-transition: opacity .2s linear;
          transition: opacity .2s linear;
}
.banner,
.dropdown {
  -webkit-transition: opacity .3s linear;
     -moz-transition: opacity .3s linear;
       -o-transition: opacity .3s linear;
          transition: opacity .3s linear;
}

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

@jonschlinkert हाँ, यह और भी बेहतर चित्रण है, धन्यवाद। जैसा कि मैंने उस पर दोनों हाथ कहा! लेकिन समझें कि यह जटिलता का एक और स्तर जोड़ रहा है, और इसे सोच-समझकर करने/नहीं करने की आवश्यकता है

आपके द्वारा संदर्भित विधि में विस्तार इस पैटर्न के साथ बहुत आसानी से प्राप्त किया जा सकता है:

.transition(@transition) {
    -webkit-transition: @transition;
     -moz-transition: @transition;
       -o-transition: @transition;
          transition: @transition;
}

.quickOpacity1(){
    .transition(opacity .2s linear);
}

.quickOpacity2(){
    .transition(opacity .3s linear);
}

.navbar{
    .quickOpacity1();
}

.banner,
.dropdown{
    .quickOpacity2();
}

उपरोक्त 2 नई घोषणाओं में अर्ध-विस्तारित मिश्रणों को इंजेक्ट कर रहा है।

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

.clearfix{
  //clearfix stuff
}
.navbar,
.banner {
    .clearfix;
}

@krismeister मुझे लगता है कि इस पर भ्रम हो सकता है। आपके द्वारा वर्णित पैटर्न वास्तव में केवल नेस्टेड मिश्रण, या मिश्रित विरासत पैटर्न है। इसके विपरीत काम बढ़ाता है।

@jonschlinkert मिक्सिन विरासत - एक महान नाम। ऐसा प्रतीत होता है कि उपरोक्त दोनों उदाहरण जहां माता-पिता से आउटपुट प्राप्त करने का प्रयास कर रहे हैं - जो विस्तार की मुख्य विशेषता है। आप शायद इस बात से सहमत हैं कि मेरे उदाहरण का आउटपुट आपका अपेक्षित आउटपुट था।

हालांकि मैं आपकी मूल टिप्पणी को दोबारा पढ़ने से समझता हूं- आप आउटपुट को एक सीएसएस नियम में शामिल करना चाहते हैं। हालांकि यह मूल रूप से 2 के रूप में लिखा गया था।

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

.some-mixin() {
    padding-top: 100px;
    background: #f7f7f7;
}


// a selector that is extending the mixin
.alert:extend( .some-mixin() ) {
    border: 1px solid #e5e5e5;
}
// another selector extending the mixin
section:extend(.some-mixin()) {
    margin: 20px 0;
}

इसका परिणाम होगा:

// The selectors that extended the mixin are now where the mixin used to be.
.alert,
section {
    padding-top: 100px;
    background: #f7f7f7;
}

// And the properties of the mixin did not get copied down below
// so we saved a line or two of code.
.alert {
    border: 1px solid #e5e5e5;
}
section {
    margin: 20px 0;
}

उम्मीद है कि यह और अधिक समझ में आता है। मुझे किसी भी समय मदद करने में खुशी होती है।

@agatronic, @matthewdl, @DesignByOnyx, सिर्फ एक विचार, मुझे पता है यह एक असामान्य तरीका है, लेकिन यह सोचते हैं इस के लिए कोई तकनीकी चुनौतियों का सामना कर रहे हैं, और यह सोचते हैं कि हम एक अल्पविराम चयनकर्ताओं की सूची अलग अनुमति देते हैं, हो सकता है _should_ एक सरणी की तरह अधिक लग रहा है का विस्तार . सिंटैक्स को इसमें बदलने के बारे में आप क्या सोचते हैं: :extend[N] ।

मुझे लगता है कि जब मिश्रण बढ़ाया जाता है तो यह आंखों पर भी आसान होता है:

section:extend[.some-mixin(), .another-mixin()] {
    margin: 20px 0;
}

मैं किसी भी तरह से ठीक हूं, लेकिन स्क्वायर ब्रैकेट के बारे में कुछ सही लगता है।

@jonschlinkert - [] अर्थ सीएसएस में विशेषता है, सरणी नहीं, जहां :extend() छद्म चयनकर्ताओं के लिंक के कारण चुना गया था, इसलिए मुझे दृढ़ता से लगता है कि सामान्य ब्रैकेट रहना चाहिए।

अच्छा बिंदु, मैं सहमत हूँ।

मैं मानता हूं कि कोष्ठक अच्छे लगते हैं और पढ़ते हैं, लेकिन हाँ, हमें पहले से चुने गए वाक्य-विन्यास के साथ रहना होगा।

विस्तार (एन) सिंटैक्स के लिए थंब अप, प्रकृति सीएसएस की तरह अधिक लगता है, @ agatronic . के समान कारण

मिश्रण का विस्तार करना कोई बुरा विचार नहीं है। उदाहरण वाक्य रचना के बारे में निश्चित नहीं है, @jonschlinkert। ऐसा नहीं है कि मुझे यह पसंद नहीं है; मैं वास्तव में समझ नहीं पा रहा हूं कि आपने क्या लिखा है।

मुझे लगता है कि आपका मतलब यह है कि आप उन वर्गों को परिभाषित करना चाहते हैं जो समान मिश्रित सामग्री को "खींचें", लेकिन वास्तव में परिणामी सीएसएस में दोहराएं नहीं। मैं उस विस्तारित मिश्रण को नहीं बुलाऊंगा। यही है, आप मिक्सिन परिभाषा में बदलाव नहीं कर रहे हैं (उसी तरह से विस्तार परिभाषा चयनकर्ताओं को करेगी), आप वास्तव में परिणामी वर्गों को बदल रहे हैं (विस्तार कर रहे हैं)।

तो, अगर मैं गलत हूं तो मुझे सुधारें, लेकिन क्या आपका नेवबार/बैनर/ड्रॉपडाउन उदाहरण इसके द्वारा समर्थित नहीं होगा:

.navbar {
  .transition(opacity .2s linear);
}
.banner {
  .transition(opacity .3s linear);
}
.dropdown:extend(.banner) { }

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

इस तरह मैं इसे प्राप्त करता हूं

वांछित अंतिम सीएसएस आउटपुट

.sometingShared,
.anotherClass,
.anotherYetClass,
.yetClass {
    // amount of shared code here
}

.anotherClass,
.anotherYetClass {
    // did something dynamic with a
}

.yetClass {
    // did something dynamic with b
}

.anotherClass {
    // native another class code
}

.anotherYetClass {
    // native another yet class code
}

.yetClass {
    // native yet class code
}

जिस तरह से आपको वांछित आउटपुट प्राप्त करने के लिए कम के वर्तमान संस्करण के साथ जाना है

.somethingShared,
.anotherClass,
.anotherYetClass,
.yetClass {
    // amount of shared code here
}

.someMixin(@val) {
    // do something dynamic with val
}

.anotherClass,
.anotherYetClass {
    .someMixin(a);
}

.yetClass {
    .someMixin(b);
}

.anotherClass {
    // native another class code
}

.anotherYetClass {
    // native another yet class code
}

.yetClass {
    // native yet class code
}

सुझाए गए कम सिंटैक्स

.somethingShared {
    // amount of shared code here
}

.someMixin(@val) {
    // do something dynamic with val
}

.anotherClass:extend(.sometingShared, .someMixin(a)) {
    // native another class code
}

.anotherYetClass:extend(.sometingShared, .someMixin(a)) {
    // native another yet class code
}

.yetClass:extend(.sometingShared, .someMixin(b)) {
    // native yet class code
}

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

और बस कुछ हद तक, लाइव डमी नमूना, जिसका उद्देश्य सिर्फ खेलना है

http://jsbin.com/opekon/1/edit
http://jsbin.com/opekon/2/edit
http://jsbin.com/opekon/3/edit
http://jsbin.com/opekon/4/edit

जैसा कि कहा गया है, मेरे जैसे आलसी लोगों के लिए कुछ परिस्थितियों में वास्तव में प्रदर्शन को बढ़ावा मिल सकता है :)

यहां विस्तार के बारे में एक अच्छा ब्लॉग पोस्ट है जिसमें एसएएसएस के विस्तार के बारे में कई चीजें शामिल हैं, और यह शायद हमारे लिए यह सीखना बुद्धिमानी है कि दूसरों ने यह कैसे किया है। http://designshack.net/articles/css/semantic-grid-class-naming-with-placeholder-selectors-in-sass-3-2/

विशेष रूप से, मेरा मानना ​​​​है कि मिश्रणों को विस्तारित करने का मेरा प्रस्ताव अनिवार्य रूप से एसएएसएस "प्लेसहोल्डर" के समान अंतिम परिणाम प्राप्त करेगा, लेकिन बेकार, अनावश्यक प्लेसहोल्डर-केवल कक्षाएं बनाए बिना।

संपादित करें: हाँ, यहां एक और पोस्ट है जो प्लेसहोल्डर्स को अच्छी तरह से बताती है। यह वही है जो मैं विस्तारित मिश्रणों के साथ प्रस्तावित कर रहा हूं http://maximilianhoffmann.com/article/placeholder-selectors

मैं व्यक्तिगत रूप से इसे अन्य सभी विस्तार-संबंधित सुविधाओं के ऊपर पसंद करूंगा। बिना सवाल के। यह एक मजबूत बयान है, लेकिन मुझे लगता है कि अगर अन्य लोग सहमत नहीं हैं तो मैं इसे समझाने का अच्छा काम नहीं कर रहा हूं। यह काफी दमदार चीज है।

मुझे लगता है कि SASS

 %tile {
  width: 200px;
  height: 200px;
  margin-right: 20px;
}

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

@agatronic जब हम बात कर रहे हैं, तो यह विस्तार क्या है https://github.com/agatronic/less.js/blob/master/lib/less/tree/extend.js होना चाहिए? नोट किया कि यह पहले से ही मुख्य कम शाखा में है। हालांकि नोब सवाल के लिए खेद है।

@ dmi3y यह विस्तार का पहला संस्करण है जिसे 1.4.0 के लिए तैयार पुल अनुरोध से खींचा गया था - यह विस्तार नोड का प्रतिनिधित्व करता है

धन्यवाद @agatronic , अब मैं देखता हूं कि मैंने कितना याद किया;)

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

%tile {
    width: 200px;
    height: 200px;
    margin-right: 20px;
}

यह एक एससीएसएस "प्लेसहोल्डर" के लिए सिंटैक्स है, जिसे एससीएसएस स्पेक में लागू किया गया था ताकि कुछ ऐसा ही पूरा किया जा सके जो मैं विस्तारित मिश्रणों के साथ प्रस्तावित कर रहा हूं। लेकिन इसका पैरामीट्रिक होने से कोई लेना-देना नहीं है। पैरामीट्रिक मिक्सिन केवल _मिक्सिन होते हैं जो पैरामीटर_ को स्वीकार करते हैं, जिसका अर्थ है कि उनके मान हर बार उपयोग किए जाने पर बदल सकते हैं।

@matthewdl

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

तथा

क्या आपका नावबार/बैनर/ड्रॉपडाउन उदाहरण इसके द्वारा समर्थित नहीं होगा...

नहीं, ऑपरेटिव बिंदु छूट रहा है, यह बिल्कुल उल्टा है। शायद भ्रम इसलिए हुआ क्योंकि मैंने अपने उदाहरण में पैरामीट्रिक मिश्रणों पर ध्यान केंद्रित करने की गलती की थी।

तो सबसे पहले, मुझे लगता है कि यह चित्रित करना महत्वपूर्ण है कि सभी मिश्रण पैरामीट्रिक नहीं हैं, कई _not_ पैरामीटर स्वीकार करने के लिए बनाए गए हैं। क्लीयरफ़िक्स जैसे कुछ मिक्सिन का उपयोग किए जाने पर वेरिएबल को बदले बिना बार-बार उपयोग किए जाते हैं। ये इस बात के लिए एकदम सही उपयोग के मामले हैं कि मिक्सी का विस्तार करना फायदेमंद क्यों होगा।

पैरामीट्रिक या नहीं, उनके सभी महिमा मिश्रणों में एक नकारात्मक पहलू यह है कि हर बार एक का उपयोग किया जाता है, इसके गुण दोहराए जाते हैं । तो मैं यह समझाने की कोशिश करता हूं कि केवल "नियमित मिश्रण" का उपयोग करके विस्तारित मिश्रण कैसे काम करेगा, और ऊपर दिए गए उदाहरण के साथ जारी रहेगा।

आपके उदाहरण को देखते हुए, दो पूरी तरह से स्वतंत्र और असंबंधित बिंदु हैं जिन्हें बनाने की आवश्यकता है:

1. बैनर वर्ग अभी भी संकलित सीएसएस में दिखाई देगा चाहे बढ़ाया गया हो या नहीं, लेकिन अगर बैनर वर्ग एक मिश्रित था तो यह केवल परिणामी सीएसएस में दिखाई देगा यदि इस्तेमाल किया गया था (या तो विस्तारित या मिश्रित)। यह अकेला मूल्यवान है। और
2. जब आप एक ही सटीक गुणों को बार-बार दोहराने के बजाय एक मिक्सिन_ का विस्तार करते हैं, तो हम वास्तविक चयनकर्ताओं को मिक्सिन के स्थान पर कॉपी करेंगे।

लेकिन यह सिर्फ एक उदाहरण है। गौर करें कि ट्विटर बूटस्ट्रैप में एक बिंदु पर अकेले .clearfix() मिक्सिन का उपयोग अन्य चयनकर्ताओं के अंदर 20 से अधिक बार किया गया था, और इसे 4 या 5 अन्य संरचनात्मक मिश्रणों के अंदर भी नेस्ट किया गया था, जैसे कि .container-fixed() , .make-row() , और #grid > .core() । अर्थ यह है कि वे मिश्रण हर बार उपयोग किए जाने पर

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

और ऊपर मेरा दूसरा उदाहरण इस बात पर केंद्रित है कि पैरामीट्रिक मिश्रणों के साथ विस्तार कैसे काम करेगा, इसलिए उम्मीद है कि यह तस्वीर को पूरा करेगा और अब और अधिक समझ में आता है? यदि नहीं, तो मेरे द्वारा ऊपर दिए गए लेखों को किसी भी भ्रम को दूर करना चाहिए। मिक्सिन का विस्तार करना बेहद शक्तिशाली और उपयोगी है और आपको नेस्टेड चयनकर्ताओं के समान शुद्ध परिणाम प्राप्त करने की अनुमति देगा, लेकिन विशेष रूप से किसी नेस्टेड चयनकर्ता के बजाय मिक्सिन के साथ। यह आपको अपने चयनकर्ताओं को इस तरह से व्यवस्थित करने की अनुमति देता है जो आपके इच्छित परिणाम प्रदान करने और अनपेक्षित परिणामों से बचने की सबसे अधिक संभावना है। @DesignByOnyx, @agatronic, @matthewdl, वहाँ कुछ भी मैं याद कर रहा हूँ या यहाँ भूल है? भ्रम को दूर करने के लिए हम कुछ भी कर सकते हैं?

धन्यवाद। मुझे लगता है कि मैं उपयोग के मामले को समझता हूं, और मुझे लगता है कि यह पंक्ति इसे सबसे अच्छा कहती है:

बैनर वर्ग एक मिश्रण था, यह केवल परिणामी सीएसएस में दिखाई देगा यदि उपयोग किया गया था (या तो विस्तारित या मिश्रित)

मेरे लिए उसका मतलब बनता है। शायद मैं जो लटका रहा हूं वह यह है कि समग्र :extend वाक्यविन्यास अभी तक अंतिम नहीं है। लेकिन, आप प्रेरक मामले बनाते हैं।

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

यही है, अगर मैं भी ऐसा कुछ कर सकता हूं (या समकक्ष वाक्यविन्यास):

.facebook-button:extend( .button() all ) {
    border: 1px solid #e5e5e5;
}

... फिर मेरी ओर से थम्स अप। लेकिन, मेरे लिए, यह सब इस बात पर निर्भर करता है कि हम चयनकर्ताओं के लिए :extend क्या/कैसे/अगर समाधान करते हैं। लेकिन, सिंटैक्स एक तरफ, एक फीचर आइडिया के रूप में, आप सही हैं, यह ध्वनि है।

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

हां, यह उदाहरण, मुझे अपनी पिछली पोस्ट के साथ स्पष्ट होना था।

%tile {
   width: 200px;
   height: 200px;
   margin-right: 20px;
 }

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

मैं इस चर्चा पर आगे बढ़ रहा हूं और निम्नलिखित टिप्पणी पर अपने लिए स्पष्टता लाना चाहता हूं:

यदि बैनर वर्ग एक मिश्रित था तो यह केवल परिणामी सीएसएस में दिखाई देगा यदि उपयोग किया गया था (या तो विस्तारित या मिश्रित)

तो, एक अधिक सामान्य स्पष्ट उदाहरण के साथ जा रहे हैं, क्या यह कम और परिणामी सीएसएस है ?:

.clearfix() {
    &:before,
    &:after { content: " "; display: table; }

    &:after { clear: both; }
}
.something:extend( .clearfix() ) { }

/*
.clearfix:before,
.clearfix:after,
.something:before,
.something:after {
    content: " ";
    display: table;
}
.clearfix:after,
.something:after {
    clear: both;
}
*/

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

क्या यह ... परिणामी सीएसएस है ?:

मुझे खुशी है कि आप पूछ रहे हैं, लेकिन नहीं , परिणामी सीएसएस में केवल .something वर्ग दिखाई देगा। तो आप अपनी मूल अपेक्षा में सही थे।

बस प्लेसहोल्डर्स लिंक पढ़ें और हां मुझे लगता है कि मिक्सिन को विस्तारित करना चीजों को करने और समान कार्यक्षमता प्राप्त करने का एक बेहतर और कम तरीका है।

अपने उपरोक्त बिंदु को शांत करने के लिए

.clearfix() {
    &:before,
    &:after { content: " "; display: table; }
    &:after { clear: both; }
}
.something:extend( .clearfix() ) { }

/*
.something:before,
.something:after {
    content: " ";
    display: table;
}
.something:after {
    clear: both;
}
*/

और संभवतः यदि .clearfix() { परिभाषा .clearfix { तो इसे विस्तार परिभाषा के अंदर या बिना ब्रैकेट के कॉल करने से आउटपुट पर कोई फर्क नहीं पड़ता ..

विस्तार सुविधा के लिए छद्म वर्ग वाक्यविन्यास का उपयोग करना पूरी तरह गलत है,
क्योंकि "विस्तार sth" "मैच sth" के बराबर नहीं है, इसका मतलब डीओएम संरचना के बारे में कुछ भी नहीं है जो एक चयनकर्ता को करना चाहिए।

आप कम लोगों ने कई बुरे विचारों का "आविष्कार" किया है। सबसे प्रसिद्ध एक मिक्सिन नोटेशन के रूप में "पुन: उपयोग' .xxx (वर्ग चयनकर्ता) है। कम से कम यह सादे सीएसएस से प्रीप्रोसेसर में माइग्रेशन को आसान बनाता है। लेकिन :एक्सटेंड सिंटैक्स सबसे खराब विचार है जिसे मैंने कभी सुना है।

मैं अपने मुद्दों पर इस तरह के शेखी बघारना नहीं चाहता, लेकिन यह पहली बार नहीं है जब मैंने ये बातें सुनी हैं तो चलिए सीएसएस के बारे में बात करते हैं और हवा को साफ करते हैं।

आप कम लोगों ने कई बुरे विचारों का "आविष्कार" किया है। मिक्सिन नोटेशन के रूप में सबसे प्रसिद्ध एक "पुन: उपयोग' .xxx (वर्ग चयनकर्ता) है। ....: विस्तार वाक्यविन्यास सबसे खराब विचार है जिसे मैंने कभी सुना है।

.xxx को एक निहित मिश्रण कहा जाता है। यह काम करता है, और इसे समझना आसान है। वास्तव में, यह वाक्य-विन्यास CSS कल्पना पर उतना "आक्रामक" नहीं है, जितना कि वास्तविक स्टाइल के लिए नियमों का उपयोग करते हुए। @keyframes स्टाइल के रूप में वर्णित किए जाने के सबसे करीब आते हैं और _maybe_ को मैं जो कह रहा हूं उसका अपवाद माना जा सकता है क्योंकि पहचानकर्ताओं का उपयोग किया जाता है जो सीएसएस सिंटैक्स में पहचानकर्ता उत्पादन से मेल खाते हैं। कीफ़्रेम से परे, सामान्य तौर पर सीएसएस के नियम अधिकतर उच्च-स्तरीय कॉन्फ़िगरेशन और शैली- या स्टाइलशीट हेरफेर के लिए आरक्षित होते हैं जो "बाहरी" जानकारी पर आधारित होते हैं, जिसका अर्थ स्वयं शैलियों के बाहर होता है, जैसे वर्ण एन्कोडिंग ( @charset ), या डिवाइस-विशिष्ट स्थितियों ( @media ) का जवाब देना।

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

"विस्तार sth" "मैच sth" के बराबर नहीं है, इसका मतलब डीओएम संरचना के बारे में कुछ भी नहीं है जो एक चयनकर्ता को करना चाहिए।

सही। nth _something_ वाले छद्म-वर्गों को CSS विनिर्देशन द्वारा " संरचनात्मक " छद्म-वर्गों के रूप में वर्णित किया गया है। हालांकि, 6 अन्य प्रकार के छद्म वर्ग हैं: "गतिशील", "नकारात्मक", "लक्ष्य", "रिक्त", "यूआई तत्व राज्य" और "भाषा"। यदि सीएसएस विनिर्देश वास्तव में "विस्तार" सुविधा का वर्णन करता है, तो यह "नकार" और "लक्ष्य" छद्म वर्गों के बीच एक श्रेणी के रूप में काफी सुंदर ढंग से बैठ सकता है।

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

पूरा गलत

एक समुदाय जो संयुक्त रूप से अन्य सभी प्रीप्रोसेसरों से बड़ा है, गलत नहीं हो सकता। कहने के लिए और क्या बचा है?

@hax - :extend थ्रेड्स पर हर किसी की तरह अपना समाधान प्रस्तावित करते हैं। बहुत अनुभवी फ्रंट-एंड डेवलपर्स और LESS के भारी उपयोगकर्ताओं के बीच विभिन्न सुझावों और विचार-विमर्श के हफ्तों के बाद, हम :extend सिंटैक्स के साथ एक संतोषजनक समाधान पर आए। यदि आपके पास कोई बेहतर सुझाव है, तो मेरा विश्वास करें - हम सब कान हैं।

@jonschlinkert में जोड़ने के लिए, .this:not(.that) { } और .this:matches(.that) { } और .this:extend(.that) { } स्पष्ट रूप से समान हैं। वह है: "चयनकर्ता 'यह' दिया गया है, इसे एक विशेष तरीके से चयनकर्ता 'उस' से संबंधित करें।" चूंकि LESS अक्सर CSS में शुरू की गई अवधारणाओं और वाक्य-विन्यास का विस्तार करता है, यह भाषा का एक सुंदर तार्किक विस्तार है। हम सीएसएस की विशिष्टता पर पूरा ध्यान देते हैं, और इसके परिणामस्वरूप, इसकी विशिष्टताओं को प्रतिबिंबित करते हैं। यदि अवधारणा में विषमता है, तो उम्मीद है कि यह पहले सीएसएस में शुरू होगी। इसलिए हमारे मिक्सिन गार्ड्स में, "AND" को "और" शब्द से दर्शाया जाता है, और "OR" को अल्पविराम द्वारा दर्शाया जाता है: क्योंकि मीडिया के प्रश्नों में ऐसा ही होता है। हमारा लक्ष्य CSS को ठीक करना या बदलना नहीं है, बल्कि CSS को काम करने में बहुत आसान बनाना है, और CSS लेखकों के लिए LESS को पूरी तरह से परिचित बनाना है। :extend इसका एक उदाहरण है। यदि आप :not का उपयोग करना जानते हैं, तो आप :extend का उपयोग करना जानते हैं।

क्या होगा यदि हमने घोंसले के शिकार से बचने के लिए और पैरामीट्रिक मिश्रणों का विस्तार करना आसान बनाने के लिए इसके लिए अधिक "अंतर्निहित" वाक्यविन्यास का उपयोग किया?

आज, हम इस तरह एक पैरामीट्रिक मिश्रण का उपयोग करते हैं:

.square {
  .border-radius(9px);
}

इस तरह से मिश्रण को विस्तारित करने के बजाय (जैसा कि आप सामान्य वर्ग का विस्तार कर सकते हैं):

.square {
  &:extend(.border-radius);
}

हम इस तरह बढ़ा सकते हैं:

.box {
  .border-radius:extend(9px);
}
.square {
  .border-radius:extend(9px);
}
.rectangle {
  .border-radius:extend(4px);
}

भेद यह है कि "विस्तारित मिश्रण" अर्धविराम में समाप्त होता है और माता-पिता के अंदर एक मूल्य या मान घोषित करता है, .border-radius:extend(9px); , बजाय कक्षाओं को माता-पिता के अंदर विस्तारित करने और घुंघराले ब्रेसिज़ के साथ एक नया चयनकर्ता ब्लॉक शुरू करने के बजाय, .border-radius:extend(.some-class) {} । आईएमएचओ, यह निहित मिश्रणों ( .border-radius; ) से कम सूक्ष्म नहीं है, जो कम से कम सबसे अच्छी सुविधाओं में से एक है, फिर से आईएमएचओ।

रेंडर किए गए आउटपुट में, किसी भी "विस्तारित पैरामीट्रिक मिक्सिन" को मूल मिक्सिन के स्थान पर प्रस्तुत किया जाएगा, जैसे:

.box, 
.square {
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px;
}
.rectangle {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.some-other-class, 
.another-class, 
.and-another {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

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

मैंने अपने मूल अनुरोध में दिए गए स्पष्ट उदाहरण का उपयोग करते हुए, यह मेरे संशोधित वाक्यविन्यास के साथ ऐसा दिखाई देगा:

.clearfix() {
    // ...
}
.navbar {
    .clearfix:extend(); // instead of &:extend(.clearfix());
}
.banner {
    .clearfix:extend();
    &:extend(.some-class); // "implicit mixin" being extended
}

मुझे यह पसंद है कि आप इसके साथ कहाँ जा रहे हैं। मुझे लगता है कि _मौजूदा_ मिक्सिन सिंटैक्स के अंत में :extend का उपयोग करना एक अधिक अनुकूल तरीका है:

.box {
  .border-radius(9px):extend;
}
.square {
  .border-radius(9px):extend;
}
.rectangle {
  .border-radius(4px):extend;
}

:extend बाद माता-पिता को छोड़ने के बारे में कुछ ऐसा लगता है कि यह मौजूदा विस्तार वाक्यविन्यास की तुलना में एक अलग उद्देश्य प्रदान करता है।

मैं इसके साथ किसी भी तरह से जा सकता हूं, लेकिन मैं .border-radius:extend(9px); पसंद करता हूं क्योंकि यह विस्तारित वाक्यविन्यास के अनुरूप है, आईएमओ यह अभी भी स्पष्ट है कि यह एक मिश्रण है, लेकिन इसका यह भी अर्थ है कि पैरामीटर/मान बढ़ाए जा रहे हैं - जो समझाने में मदद करेगा आउटपुट "समूहीकृत" क्यों है।

@jonschlinkert - इस बिंदु से मैं आपकी राय को बहुत अधिक सम्मान में रखता हूं और आपको जो भी निर्णय सबसे अच्छा लगता है उसका समर्थन करूंगा। मैं कहूंगा कि आपका तरीका ऐसा महसूस करता है जैसे कि 9px को "विस्तार" करने के लिए पास किया जा रहा है, जैसा कि मिक्सिन में ही पारित किया जा रहा है ...

@DesignByOnyx दयालु शब्दों के लिए धन्यवाद। आप जो कह रहे हैं वह बहुत मायने रखता है, मेरे "लेंस" का विस्तार (कम में) कुछ ऐसा है:

.this:extend(.that) {}

तो आप बिंदु मेरे अपने विचार के अनुरूप हैं। @matthewdl या @lukeapage इस पर किसी भी दृश्य / राय है कि आप में से कोई एक कार्य करें? मुझे लगता है कि दोनों वाक्यविन्यास काम कर सकते हैं (और शायद अन्य), लेकिन माना जाता है कि मैंने किसी भी वाक्यविन्यास के साथ "भविष्य-प्रूफिंग" पर ध्यान केंद्रित नहीं किया है, इसलिए या तो कुछ गोचा हो सकते हैं। मुझे ऐसा होते हुए देखना अच्छा लगेगा, मुझे लगता है कि मिक्सिंस का विस्तार करना कम के लिए एक रोमांचक विशेषता है, यह किसी भी अन्य सुविधा की तुलना में डीआरवाई कोड उत्पन्न करने के लिए और अधिक करेगा जो मैं इस समय सोच सकता हूं

कम कंपाइलर स्वचालित रूप से "सही काम क्यों नहीं कर सकता"? दूसरे शब्दों में, अगर मेरे पास यह मिश्रण मेरे कोड में घोषित किया गया है:

.someMixin {
    color: red;
}

और फिर बाद में मैं इसे इस तरह उपयोग करता हूं:

#someElement {
    .someMixin;
}

इस सीएसएस में इस कम कोड को अनुकूलित करने के लिए संकलक पर्याप्त स्मार्ट क्यों नहीं हो सकता है:

.someMixin,
#someElement
{
    color:red;
}

मुझे, उपयोगकर्ता के रूप में, इस व्यवहार को प्राप्त करने के लिए मैन्युअल रूप से :exends कीवर्ड क्यों जोड़ना चाहिए? कंपाइलर को यह समझने के लिए पर्याप्त स्मार्ट होना चाहिए कि यह अनुकूलन किया जा सकता है और फिर इसे करें।

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

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

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

:एक्सटेंड्स () सिंटैक्स अभी भी एक बहुत ही अनाड़ी हैक है जो नए उपयोगकर्ताओं को समझाने के लिए अनपेक्षित और कठिन है।

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

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

@bdkjones कृपया कोड में इसे पूरा करने के लिए अपने सुझावों के साथ "सीएसएस को स्वचालित रूप से अनुकूलित करने" के लिए एक नया फीचर अनुरोध बनाएं। इस तरह के इनपुट का हमेशा स्वागत है।

मुद्दा लेना! मेरी पिछली टिप्पणी में इतना कठोर होने का मेरा मतलब नहीं था; मैं कभी-कभी बहक जाता हूं।

जहां तक ​​कोड की बात है, मुझे डर है कि मैं पूरी तरह से कोडकिट में व्यस्त हूं। मैंने आप लोगों को भाषाओं को हैश करने दिया!

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

@bdkjones समस्या कैस्केड है। आपके उपयोग के मामले में, यह काम करता है, लेकिन चयनकर्ता समूह का सभी मामलों में वांछित परिणाम नहीं होगा, क्योंकि यह संभवतः चयनकर्ताओं को उन चयनकर्ताओं को ओवरराइट करने वाली घोषणाओं को रोकने वाले दस्तावेज़ में "पहले" स्थानांतरित कर देगा।

लेकिन, मैं आपके बयानों से सहमत हूं कि मिक्सिन एक्सटेंड सिंटैक्स के खिलाफ यह यहां विकसित हुआ है। चयनकर्ता एक्स को चयनकर्ता या मिश्रण वाई का विस्तार करना चाहिए, इसलिए यह अजीब लगता है:

.border-radius(9px):extend;

मुझे लगता है कि हम विस्तार वाक्यविन्यास का दुरुपयोग कर रहे हैं। यदि विस्तारित सिंटैक्स मौजूद है, तो यह मिक्सिन्स (जो पूरी तरह से प्रशंसनीय है) के साथ फिट नहीं है, मेरा सुझाव है कि हम मिक्सिन्स के लिए सही सिंटैक्स ढूंढते हैं, बजाय इसके कि @bdkjones पॉइंट्स के रूप में रूपक को

मुझे लगता है कि हम विस्तार वाक्य रचना का दुरुपयोग कर रहे हैं

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

आपके उपयोग के मामले में, यह काम करता है, लेकिन चयनकर्ता समूह का सभी मामलों में वांछित परिणाम नहीं होगा, क्योंकि यह संभवतः चयनकर्ताओं को उन चयनकर्ताओं को ओवरराइट करने वाली घोषणाओं को रोकने वाले दस्तावेज़ में "पहले" स्थानांतरित कर देगा।
...
मुझे लगता है कि हम विस्तार वाक्यविन्यास का दुरुपयोग कर रहे हैं। यदि विस्तारित सिंटैक्स मौजूद है, तो यह मिक्सिन (जो पूरी तरह से प्रशंसनीय है) के साथ फिट नहीं है, मेरा सुझाव है कि हम मिक्सिन के लिए सही सिंटैक्स ढूंढते हैं, बजाय इसके कि विस्तारित सिंटैक्स को इस तरह से विस्तारित करें जो रूपक को उलझाता है, जैसा कि bdkjones बताते हैं। .

नहीं। उन्होंने कुछ भी नहीं बताया, उन्होंने हमें कम उपयोग में आसान बनाने का आग्रह किया - वह उनकी निचली पंक्ति थी। ऐसा करने का उनका सुझाया तरीका गलत था, लेकिन इरादा अच्छा था। वह जिस कैस्केड के बारे में नहीं सोच रहा था वह वह झरना है जिसे आपने अभी इंगित किया है। सामान्य रूप से विस्तार का उपयोग करते समय आपको कैस्केड को ध्यान में रखना चाहिए। मुझे लगता है कि जो कोई भी मिश्रण के बजाय विस्तार का उपयोग करता है, वह इसके बारे में जानता है। इसलिए, इसलिए Less.js आपको इसका उपयोग करने का विकल्प प्रदान करता है जब यह समझ में आता है, या _not_ जब यह नहीं होता है। तथ्य यह है कि सीएसएस में पहला "सी" कैस्केडिंग के लिए खड़ा है, कैस्केड भौतिक नहीं होने पर डुप्लिकेट शैलियों को समेकित करने के लाभ को नकारता नहीं है। मुझे यहां क्या समझ नहीं आ रहा है?

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

क्या आप इस सुविधा, या वाक्य रचना के खिलाफ हैं?

मैं फीचर के लिए हूं, बिल्कुल। यह एक स्पष्ट दिशा है। मैंने इस सूत्र में फिर से वाक्य रचना की समीक्षा की। कुछ विचार:

सबसे पहले, यह मेरे लिए अजीब है:

.something:extend( .clearfix() ) { }

डबल कोष्ठक सिर्फ अजीब हैं। लेकिन, यह मौजूदा विस्तार वाक्य रचना का एक वफादार अंगीकरण है, जो काफी उचित है। इसलिए, इसलिए मैं किसी और चीज की वकालत कर रहा था, शायद विस्तार के अलावा कुछ और।

फिर यह है जो आपने प्रस्तावित किया है, मुझे लगता है कि इसी तरह के कारणों से:

.border-radius(9px):extend;

...जिससे मुझे एलर्जी की प्रतिक्रिया हुई, क्योंकि यह मौजूदा विस्तार के विपरीत लगता है। तो वहीं यह मेरे लिए दुरुपयोग की तरह लग रहा था।

लेकिन

मुझे एहसास हुआ कि वहाँ वास्तव में दो विकल्प हैं। एक यह है कि हम मिक्सिन के लिए कुछ अलग करते हैं। लेकिन दूसरा विकल्प यह है कि हम मिक्सिन सहित सभी चीजों के लिए मौजूदा एक्सटेंड स्पेक को संशोधित करते हैं, जैसे:

#namespace {
  .box-template {
    .subelement {
      // we'll add the all flag to extend everything here
    }
  }
}
.clearfix() {
  // a clearfix mixin
}
.text-shadow(@shadow) {
  -moz-text-shadow: @shadow;
  text-shadow: @shadow;
}
.some .random .selector {
  // with properties
}
.mybox {
  .clearfix:extend;
  #namespace > .box-template:extend !all;
  .text-shadow:extend(2px 2px #ff0000);
  .some .random .selector:extend;
}

लेकिन.... एक पूर्ण चयनकर्ता ( .some .random .selector ) के साथ, यह गलत पढ़ना शुरू कर देता है। ऐसा लगता है कि बस .selector के पास इसका विस्तार है। और "विस्तार" शब्द खो जाने लगता है, जब यह इस घोषणा में महत्वपूर्ण शब्द है। ऐसा नहीं था जब इसे &:extend() रूप में लिखा गया था (क्योंकि यह शुरुआत में दिखाई दिया था), लेकिन यह वाक्यविन्यास मिश्रणों के साथ टूटने लगता है।

इसलिए, मैं इनमें से किसी एक विकल्प का प्रस्ताव रखूंगा:

// Migrating existing syntax, but ommitting a parens requirement when used with &:

.mybox {
  &:extend .clearfix;
  &:extend #namespace > .box-template !all;
  &:extend .text-shadow(2px 2px #ff0000);
  &:extend .some .random .selector;
}

// Adopting something similar to the SASS approach

.mybox {
  <strong i="24">@extend</strong> .clearfix;
  <strong i="25">@extend</strong> #namespace > .box-template !all;
  <strong i="26">@extend</strong> .text-shadow(2px 2px #ff0000);
  <strong i="27">@extend</strong> .some .random .selector;
}

मुझे लगता है कि मिक्सिन और मीडिया प्रश्नों के विस्तार के बारे में चर्चा ने इस बात पर प्रकाश डाला है कि :extend लिए हमारा मूल सिंटैक्स दृष्टिकोण इतना लचीला नहीं है, खासकर जब हम कई चयनकर्ताओं और मिश्रणों का विस्तार करना चाहते हैं।

मुझे लगता है कि यह प्राप्त करना महत्वपूर्ण है: विस्तार सही। यदि हम मिश्रण के लिए "विस्तार" का उपयोग करना चाहते हैं, तो मुझे लगता है कि हमें विस्तार वाक्यविन्यास को संशोधित करना होगा।

मैंने .border-radius(9px):extend; का प्रस्ताव नहीं दिया, @DesignByOnyx ने किया। मैंने .border-radius:extend(9px); प्रस्ताव रखा

लेकिन या तो वाक्य रचना मेरे साथ ठीक है। या हम .border-radius(9px) !extend; या .border-radius:shamallamadingdongscoobiedoo(9px):extendmyass (जेके) कर सकते हैं, इससे मुझे कोई फर्क नहीं पड़ता क्योंकि मिश्रण के व्यवहार के साथ कुछ भी नहीं बदलता है या बिल्कुल भी विस्तार नहीं होता है।

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

यह सुविधा अनुरोध स्पष्ट रूप से मिक्सिन की विरासत में मिली संपत्तियों को मिक्सिन_ के स्थान पर कॉपी करने की क्षमता के बारे में है, और यह उन नियमों का पालन करेगा जो पहले से ही मौजूदा मिक्सिन व्यवहार के साथ अच्छी तरह से स्थापित हो चुके हैं, और अब इसके साथ पूर्वता और समान व्यवहार भी है <strong i="14">@import</strong> (reference) सुविधा (जो, btw, मैं अभ्यास और प्यार में काफी उपयोग कर रहा हूं)। संक्षेप में:

• जब आप एक मिक्सिन का उपयोग करते हैं, तो इसके गुण मिक्सिन को कॉल करने वाले चयनकर्ता के स्थान पर कॉपी हो जाते हैं।
• जब आप विस्तार का उपयोग करते हैं, तो _extending_ चयनकर्ता _extended_ वर्ग के स्थान पर कॉपी हो जाता है।
• इस प्रकार, जब आप एक मिश्रण का विस्तार करते हैं, तो कॉलिंग चयनकर्ता मिश्रण के स्थान पर कॉपी हो जाता है।

मुझे यकीन नहीं है कि आप दो साल की बहस के बाद सिंटैक्स पर बहस को फिर से क्यों बढ़ाना चाहते हैं, > 100 पोस्ट, बहुत सारे शोध और मामला पहले ही बना दिया गया है कि यह @extend से _बहुत अधिक_ लचीला है

बीटीडब्ल्यू, मुझे यकीन नहीं है कि आपका क्या मतलब है:

एक पूर्ण चयनकर्ता (.some .random .selector) के साथ, यह गलत पढ़ना शुरू कर देता है। ऐसा लगता है कि बस .selector के पास इसका विस्तार है। और "विस्तार" शब्द खो जाने लगता है, जब यह इस घोषणा में महत्वपूर्ण शब्द है।

मैं इस बात से सहमत नहीं हूं कि यह भ्रमित करने वाला है, क्योंकि अब यह वास्तव में इसी तरह काम करता है। क्या यह कहने जैसा नहीं है "सीएसएस डेवलपर्स नहीं जानते कि समूहबद्ध चयनकर्ता कैसे काम करते हैं"? :hover या :after क्या? मुझे लगता है कि सीएसएस देव इसे ठीक से समझ सकते हैं, क्योंकि यह अन्य छद्मों की तरह ही काम करता है।

.some .random .selector:extend(.something) {}

मुझे यह लचीलापन पसंद है, क्योंकि मैं या तो (या दोनों) चयनकर्ता पर विस्तार लागू कर सकता हूं, जो .some .random .selector , न कि .selector , या मैं इसे चयनकर्ता ब्लॉक के अंदर टक कर सकता हूं।

मुझे लगता है कि मिक्सिन और मीडिया प्रश्नों के विस्तार के बारे में चर्चा

मैंने मीडिया प्रश्नों के मुद्दे को बंद कर दिया क्योंकि मुझे एहसास हुआ कि इसे मिश्रित मिश्रणों के साथ हल किया जा सकता है। "सभी सड़कें _____ की ओर ले जाती हैं" मिक्सिन का विस्तार करती हैं। ;-)

मैं अपने दो सेंट में फेंकना चाहूंगा कि माता-पिता के अंदर माता-पिता - :extend( .some-mixin() ) - वास्तव में मुझे इतना परेशान नहीं करते हैं, खासकर जब से :extend( .some-selector ) पहले से ही स्थापित है और विज्ञापन मतली पर चर्चा की गई है। मैं मानता हूं कि डबल माता-पिता किसी भी तरह से आदर्श नहीं हैं और यह _does_ थोड़े अजीब लगता है। लेकिन मुझे लगता है कि यह महत्वपूर्ण है कि मिश्रण और चयनकर्ताओं को "विस्तार" के संदर्भ में समान माना जाता है, वैसे ही क्लासिक कम में उनके साथ समान व्यवहार किया जाता है:

header {
    .some-selector;
    .some-mixin;
    .some-mixin();
}

जैसे, मुझे ऐसा करने से वास्तव में बहुत बुरा (या सीमित) नहीं लगता:

header {
    &:extend( .some-selector );
    &:extend( .some-mixin );
    &:extend( .some-mixin() );
}

लेकिन मुझे लगता है कि यह महत्वपूर्ण है कि मिश्रण और चयनकर्ताओं के साथ "विस्तार" के संदर्भ में समान व्यवहार किया जाए, ठीक उसी तरह जैसे क्लासिक लेस में उनके साथ समान व्यवहार किया जाता है।

मैं उस बिंदु पर उसी पृष्ठ पर हूं।

मुझे यकीन नहीं है कि आप दो साल की बहस के बाद विस्तार के लिए वाक्य रचना पर बहस को फिर से क्यों करना चाहते हैं, > १०० पोस्ट

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

तो, हम इसके साथ अच्छे हैं?

.mybox {
  &:extend(.clearfix());
  &:extend(#namespace > .box-template all);
  &:extend(.text-shadow(2px 2px #ff0000));
  &:extend(.some .random .selector);
}

माता-पिता के अंदर माता-पिता - :extend( .some-mixin() ) - वास्तव में मुझे इतना परेशान नहीं करता है, खासकर जब से :extend( .some-selector ) पहले से ही स्थापित है

हाँ सच है, और वास्तव में हमारे पास पहले से ही कम.जेएस में डबल माता-पिता के लिए मिसाल है, और मौजूदा विस्तार वाक्यविन्यास के साथ। और जो मिसाल पहले ही तय की जा चुकी है, वह आंखों के लिए उतनी आसान नहीं है, जितनी हम मिक्सिन के साथ सुझा रहे हैं। वर्तमान में, हम यह कर सकते हैं:

.one:nth-child(5) {
  color: red;
}
// We can extend psuedos
.two:extend(.one:nth-child(5)) {
  background: blue;
}
// And attributes
.two:extend(.one, [hidden]) {
  width: 2px;
}

आपको मौजूदा सीएसएस सिंटैक्स में नेस्टेड माता-पिता भी मिलेंगे।

तो यहाँ हमारे पास _nested parens_ और _nested pseudo-class_ सिंटैक्स दोनों हैं। और मुझे इससे कोई समस्या नहीं है, यह स्पष्ट आईएमओ है।

तो मैं @DesignByOnyx से सहमत

वास्तव में, मूल वाक्यविन्यास कई अल्पविराम से अलग वर्गों या मिश्रणों को विस्तारित करने की अनुमति देगा।

.banner {
    &:extend(.clearfix(), .border-radius(4px), .alert, .navbar-fixed-top, [hidden]); 
}

यह काम करता है, और यह तंग है। यहां कोई शिकायत नहीं है।

तो, हम इसके साथ अच्छे हैं?

हां। पूरी तरह। सीएसएस में ऐसा पहले से ही है। तो मैं इसके साथ अच्छा हूँ।

हां। पूरी तरह। सीएसएस में ऐसा पहले से ही है। तो मैं इसके साथ अच्छा हूँ।

तो क्या यह पारित हो जाएगा।

प्रश्न, मुझे नहीं लगता कि वर्तमान में हमारे पास कई चयनकर्ताओं के लिए समर्थन है: विस्तार, इसलिए मैं सोच रहा हूं कि "सभी" कीवर्ड उस प्रारूप में कहां फिट होंगे, लेकिन यह शायद एक अलग मुद्दे का हिस्सा होना चाहिए।

आपने अपना मामला बना लिया है, श्रीमान श्लिंकर्ट। आपको कानून में जाना चाहिए था। ;)

मुझे नहीं लगता कि वर्तमान में हमारे पास कई चयनकर्ताओं के लिए समर्थन है :exend

लेकिन हम हालांकि करते हैं ;-) मैंने इसे बड़े पैमाने पर किया है। अभी पहले किया था:

.global-nav {
  // Extend and override bootstrap styles
  &:extend(.navbar, .navbar-fixed-top all, .navbar-inverse); // this works, and it's pretty handy
  &.hidden:extend(.navbar.hidden) {}
  &.visible:extend(.navbar.visible) {}
  &:hover {
    background: lighten(@brand-primary, 5%);
  }
  .navbar-brand {
    padding-left: 20px; 
  }
  .navbar-nav > .active > a {
    &, &:hover, &:focus {
      background-color: darken(@brand-primary, 5%);      
    }
  }
}

आपने अपना मामला बना लिया है, श्रीमान श्लिंकर्ट। आपको कानून में जाना चाहिए था। ;)

Pfft, योग्य ओह, तुम रोको!

मैं सिर्फ यह जोड़ना चाहता हूं कि मुझे लगता है कि यह वाक्यविन्यास:

.foo {
  &:extend( .bar() );
}

बढ़िया है। मुझे कोष्ठक बिल्कुल भी अजीब नहीं लगते।

लेकिन मुख्य रूप से मैं चाहता हूं कि आप लोग जल्दी करें ताकि मैं अपने पसंदीदा प्रीप्रोसेसर में एसएएसएस में काम कर रहे सभी अच्छे सामान कर सकूं: डी

आपकी प्रतिक्रिया के लिए धन्यवाद, @mgerring !

+1 इस सुविधा की प्रतीक्षा कर रहा है। अच्छा काम करते रहें :)

मूल पोस्ट के लिए:

.clearfixed {
   // stuff
}
.clearfix() {
    &:extend(.clearfixed);
}
.navbar {
  .clearfix();
}
.banner {
  .clearfix();
}

शायद यह पोस्टिंग के समय काम नहीं किया? लेकिन इसके परिणामस्वरूप आप जो चाहते हैं उसके बहुत करीब हैं:

.clearfixed,
.navbar,
.banner {
  // stuff
}

@aaronmw , हाँ सुनिश्चित करें कि आपका उदाहरण वही करता है, लेकिन इस प्रस्ताव का मुख्य बिंदु कहीं और परिभाषित मिश्रण को विस्तारित करने की क्षमता है (यानी जब आप मिश्रण को संशोधित नहीं कर सकते या नहीं करना चाहते हैं, उदाहरण के लिए अन्य फ़ाइल, साझा की गई पुस्तकालय आदि)

हाँ, प्रति @ सात-चरण-अधिकतम बिंदु, यह आपके द्वारा वर्णित तरीके से किया जा सकता है, लेकिन यह मुहावरेदार नहीं है।

ठीक है - क्षमा करें, मैंने अब इस धागे को और अधिक पढ़ लिया है और देखें कि हम क्या लक्ष्य बना रहे हैं। मैंने जिस "कंकाल" वर्ग का उपयोग किया है वह संकलित आउटपुट में सिर्फ कचरा है क्योंकि .clearfixed वर्ग को मिश्रण के बाहर स्पष्ट रूप से संदर्भित नहीं किया जाएगा। &:विस्तार(.clearfix()) अब मेरे लिए समझ में आता है, और बहुत रोमांचक है। अभी के लिए, मैं अपने CSS में गंदगी फैलाने वाले कंकाल वर्गों से निपटूंगा।

यहाँ बढ़िया चर्चा!

:+1:

तो हम इस सुविधा की उम्मीद कब कर सकते हैं? यह OOCSS जैसी अवधारणाओं के लिए "अमूर्त वर्ग" जैसी संरचनाएँ बनाने के लिए काफी उपयोगी है।

• तय करें कि हम नेस्टिंग/स्कोप और मिक्सिन बनाम सामान्य वर्ग के साथ कैसे सामना करते हैं उदा

.a {
  color: green;
}
#thing {
  .a() {
    color: black;
   }
}

.b:extend(#thing .a) {}  //
.b:extend(.a) {}  // and if so is the output wrapped by #thing?
.b:extend(.a()) {}  // do I need special format to say extend only that mixin?

• क्या हम तर्कों को संभालते हैं? क्या हम समान तर्कों के साथ मिश्रणों को जोड़ते हैं?
• मिक्सिन परिभाषाओं को न हटाने के लिए-सीएसएस-विज़िटर में बदलें
• मिश्रित परिभाषाओं पर जाने के लिए विज़िटर का विस्तार करें और नए वर्ग के साथ एक नया नियम बनाएं

मुझे लगता है कि सबसे कठिन बिट वास्तव में _exactly_ पर निर्णय लेना है कि इसे कैसे काम करना चाहिए।

तय करें कि हम नेस्टिंग/स्कोप और मिक्सिन बनाम सामान्य वर्ग के साथ कैसे सामना करते हैं उदा

मैं इस तरह से मिक्सिन एक्सटेंशन की व्याख्या करने की कोशिश करूंगा:
.b:extend(.a(1, 2, 3)) {} को 'बी' के दायरे में एक अज्ञात गैर-पैरामीट्रिक मिश्रण (यानी साधारण चयनकर्ता) बनाने के बराबर व्यवहार करना चाहिए जो .a(1, 2, 3) अंदर बुलाता है और फिर सामान्य तरीके से बढ़ाया जाता है, यानी यह:

.a(<strong i="11">@a</strong>, <strong i="12">@b</strong>, @c) {
    // ...
}

.b:extend(.a(1, 2, 3)) {}

इसके बराबर होना चाहिए:

.a(<strong i="16">@a</strong>, <strong i="17">@b</strong>, @c) {
    // ...
}

#__anon_a_1_2_3 {.a(1, 2, 3);}

.b:extend(#__anon_a_1_2_3) {}

आउटपुट में #__anon_a_1_2_3 को छोड़कर कोई भी दिखाई नहीं देता है। मुझे लगता है कि इस तरह के दृष्टिकोण को किसी विशेष नियम का आविष्कार करने के लिए इसे कम या अधिक सरल बनाना चाहिए।

तो उपरोक्त अवधारणा को #thing .a उदाहरण पर लागू करने से हमें निम्नलिखित मिलते हैं:

.a {
  color: green;
}
#thing {
  .a() {
    color: black;
   }
}

.b:extend(#thing .a) {} // since we do ignore parens on mixin call and have ...
// no plans changing this (?), it should probably create .b {color: black} 

.b:extend(.a) {}  // there's only one .a in this scope so it's -> .b {color: green}

.b:extend(.a()) {}  // same as above -> .b {color: green}

दूसरी ओर, "वैकल्पिक माता-पिता" व्यावहारिक दृष्टिकोण से काफी मामूली बात है, इसलिए इसे और अधिक सख्त बनाना भी ठीक हो सकता है और extend अंदर पैरामीट्रिक मिश्रण के लिए माता-पिता की आवश्यकता होती है (इस पर कोई दबाव नहीं है extend सादे मिक्सिन कॉल सिंटैक्स को इनहेरिट करने के लिए क्योंकि यह वैसे भी पूरी तरह से संगत नहीं होगा)।

क्या हम समान तर्कों के साथ मिश्रणों को जोड़ते हैं?

आदर्श रूप से हाँ, अन्यथा यह पूरी चीज़ को बेकार कर देगा जैसे:

.b:extend(.a()) {}
.c:extend(.a()) {}

बनाना चाहिए:

.b, .c {color: green}

हम्म, ऐसा लगता है कि विलय को लागू करना सबसे कठिन काम होगा।

एक और समस्या गुंजाइश है, जैसा कि हाल ही में # 1730 में बढ़ी है, मिक्सिन 'रिश्तेदार' स्कोप पथ का उपयोग करते हैं और 'पूर्ण' का उपयोग करते हैं, इसलिए दोनों को मिलाते समय हमें एक प्रकार का संघर्ष मिलता है:

.div {color: green}

body {
   .div {color: red}

   p-a       {.div()}    // -> body p-a {color: red}
   p-b:extend(.div)   {} // -> body p-b {color: green}
   p-c:extend(.div()) {} // -> ???
}

और यह और भी भ्रमित करने वाला है यदि हम इस उदाहरण को पैरामीट्रिक मिश्रणों के साथ फिर से लिखते हैं।

मैं यह कहने के लिए अपने दो सेंट की पेशकश करना चाहता हूं कि यह पीछे हटने का एक अच्छा समय हो सकता है और कह सकता है कि "विस्तारित मिश्रणों का उपयोग कैसे किया जाना चाहिए" - और मुझे लगता है कि

.dog() {
    .leg { ... }
    .ears { ... }
    .fur { ... }
}

मुझे नहीं लगता कि हमें उन परिस्थितियों पर ध्यान केंद्रित करना चाहिए जहां एक उपयोगकर्ता निम्नलिखित करना चाहेगा:

.dog() {
    .leg { ... }
    .ears { ... }
    .fur { ... }
    .tail:extend( .leg() ) { 
        .toes { display:none; } 
    }
}

न केवल यह एक फ्रिंज केस परिदृश्य आईएमओ है, बल्कि उपयोगकर्ता को अपनी शैलियों को इस तरह लिखना चाहिए:

.dog() {
    .leg, .tail { ... }
    .ears { ... }
    .fur { ... }
    .tail .toes { display:none; }
}

मिक्सिन को विस्तारित करने के लिए 99.8% उपयोग का मामला डेवलपर्स को अपने विशाल LESS पुस्तकालयों को उन शैलियों से भरा हुआ है जो उन्होंने वर्षों से जमा किए हैं। यह विशाल पुस्तकालय इस तरह की चीजों से भरा होगा:

.clearfix() { ... }
.modal() { ... }
.alert-box() { 
    &:extend( .modal() ); 
    &.message { ... } 
    &.warning { ... } 
    &.error { ... } 
}
.grid-wrap() { ... }
.form-input() { ... }
.form-select() { ... }
.button( <strong i="16">@bgColor</strong>, <strong i="17">@textColor</strong> ) { ... }
[... thousands more like this ...]

और वे लेखन शैली पर ध्यान केंद्रित कर सकते थे:

.page-wrap:extend( .grid-wrap(), .clearfix() ) { ... }
input[type="text"]:extend( .form-input ) { ... }
textarea:extend( .form-input() );

वे ऐसा भी कर सकते थे, यदि वे चाहते थे और "मोडल" शैलियों में से कोई भी अंतिम आउटपुट में मौजूद नहीं होगा क्योंकि उनका इस परियोजना में उपयोग नहीं किया जा रहा है:

.inline-error:extend( .alert-box.error )

हाँ, मुझे लगता है कि @DesignByOnyx में एक बात है। मुझे नहीं लगता कि बाद में अधिक जटिल चीजों का पता लगाने में कुछ गलत है। वास्तव में, मुझे लगता है कि अभी के लिए पहले _just गैर-पैरामीट्रिक_ मिश्रण को विस्तारित करना सबसे अच्छा होगा। इसमें संभवतः सभी उपयोग मामलों के 80 - 9 0% शामिल होंगे (स्टाइलशीट्स आदि के लिए अधिक ऑब्जेक्ट-ओरिएंट संरचना की अनुमति देना)। बाकी सब कुछ एक या दो पैच इंतजार कर सकता है, आईएमओ।

@DesignByOnyx और @calvinjuarez हम इसे बाद में नहीं समझ सकते .. इसे एक या दूसरे तरीके से कोड करना होगा। यदि हम किसी समाधान पर कूदते हैं और बाद में इसे बदलने का निर्णय लेते हैं, तो हम ब्रेकिंग परिवर्तन पेश करते हैं, जो अच्छा नहीं है।

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

@ सात-चरण-अधिकतम उपरोक्त नस में, मुझे अभी के लिए पैरामीट्रिक मिश्रणों की अनदेखी करने में खुशी होगी।

हम्म, ऐसा लगता है कि विलय को लागू करना सबसे कठिन काम होगा।

• लेकिन यह विलय हो रहा है? मैं मौजूदा विस्तार के समान दृष्टिकोण का उपयोग करूंगा, उदाहरण के लिए यह एक मैच ढूंढता है और उस पर जुड़ जाता है .. इसके genCSS में मामला

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

@lukeapage : +1: सच है, मैं इसे खोद सकता हूं। बढ़िया कॉल।

दरअसल, मुझे लगता है कि @ सेवन-फेज-मैक्स ने इसे सही पाया है। तो: +1: वहां भी।

@lukeapage - मैं "एक तरह से या किसी अन्य" प्रकार के समाधान की वकालत करने की कोशिश नहीं कर रहा था, बल्कि एक दृष्टिकोण जो (जैसा आपने कहा था) फ्रिंज मामलों का समर्थन नहीं करता है। तथ्य की बात के रूप में, हम पहले से ही "स्थानीय" दायरे की क्षमता से आगे बढ़ चुके हैं और "वापस जाने के लिए बहुत देर हो चुकी" चरण आईएमओ में प्रवेश कर चुके हैं क्योंकि :extend इस तरह काम करता है:

.block { color: green; }

.component {
  .block { color: red; }    
  div:extend( .block ) {};
}

/*
.block,
.component div {
  color: green;
}
.component .block {
  color: red;
}
*/

मुझे कोई कारण नहीं दिख रहा है कि निम्नलिखित कोड को उपरोक्त से अलग तरीके से काम करना चाहिए - लाभ यह है कि अंतिम आउटपुट में कोई .block वर्ग नहीं है:

.block() { color: green; }

.component {
  .block() { color: red; }  
  div:extend( .block() ) { };
}

/*
.component div {
  color: green;
}
*/

बीटीडब्ल्यू।, हमारे नामकरण सम्मेलनों में थोड़ा सा बह रहा है :) उदाहरण के लिए मेरे लिए "पैरामीट्रिक मिक्सिन्स" का अर्थ है माता-पिता के साथ परिभाषित कोई भी मिश्रण, जिसमें 0 पैरामीटर शामिल हैं (यानी .mixin() {} एक "पैरामीट्रिक" है)। और "गैर-पैरामीट्रिक" मिश्रण एक साधारण चयनकर्ता है (अर्थात .mixin {} )। अब तक मुझे लगता है कि इस बहाव ने कोई गलतफहमी पैदा नहीं की (उदाहरण के लिए ऊपर के अधिकांश उदाहरणों में यह संदर्भ से स्पष्ट था कि .mixin() {} को "गैर-पैरामीट्रिक" मिश्रण के रूप में संदर्भित किया गया था), लेकिन ...
याद न करें कि दस्तावेज़ों में एक साधारण चयनकर्ता को "मिक्सिन" के रूप में भी नामित किया गया है (जैसे ही इसे मिश्रित किया जाता है) और यह डिज़ाइन द्वारा "गैर-पैरामीट्रिक" मिश्रण भी है। तो .mixin() {} को "गैर-पैरामीट्रिक" के रूप में संदर्भित करना पूरी तरह से अस्पष्ट हो सकता है (तकनीकी रूप से अंतर उपस्थिति या परिभाषा कोष्ठक की कमी में है और तर्कों की संख्या में नहीं)।
ठीक है, यह मेरा सामान्य बू-बू-बू था। :)

@lukeapage

मुझे अभी के लिए पैरामीट्रिक मिश्रणों को अनदेखा करने में खुशी होगी।

यानी गैर-शून्य पैरामीटर वाले मिश्रणों के लिए विस्तार का समर्थन नहीं कर रहा है? आई 'म ओके विद दैट। मैं सिर्फ यह अनुमान लगाने की कोशिश कर रहा था कि इसे कैसे लागू किया जा सकता है (एक एकीकृत तरीके से शून्य और गैर-शून्य पैरामीटर मिश्रणों को सीमित किए बिना, ताकि यह शो-स्टॉपर न हो जब/बाद में बाद में कूदें)।

लेकिन यह विलय हो रहा है? मैं मौजूदा विस्तार के समान दृष्टिकोण का उपयोग करूंगा, उदाहरण के लिए यह एक मैच ढूंढता है और उस पर जोड़ता है ..

ठीक है, मुझे लगता है कि मैं वास्तविक तर्कों के साथ मिश्रणों के विस्तार के विलय के साथ संभावित कठिनाइयों के बारे में और सोच रहा था। उदाहरण:

.b:extend(.a(1, 2, 3)) {}
.c:extend(.a(1, 2, 3)) {}

दूसरी तरफ मुझे संदेह है कि शून्य-पैरामीटर मिश्रणों के साथ भी छिपे हुए आश्चर्य हैं, उदाहरण के लिए:

.a {color: red}
.a {width: 2px}

.b:extend(.a) {}   // creates two `.b` blocks (it is expected since there're two `.a` blocks anyway)

.c {.a}            // creates one `.c` block (OK, this is just how mixins work)

.d() {color: blue}
.d() {width: 10px}

.e {.d()}          // creates one `.e` block (OK, this is just how mixins work)

.f:extend(.d()) {} // tada! another room for complains if this creates two `.f` blocks :)

खैर, शायद यह बहुत गहरा हो जाता है (और इस समय इसकी चिंता करने के लिए बहुत मामूली)।

.f:extend(.d()) {} // tada! another room for complains if this creates two .f blocks :)

इस सोच के साथ कि "चूंकि, इस उदाहरण में, .d() पैरामीट्रिक है, इसे दो .f ब्लॉक नहीं बनाना चाहिए"?

हाँ, मैं आपकी बात देख सकता हूँ, यह देखते हुए कि एक मिश्रण का परिणाम होगा:

.f {
  color: #0000ff;
  width: 10px;
}

आईएमएचओ अगर इसे चरणों में करने के लिए समझ में आता है तो शायद इसे समझाएं, लेकिन मैं प्रति शिकायत से बचने के लिए _not_ कुछ लागू नहीं करता। बेशक, यह सिर्फ मेरा 2c है। और यदि इसे आपके द्वारा वर्णित व्यवहार के साथ कार्यान्वित किया जाता है, तो आप - सुविधा जोड़ने के समय - "विस्तारित चयनकर्ताओं से सीएसएस ब्लॉक विलय" के लिए एक फीचर अनुरोध भी बना सकते हैं, बस शिकायतों को दूर करने के लिए ...?

लेकिन मैं प्रति शिकायत से बचने के लिए कुछ लागू नहीं करता।

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

:+1: हाँ, मुझे पसंद है कि आप कैसा सोचते हैं!

मुझे अच्छा लगा कि यह चर्चा अभी भी चल रही है। मैं इस चर्चा के कुछ बिंदुओं पर वापस जाता हूं। पहला, जहां तक ​​सामान्य उपयोग की बात है, यह बराबर रहा है।

.mixin {} == .mixin() {}

अपवाद के साथ कि .mixin { } एक वर्ग के रूप में आउटपुट प्राप्त करता है। मुझे पता है कि पार्सर में उनके साथ अलग तरह से व्यवहार किया जाता है, लेकिन उपयोग में, वे संपत्ति/मूल्य जोड़े को डंप कर देते हैं।

अर्थ:

.mixin1() {
    color: red;    
}
.mixin2 {
    color: blue;
}
.use1 {
    .mixin1;
    foo:bar;
}
.use2 {
    .mixin2;
    foo:bar;
}

इस कम सिंटैक्स इतिहास के कारण, यह समझ में आता है कि मैं ऐसा करने में सक्षम होगा:

.mixin1() {
    color: red;    
}
.mixin2 {
    color: blue;
}
.use1 {
    &:extend(.mixin1);
    foo:bar;
}
.use2 {
    &:extend(.mixin2);
    foo:bar;
}

मेरे लिए, यह गैर-विवादास्पद है, जैसा कि हमने अक्सर बात की है: मूल मिक्सिन उपयोग के कई उदाहरणों के ड्रॉप-इन प्रतिस्थापन के रूप में विस्तार करें।

आम आदमी के लिए, यह शायद सहज रूप से समान होगा, क्योंकि .mixin1 को ऐतिहासिक रूप से निम्नलिखित तरीके से संदर्भित किया जा सकता है, चाहे वह कोष्ठक के साथ लिखा गया हो या नहीं:

.use1 {
    &:extend(.mixin1);
    foo:bar;
}
.use1 {
    &:extend(.mixin1());
    foo:bar;
}

तो, मैं इसकी अपेक्षा करता हूं:

.mixin1() {
    color: red;    
}
.use1 {
    &:extend(.mixin1());
    foo:bar;
}
.use2 {
    &:extend(.mixin1());
    bar:foo;
}

... आउटपुट के लिए ...

.use1, .use2 {
    color: red;    
}
.use1 {
    foo:bar;
}
.use2 {
    bar:foo;
}

यदि मिक्सिन को दो बार परिभाषित किया जाता है, तो विस्तारित होने पर इसे दो बार बदल दिया जाता है, ठीक उसी तरह जैसे कि इसकी बहन, वर्ग चयनकर्ता।

.mixin1() {
  color: red;
}
.mixin1() {
  width: 30px;
}
.use1 {
  &:extend(.mixin1);
  foo: bar;
}
.use2 {
  &:extend(.mixin1);
}
//output

.use1, .use2 {
  color: red;
}
.use1, .use2 { 
  width: 30px;
}
.use1 {
  foo: bar;
}

यह अनिवार्य रूप से अब विस्तार कैसे काम करता है यदि आप मिश्रित परिभाषाओं पर कोष्ठक को हटाना चाहते हैं, सिवाय इसके कि, मिश्रण नाम आउटपुट में दिखाई देगा, इसलिए मौजूदा विस्तार व्यवहार का पालन करना समझ में आता है।

मापदंडों के साथ (मेरा 90% उपयोग का मामला), वही बात, सिवाय इसके कि वे इनपुट द्वारा विभेदित हैं:

.col(@width) {
  width: @width;
  display: table-cell;
}

.col1:extend(.col(10%)) { }
.col2:extend(.col(10%)) { }
.col3:extend(.col(80%)) { }

//output 

.col1, .col2 {
  width: 10%;
  display: table-cell;
}
.col3 {
  width: 80%;
  display: table-cell;
}

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

इसे आगे बढ़ाने के लिए सभी को धन्यवाद। मुझे लगता है कि यह एक बहुत शक्तिशाली जोड़ हो सकता है।

: +1 धन्यवाद @ मैथ्यू-डीन व्यापक ब्रेकडाउन के लिए - मैं आपके द्वारा कवर की गई हर चीज से सहमत हूं। क्या आप इस परिदृश्य पर अपनी राय दे सकते हैं, जो हाल की चर्चा के विषयों में से एक है:

.mixin() { color: red; }

.component {
    .mixin() { color: blue; }

    > li:extend( .mixin() ) { ... }
}

जिस तरह से LESS वर्तमान में काम करता है, वैश्विक दायरे में केवल मिश्रित ही विस्तारित होते हैं - जिसका अर्थ है कि लाल शैलियों का विस्तार होगा। मैं इस व्यवहार के साथ व्यक्तिगत रूप से ठीक हूं, और जब कोई उपरोक्त कोड लिखने की संभावना रखता है और नीली शैलियों के प्रबल होने की उम्मीद करता है, तो मुझे लगता है कि विस्तार का "वैश्विक" व्यवहार दस्तावेज़ीकरण में एक-लाइनर है।

// this is ".mixin()", which is being extended
.mixin() { color: red; }

.component {
    // this is ".component .mixin()", which is not. 
    .mixin() { color: blue; }

    > li:extend( .mixin() ) { ... }
}

मुझे लगता है कि विस्तार का "वैश्विक" व्यवहार दस्तावेज़ीकरण में एक-लाइनर है।

पूरी तरह से सहमत हूँ। मुझे लगता है कि यहां एक ग्रे क्षेत्र पेश करना एक भयानक विचार है।

मेरे लिए, यह निरंतरता है जो महत्वपूर्ण है। यदि वर्तमान व्यवहार स्थानीय दायरे में चयनकर्ताओं का विस्तार नहीं करता है, न ही इसे मिश्रणों के साथ करना चाहिए। यदि हम बाद में स्थानीय में चयनकर्ताओं का विस्तार करते हैं, तो मिश्रणों को भी करना चाहिए। लोगों को एक पैटर्न पर भरोसा करने में सक्षम होना चाहिए: विस्तार जो पुस्तकालय-व्यापी है।

(हालांकि मैं और अधिक संक्षेप में कह सकता था: "+1 से @jonschlinkert की टिप्पणी"। ;-)

इस बिंदु पर क्या कोई उपयोग मामला प्रदान कर सकता है जो इस सुविधा को भ्रमित कर देगा? कृपया @ मैथ्यू-डीन के इस व्यापक अवलोकन और उसके बाद की प्रतिक्रियाओं के साथ शुरू करें और एक वास्तविक दुनिया की स्थिति की कोशिश करें और पेश करें जिसे कवर नहीं किया गया है।

छुट्टियां आनंददायक हों। क्रिसमस की बधाई। प्रसन्नता के त्योहार!

वास्तव में अच्छा सिंहावलोकन। मैं @ मैथ्यू-डीन और हर निम्नलिखित टिप्पणी से सहमत हूं। :+1:

मैं भी @ मैथ्यू-डीन से सहमत हूं। वह एक प्रफुल्लित साथी की तरह लगता है और मैं उसका हाथ मिलाना चाहता हूं।

(-अनाम)

@ मैथ्यू-डीन शब्द। :+1:

हम इस सुविधा के साथ बूटस्ट्रैप के ग्रिड सिस्टम कोड को इतना अधिक स्वच्छ बना सकते हैं!

: +1: सहमत @cvrebert! अच्छा होगा!

बस फिर से आना। मुझे लगता है कि हमारे पास आम सहमति है और केवल कार्यान्वयन की आवश्यकता है, है ना?

मैं इसके बारे में और जानकारी खोजने की कोशिश कर रहा हूं लेकिन यह सब कुछ के माध्यम से पढ़ने वाली भूलभुलैया की तरह है। क्या इस पर कभी अमल हुआ? यदि ऐसा है तो कोई कृपया मुझे दस्तावेज़ों में उपयुक्त क्षेत्र में इंगित कर सकता है।

@ josh18 नहीं, जब एक फीचर अनुरोध अभी भी खुला है तो इसका आमतौर पर मतलब है कि इसे लागू नहीं किया गया है।

ठीक है धन्यवाद, सोचा कि अगर मैं कुछ याद कर रहा था तो मैं बस दोबारा जांच करूंगा।

मैं किसी बिंदु पर विकी में खुली/कार्यान्वित सुविधाओं को सारांशित करने की योजना बना रहा हूं, लेकिन अभी तक समय नहीं मिला है।

मैं किसी बिंदु पर विकी में खुली/कार्यान्वित सुविधाओं को सारांशित करने की योजना बना रहा हूं, लेकिन अभी तक समय नहीं मिला है।

@ मैथ्यू-डीन +1

हाय दोस्तों! जहां तक ​​मैं समझता हूं यह सुविधा कुछ हद तक SASS प्लेसहोल्डर्स के समान होगी। बस यह जानना चाहता था कि इसे कब लागू किया जाएगा?

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

आपके उत्तर के लिए धन्यवाद। इसे लागू और काम करते हुए देखने के लिए उत्सुक हैं। :)

इस सुविधा के लिए +1। यह CSS size को कम करने में बेहद मददगार है।

इस सुविधा के लिए +1।

इस सुविधा के लिए +1।

+1 रुचि के साथ देख रहा है, धन्यवाद!

:+1:

इस मुद्दे को बनाए हुए दो साल बीत चुके हैं। नवंबर 2014 से उच्च प्राथमिकता टैग। मील का पत्थर 1.6.0 या 2.0.0 है। महान। कम अब 2.5 है।

@Grawl

आपका मतलब है कि आप पीआर बनाने के लिए तैयार हैं?

@ सात-चरण-अधिकतम मैंने जो सोचा था वह काफी है। अधिकार का ऐसा प्रदर्शन। ;)

@ सात-चरण-अधिकतम योग्य नहीं, मैं सिर्फ फ्रंटएंड/डिजाइनर हूं।
@Celc वास्तव में खराब लग रहा है

इस मुद्दे को बनाए हुए दो साल बीत चुके हैं।

हाँ, वैसे भी मैं आप लोगों को क्या भुगतान कर रहा हूँ? ;-)

दुख की बात है कि भागीदारी में मदद नहीं कर सकता, लेकिन मैं इस अनुरोध को बहुत पसंद करता हूं!

जटिल और प्रभावी ढांचे के निर्माण के लिए यह अत्यंत महत्वपूर्ण कार्यक्षमता है

3 साल और गिनती। सौभाग्य से, Sass v4 आ रहा है ( sass-* उपसर्ग के साथ) और मैं कम से छुटकारा पा सकता हूं।

@stevenvachon हम Sass के खिलाफ कोई शिकायत नहीं रखते हैं। बेशक वे एक मायने में प्रतिस्पर्धी हैं, लेकिन परियोजनाओं के अलग-अलग दर्शन हैं और उन्हें बुलाकर हमें चोट पहुंचाने की कोशिश करना बेमानी है।

बेशक, किसी से भी पुल अनुरोधों का स्वागत है। हम इस सुविधा के साथ कार्यात्मक पुल अनुरोध में सहर्ष विलय करेंगे।

मैं किसी को चोट पहुंचाने की कोशिश नहीं कर रहा हूं, वास्तव में शायद इसे रोकने की कोशिश कर रहा हूं। मुझे लगता है कि यह व्यक्त करना बेहतर है कि कोई कैसा महसूस कर सकता है और परिणामस्वरूप वे जो नई दिशाएँ ले रहे हैं। मुझे लगता है कि जल्द से जल्द जानना बेहतर है; सबके जाने से पहले। उदाहरण के लिए, बूटस्ट्रैप v4 कम.जेएस का उपयोग नहीं करेगा और मुझे यकीन है कि यह आपके उपयोगकर्ता आधार पर एक बड़ा सेंध लगाएगा। आप इस तरह की राजनीति को बिल्कुल भी नजरअंदाज कर सकते हैं।

@stevenvachon इतना :विस्तार सुविधा का उपयोग किया है जो पहले से ही कम में बनाया गया है और मेरी सभी जरूरतों को पूरा करता है। मुझे यह भी नहीं पता कि यह मुद्दा अभी भी खुला क्यों है।

हेक, मैं एक रेल डेवलपर हूं और जब यह रूबी प्रोजेक्ट नहीं है तो गल्प + कम का उपयोग करें।

विषय से परे? यह सुविधा 3 वर्षों में लागू नहीं की गई है और यह बहुत उपयोगी होगी।

मैं पसंद करूंगा यदि Sass JS में लिखा गया हो, लेकिन ऐसा नहीं है, और यह वह नहीं है जो सबसे महत्वपूर्ण है। इसकी विशेषताएं हैं। Sass हमें प्लेसहोल्डर्स का विस्तार करने की अनुमति देता है लेकिन कम हमें मिक्सिन का विस्तार करने की अनुमति नहीं देता है।

यार यह बिल्कुल भी ऑफटॉपिक नहीं है, लेकिन बहुप्रतीक्षित विशेषता है! (भले ही मैं विभिन्न कारणों से वैसे भी कम पसंद करूंगा)

यह सिर्फ बनाने के लिए भीख माँगता है।

पीएस मेरे मामले में, मैं वास्तव में जेएस के कुछ ज्ञान के साथ डिजाइनर हूं, ज्यादातर डोम से संबंधित सामान, वास्तव में डेवलपर से बहुत दूर जो कम.जेएस कोडबेस में योगदान दे सकता है। वैसे भी दुखद कहानी है)

बस परियोजना का एक अत्यंत इच्छुक समर्थक)

सार्वजनिक सेवा घोषणा

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

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

इनमें से कई कार्य ऐसे व्यक्तियों द्वारा किए जा रहे हैं जो विकासकर्ता हैं, इसलिए वे विकास में योगदान देने वाले समय को इन अन्य कार्यों पर खर्च कर सकते हैं।

यदि आप एक डेवलपर हैं, और आपकी प्रतिक्रिया है, "मेरे पास समय नहीं है," तो यही कारण है कि यह मुद्दा खुला पड़ा है। यदि कोई सुविधा पूरी हो जाती है तो यह आपके ऊपर 100% है, इसलिए यह पूछना कि इसे "किसी" द्वारा क्यों पूरा नहीं किया गया है, उपयोगी नहीं है। _आप वो हैं कोई।_ यह होगा, मैं _गारंटी_ यह होगा, अगर और जब आप इस परियोजना में शामिल होंगे। आप वेब पर सबसे लोकप्रिय ओपन सोर्स टूल में से एक में शामिल हो सकते हैं। आप... हजारों लोगों के जीवन में बदलाव ला सकते हैं? सैकड़ों हज़ारों? लाखों? और एक साइड बेनिफिट के रूप में, आप यह सुनिश्चित कर सकते हैं कि आपकी पसंदीदा सुविधाएँ बाद में होने के बजाय जल्द ही हों।

यदि आप चाहते हैं कि यह या कोई सुविधा हो, तो इसे करें । हमें बहुत अच्छा लगेगा कि आप हमारे साथ हों। हम आपके साथ काम करना पसंद करेंगे! यह समुदाय जितना बड़ा होगा उतना ही कम बेहतर और बेहतर होता रहेगा!

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

भवदीय,
मैथ्यू डीन, लेस.जेएस कोर टीम के सदस्य

मैं पहले से ही अपनी परियोजनाओं का समर्थन करता हूं और मैं उनके फीचर अनुरोधों को सुनता हूं। ईमानदारी से मेरे पास कम.जेएस कोर में खुदाई करने का समय नहीं है।

sass प्लेसहोल्डर (या "साइलेंट क्लास") समर्थन के लिए यहां आने वालों के लिए, इस टिप्पणी को पढ़ें। यह आपको वहां नहीं पहुंचाएगा (# 1851 के कारण और ऐसी कक्षाएं "संदर्भित" फ़ाइल में नहीं हैं), लेकिन यह कुछ भी नहीं से बेहतर है।