CSS में @apply क्या है?

Question

सबसे पहले, मैं CSS टैग की बात कर रहा हूं।

मैं गुगली कर चुका हूँ, @applyलेकिन मुझे ऐसा कुछ भी नहीं मिला जो इसके अर्थ को ठीक से समझा सके।

ऐसे टैग का उपयोग क्या है?

Comments

tabatkins.github.io/specs/css-apply-rule कुछ उपयोगी पढ़ना संभवतः

— CollinD

आप इसके पार कहाँ आएंगे?

— j08691

मैं इसे इस लिंक पर लेकर आया: github.com/y0ssar1an/CSS3

— GameCoder

इतने सारे लोगों ने इसे क्यों ठुकरा दिया है? यह पूरी तरह से वैध प्रश्न है, और सीएसएस की एक उन्नत विशेषता को छूता है, जिसके बारे में बहुत से लोग स्पष्ट रूप से कुछ भी नहीं जानते हैं। टेलविंड@apply निर्देश का भारी उपयोग करता है । लोगों के सवालों को खारिज करने के लिए इतनी जल्दी मत बनो। यहाँ बहुत कुछ चल रहा है। इसके अलावा, मैं देख रहा हूं कि ओपी अब स्टैकओवरफ्लो का सदस्य नहीं है, क्या उसने इस वजह से छोड़ दिया? यह दयनीय है।

— स्टीफनमुर्डोच

Answer 1

यह समझाने का सरल तरीका होगा; चर में सीएसएस (जो sass जैसे प्रीप्रोसेसरों की एक विशेषता है), और मिक्सिन जो व्यवहार की तरह कार्य कर रहे हैं (प्रीप्रोसेसर में भी)।

कल्पना कीजिए कि --header-themeएक फ़ंक्शन (मिक्सचर) है

:root {
  --header-theme: {
    color: red;
    font-family: cursive;
    font-weight: 600;
  };
}

h1 {
  @apply --header-theme;
}


h2 {
  @apply --header-theme;
}

इस तरह से आप कई अलग-अलग जगहों पर इसे फिर से लिखने के लिए उपयोग कर सकते हैं DRY

अब चर हिस्सा इस उदाहरण के साथ समझा सकता है

:root {
  --brand-color: red;/*   default value*/
  --header-theme: {
    color: var(--brand-color);
    font-family: cursive;
    font-weight: 600;
  };
}

h1 {
  @apply --header-theme;
}


h2 {
  --brand-color: green; 
  @apply --header-theme;
}

मिक्सर में एक चर भेजा जाएगा और रंग बदल जाएगा

यह सुविधा की सीमा नहीं है, आप इसे और अधिक के लिए उपयोग कर सकते हैं, आप इसे उपयोग करने के अन्य तरीकों के लिए SASS में मिक्सिन और चर के बारे में अधिक पढ़ सकते हैं , मेरे सुझाव के बाद आप इस ब्लॉग पोस्ट को पढ़ेंगे

अब मैं आपको उत्साहित करने के बाद, बुरी खबर के लिए समय, यह अभी तक क्रोम में लागू नहीं किया गया है , यह अभी भी जानने के लायक है कि यह आ रहा है और हो सकता है कि आप खुद को SASS के साथ शुरू करना चाहते हैं

Comments

क्या var फ़ंक्शन SASS में उसी उद्देश्य से कार्य करता है जैसे कि जावास्क्रिप्ट में? क्षमा करें, मुझे कोई SASS नहीं पता है।

— GameCoder

चर किसी भी तरह से एक ही स्थान से सभी को फिर से लिखने के बजाय नियंत्रण है, फ़ंक्शन थोड़ा अलग है, लेकिन यह एक ही सामान्य विचार की सेवा करता है, जो मैं कहने की कोशिश कर रहा हूं; अभी के लिए आप वैसे भी इसका उपयोग नहीं कर पाएंगे; इसलिए यदि आप फीचर चेक एसएएस (माणिक) या उससे कम (नोड.जेएस) के बारे में उत्सुक महसूस करते हैं, कि जहां वे विचार के साथ आए

— oqx

युक्ति लेखक के ब्लॉग पोस्ट का शीर्षक "व्हाई आई अबॅंडेड @apply" बताता है कि यह सुविधा भविष्य के ब्राउज़रों में अपना रास्ता नहीं बनाएगी । जैसा कि मैंने पाया कि यह - tabatkins.github.io/specs/css-apply-rule/#intro पर खत्म होने पर - xanthir.com/b4o00

Answer 2

@applyएक प्रस्ताव से है जिसे तब से छोड़ दिया गया है , और सीएसएस छाया भागों के साथ बदल दिया गया है ।

@apply नियम, जो एक लेखक को नामांकित चर में गुणों के एक सेट को संग्रहीत करने की अनुमति देता है, फिर उन्हें अन्य शैली के नियमों में संदर्भित करता है।

Answer 3

@applyबहुत अच्छा है। यह मूल रूप से आपको सीएसएस ब्लॉकों को फिर से उपयोग करने की अनुमति देता है बिना उन्हें चारों ओर कॉपी किए बिना और उनके चयनकर्ताओं को संशोधित किए बिना।

यह सीएसएस फ्रेमवर्क का उपयोग करना आसान बना देगा और एक ही समय में शब्दार्थ वर्ग के नाम रखेगा।

मुझे यह लेख इस सुविधा के लिए एक अच्छा निर्देश है।

दुर्भाग्य से, इस समय, ब्राउज़र समर्थन मूल रूप से अस्तित्वहीन है । इसका उपयोग CSSC प्रोसेसर जैसे PostCSS के साथ किया जा सकता है ।

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

Comments

ikr! मैं जिस तरह से मैं Tailwind सीएसएस से इन वर्गों का उपयोग कर सकते हैं प्यार करता हूँ @apply। यह स्टाइलशीट के साथ काम करने के असाधारण रूप से नए तरीके का परिचय देता है जो आपको पुन: उपयोग करने योग्य ईंटों के साथ छोड़ देता है, जिन्हें आसानी से वर्गीकृत भी किया जाता है - आप वास्तव में उन्हें सॉर्ट कर सकते हैं (आप इसके लिए संदर्भ का उपयोग कर सकते हैं जैसे कि टेलविंड सीएसएस दस्तावेज़ीकरण से) और स्टाइलशीट को स्कैन करने के लिए अब गुण नहीं। कुशलता से! pinसभी के बजाय सरल शॉटहैंड लिखने जैसी बहुत सारी संभावनाएं हैं top/bottom/left/right: 0।

— vintproykt