लेस लिब-सीएसएस मिक्सिन का उद्देश्य क्या है?

Question

.lib-css()Mixin Magento 2 कम फ़ाइलों में भारी प्रयोग किया जाता है। हालांकि इसका उद्देश्य स्पष्ट नहीं है, और मिश्रित परिभाषाएं कोई सहायक दस्तावेज प्रदान नहीं करती हैं:

//
// किसी भी सीएसएस संपत्ति जोड़ें
// ---------------------------------------------

उदारीकरण-सीएसएस (
    @_संपत्ति,
    @_value,
    @_ उपसर्ग: ०
) जब (@_prefix = 1)
  और नहीं (@_value = '')
  और नहीं (@_value = false)
  और नहीं (अर्क (@_ मान, 1) = गलत)
  और नहीं (अर्क (@_ मान, 2) = गलत)
  और नहीं (अर्क (@_ मान, 3) = गलत)
  और नहीं (अर्क (@_ मान, 4) = गलत)
  और नहीं (अर्क (@_ मान, 5) = गलत) {
  -webkit - @ {_ संपत्ति}: @_value;
       -मोज़ - @ {_ संपत्ति}: @_value;
        -ms - @ {_ संपत्ति}: @_value;
}

उदारीकरण-सीएसएस (
    @_संपत्ति,
    @_value,
    @_ उपसर्ग: ०
) जब नहीं (@_value = '')
  और नहीं (@_value = false)
  और नहीं (अर्क (@_ मान, 1) = गलत)
  और नहीं (अर्क (@_ मान, 2) = गलत)
  और नहीं (अर्क (@_ मान, 3) = गलत)
  और नहीं (अर्क (@_ मान, 4) = गलत)
  और नहीं (अर्क (@_ मान, 5) = गलत) {
    @{_संपत्ति मूल्य;
}

मैं देख सकता था कि आप ब्लीडिंग सीएसएस प्रॉपर्टीज़ के लिए वेंडर उपसर्गों को जोड़ने के लिए मिक्सिन का उपयोग क्यों करना चाहते हैं (हालांकि ऐसी कुछ संपत्तियाँ हैं जहाँ यह आवश्यक है), लेकिन इस मिक्सिन का उपयोग करके सामान्य सीएसएस गुणों के आउटपुट का कारण स्पष्ट नहीं है। क्या कोई इसे स्पष्ट कर सकता है?

Comments

मैं एक ही बात सोच रहा हूं, Magento के कोड के भीतर यह असंगत लगता है। उदाहरण के लिए जहां पृष्ठभूमि को एक चर के साथ घोषित किया जाता है, कभी-कभी वे .lib-css का उपयोग करते हैं और कभी-कभी वे एक ही फ़ाइल के भीतर भी नहीं करते हैं।

— बेन क्रुक

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

— वृत्तिक

ऑटोप्रेक्सिफ़र पर्याप्त ठंडा नहीं था?

— लोरेंजो

Answer 1

एकमात्र उपयोग जो मैं देख सकता हूं वह उपसर्ग हैं और पहले घोषित नियमों को हटा रहे हैं:

उपसर्गों

body {
    .lib-css(transition, color .5s ease, @_prefix: 1);
}

उत्पादन होगा:

body {
    webkit-transition: color 0.5s ease;
    -moz-transition: color 0.5s ease;
    -ms-transition: color 0.5s ease;
    transition: color 0.5s ease;
}

पहले से घोषित नियमों को हटाने के बजाय उन्हें परेशान करना

.lib-css()हर नियम उन्हें unsetting या उन्हें निर्धारित करने के बजाय एक निश्चित चर का उपयोग करता है को दूर करने की क्षमता देता है 0या none। उदाहरण के लिए, हम कहते हैं कि हम हर नियम का उपयोग करना चाहते हैं @button__shadow। जैसे कि:

.product-list button {
    .lib-css(box-shadow, @button__shadow);
}

यदि यह केवल एक तत्व के लिए होता तो लिखना आसान होता box-shadow: none;। लेकिन अगर यह 20 तत्वों पर है, तो यह उन सभी को हटाने के लिए जल्दी होगा:

@button__shadow: false;

इसका उपयोग करने का अतिरिक्त लाभ है @variable: noneक्योंकि यह अधिक जोड़ने के बजाय कोड की लाइनों को कम करता है।

तो इन दो तरीकों की तुलना करें:

कम से

.product-list button {
    .lib-css(box-shadow, @button__shadow);
}

.product-list button {
    box-shadow: none;
}

// Or alternatively

@button__shadow: 0;

उत्पादन

कम से

@button__shadow: false;

.product-list button {
    .lib-css(box-shadow, @button__shadow);
}

उत्पादन

कोई आउटपुट नहीं है, नियम संसाधित नहीं हैं

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

कोर उपयोग

मैंने देखा है कि कुछ चर डिफ़ॉल्ट रूप से असत्य पर सेट होते हैं, जैसे कि lib/web/css/source/lib/variables/_buttons.lessमैं इसमें शामिल हूं, मुझे लगता है कि जब तक आवश्यकता न हो, उन्हें आउटपुट नहीं किया जाता है। एक अच्छा विचार भी।

//  Default = secondary button
@button__color: @primary__color;
@button__background: @color-gray95;
@button__border: 1px solid @color-gray-darken2;
@button__gradient-color-start: false;
@button__gradient-color-end: false;

Answer 2

उदारीकरण-सीएसएस () mixin अगर वहाँ एक चर द्वारा इसे करने के लिए पारित कर दिया एक मूल्य है किसी भी सीएसएस गुण सेट करने के लिए प्रयोग किया जाता है। (उदाहरण के लिए)

[![.class {
    .lib-css(border-radius, @button__border-radius);
    .lib-css(border, @button-primary__border);
    .lib-css(color, @button-primary__color);
    .lib-css(background, @color-gray94);
    .lib-css(padding, @indent__s);
}

इसके अलावा .lib -css () यदि आवश्यक हो तो -ms-, -webkit- और -moz- उपसर्ग जोड़ सकते हैं ।

यदि चर गलत पर सेट है , तो .lib-css () मिक्सिन कोड में कुछ नहीं जोड़ेगा।

कृपया .lib-css चरों की समीक्षा करें

भी आप के तहत सभी कम मदद मिल सकती है

<magento install directory>\lib\web\css\docs\utilities.html

Comments

आपके उत्तर के लिए धन्यवाद, लेकिन यह अभी भी स्पष्ट नहीं है कि यह क्यों: .lib-css(border-radius, @button__border-radius); इससे बेहतर कोई होगा: border-radius: @button__border-radius;

— एरिक हैनसन

भी आप सीधे सीएसएस संपत्ति और इस तरह के मूल्य लिख सकते हैं .lib-css (सीमा-त्रिज्या, 5 पीएक्स);

— सतीश राणा