सीएसएस छद्म-तत्व चयनकर्ताओं में एम्परसेंड (&) का रहस्योद्घाटन

सीएसएस में इस तरह के कोड का सामना करते समय, एम्परसेंड (&) के महत्व के बारे में आश्चर्यचकित होना स्वाभाविक है ) चरित्र:

.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }
}

हालांकि, यह ध्यान रखना महत्वपूर्ण है कि यह सिंटैक्स सीएसएस का हिस्सा नहीं है। इसके बजाय, यह LESS नामक CSS प्रीप्रोसेसर से संबंधित है।

LESS आपको एम्परसेंड कैरेक्टर का उपयोग करके चयनकर्ता संशोधक को नेस्ट करने की अनुमति देता है। यह आपको दोहराव से बचाकर संक्षिप्त और पठनीय कोड लिखने में सक्षम बनाता है। उदाहरण के लिए:

.clearfix { 
  &:before {
    content: '';
  }
}

यह संकलित होगा:

.clearfix:before {
  content: '';
}

एम्परसेंड यह सुनिश्चित करता है कि नेस्टेड चयनकर्ता .clearfix:before पर संकलित हों। इसके बिना, वे .clearfix :before को संकलित करेंगे, जिसके परिणामस्वरूप एक अमान्य CSS चयनकर्ता होगा।

आपके द्वारा प्रदान किए गए ट्विटर बूटस्ट्रैप उदाहरण में, एम्परसेंड का उपयोग छद्म तत्वों (::before) पर शैलियों को लागू करने के लिए किया जाता है। और ::after) जो .clearfix तत्व के बच्चों के रूप में बनाए गए हैं। यह आपको इन छद्म तत्वों को संक्षेप में परिभाषित करने और अपने सीएसएस के भीतर एक मॉड्यूलर संरचना बनाए रखने की अनुमति देता है।