إزالة الغموض عن علامة الضم (&) في محددات العناصر الزائفة في CSS

عند مواجهة كود مثل هذا في CSS، فمن الطبيعي أن نتساءل عن أهمية علامة الضم (&) ) الحرف:

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

ومع ذلك، من المهم ملاحظة أن بناء الجملة هذا ليس جزءًا من CSS. بدلاً من ذلك، فهو ينتمي إلى معالج CSS أولي يسمى LESS.

يسمح لك LESS بدمج معدّلات التحديد باستخدام حرف علامة الضم. يمكّنك هذا من كتابة تعليمات برمجية موجزة وقابلة للقراءة عن طريق تجنب التكرار. على سبيل المثال:

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

سيتم تجميع هذا إلى:

.clearfix:before {
  content: '';
}

تضمن علامة الضم ترجمة المحددات المتداخلة إلى .clearfix:before. بدونها، سيتم التحويل إلى .clearfix :before، مما قد يؤدي إلى محدد CSS غير صالح.

في مثال Twitter Bootstrap الذي قدمته، يتم استخدام علامة الضم لتطبيق الأنماط على العناصر الزائفة (::before و ::بعد) التي تم إنشاؤها كعناصر فرعية لعنصر .clearfix. يتيح لك هذا تحديد هذه العناصر الزائفة بإيجاز والحفاظ على بنية معيارية داخل CSS الخاص بك.