الاختلافات بين CSS الأصلي وSass Nesting

منذ إطلاقها، رفضت CSS بإصرار دعم بناء جملة محددات التداخل. كان البديل دائمًا هو استخدام معالج CSS المسبق مثل Sass. لكن اليوم، أصبح التداخل رسميًا جزءًا من CSS الأصلي. يمكنك تجربة هذه الميزة مباشرة في المتصفحات الحديثة.

إذا كنت تقوم بالترحيل من Sass، فستحتاج إلى مراعاة أي اختلافات بين التداخل الأصلي وتداخل Sass. توجد بعض الاختلافات الرئيسية بين ميزتي التداخل، ويعد التعرف عليها أمرًا بالغ الأهمية إذا كنت تقوم بالتبديل.

تحتاج إلى استخدام "&" مع محددات العناصر في CSS الأصلية

لا يزال CSS Nesting عبارة عن مسودة مواصفات، مع دعم متفاوت للمتصفح. تأكد من التحقق من مواقع مثل caniuse.com للحصول على معلومات محدثة.

فيما يلي مثال لنوع التداخل الذي قد تراه في Sass، باستخدام بناء جملة SCSS:

.nav {
ul { display: flex; }
a { color: black; }
}

تحدد كتلة CSS هذه أن أي قائمة غير مرتبة داخل عنصر لها الامتداد التنقل تتم محاذاة الفئة كعمود مرن، إحدى الطرق ل وضع عناصر HTML على الصفحة. بالإضافة إلى ذلك، فإن كل نص الرابط المرساة داخل العناصر ذات الامتداد التنقل يجب أن يكون الفصل أسود.

الآن، في CSS الأصلي، سيكون هذا النوع من التداخل غير صالح. ولتنفيذ ذلك، يجب عليك تضمين رمز علامة العطف (&) أمام العناصر المتداخلة، كما يلي:

.nav {
 & ul { display: flex; }
 & a { color: black; }
}

لم يسمح الإصدار المبكر من تداخل CSS بتداخل محددات النوع. يعني التغيير الأخير أنك لم تعد بحاجة إلى استخدام "&"، ولكن الإصدارات الأقدم من Chrome وSafari قد لا تدعم بناء الجملة المحدث هذا حتى الآن.

الآن إذا كنت تستخدم محددًا يبدأ برمز (مثل محدد الفئة) لـ استهداف جزء معين من الصفحة، يمكنك حذف علامة العطف. لذا فإن بناء الجملة التالي سيعمل في كل من CSS وSass الأصليين:

.nav {
.nav-list { display: flex; }
.nav-link { color: black; }
}

لا يمكنك إنشاء محدد جديد باستخدام "&" في CSS الأصلي

إحدى الميزات التي ربما تحبها في Sass هي القدرة على القيام بشيء مثل هذا:

.nav {
 &-list { display: flex; }
 &-link { color: black; }
}

يتم تجميع كود Sass هذا إلى CSS الخام التالي:

.nav-list {
display: flex;
}
.nav-link {
color: black;
}

في CSS الأصلي، لا يمكنك إنشاء محدد جديد باستخدام "&". يقوم مترجم Sass باستبدال "&" بالعنصر الأصلي (على سبيل المثال: .التنقل)، ولكن CSS الأصلي سيتعامل مع "&" والجزء الذي يليه كمحددين منفصلين. ونتيجة لذلك، سيحاول إنشاء محدد مركب، والذي لن يعطي نفس النتيجة.

سيعمل هذا المثال في CSS الأصلي، بالرغم من ذلك:

.nav {
 &.nav-list { display: flex; }
 &.nav-link { color: black; }
}

يعمل هذا لأن المحدد الأول هو نفسه قائمة التنقل في CSS عادي، والثاني هو نفسه nav.nav-link. إن إضافة مسافة بين "&" والمحدد سيكون بمثابة الكتابة التنقل .قائمة التنقل.

في CSS الأصلي، إذا كنت تستخدم علامة الضم مثل هذا:

.nav {
 &__nav-list { display: flex; }
 &__nav-link { color: black; }
}

إنه نفس كتابة هذا:

__nav-list.nav {
display: flex;
}
__nav-link.nav {
color: black;
}

قد يكون هذا بمثابة مفاجأة لك، مع الأخذ في الاعتبار أن كلا من __قائمة التنقل و __رابط التنقل هم داخل .التنقل محدد. لكن علامة الضم تضع العناصر المتداخلة أمام العنصر الأصلي.

يمكن أن تكون الخصوصية مختلفة

شيء آخر يجب ملاحظته هو التأثير على الخصوصية الذي لا يحدث في Sass ولكنه يحدث في تداخل CSS الأصلي.

لذلك دعونا نقول أن لديك و عنصر. باستخدام CSS التالي، an في أي من هذه العناصر سيتم استخدام خط serif:

#main, article {
h2 {
font-family: serif;
 }
}

النسخة المجمعة من كود Sass أعلاه هي كما يلي:

#mainh2,
articleh2 {
font-family: serif;
}

لكن نفس بناء الجملة المتداخل في CSS الأصلي سينتج عنه نتيجة مختلفة، تمامًا كما يلي:

:is(#main, article) h2 {
font-family: serif;
}

ال يكون() يتعامل المحدد مع قواعد الخصوصية بشكل مختلف قليلاً عن تداخل Sass. في الأساس، خصوصية:يكون() تتم ترقيته تلقائيًا إلى العنصر الأكثر تحديدًا في قائمة الوسائط المتوفرة.

قد يؤدي ترتيب العناصر إلى تغيير العنصر المحدد

يمكن أن يؤدي التداخل في CSS الأصلي إلى تغيير ما يعنيه المحدد فعليًا (أي تحديد عنصر مختلف تمامًا).

خذ بعين الاعتبار HTML التالي، على سبيل المثال:

<divclass="dark-theme">
 <divclass="call-to-action">
 <divclass="heading"> Hellodiv>
div>
div>

وCSS التالي:

body { font-size: 5rem; }
.call-to-action.heading {
.dark-theme & {
padding: 0.25rem;
background: hsl(42, 72%, 61%);
color: #111;
 }
}

هذه هي النتيجة إذا كنت تستخدم Sass كمترجم CSS:

الآن في كتلة HTML، إذا كنت تريد نقل ملف مع فئة موضوع مظلم داخل ذلك عبارة تحث المستخدم على اتخاذ إجراءسيؤدي ذلك إلى كسر المحدد (في وضع Sass). ولكن عند التبديل إلى CSS العادي (أي لا يوجد معالج CSS مسبق)، ستستمر الأنماط في العمل.

وهذا بسبب الطريقة التي :يكون() يعمل تحت غطاء محرك السيارة. لذلك يتم تجميع CSS المتداخل أعلاه في CSS العادي التالي:

.dark-theme:is(.call-to-action.heading) {
/* CSS code */
}

وهذا تحديد أ .عنوان وهذا من نسل كليهما .dark-theme و .دعوة للعمل. ولكن ترتيب هذه لا يهم حقا. طالما أن .عنوان هو سليل .دعوة للعمل و .dark-theme، فهو يعمل في أي من النظامين.

هذه حالة حافة وليست شيئًا ستواجهه كثيرًا. لكن فهم :يكون() يمكن أن تساعدك الوظيفة الأساسية للمحدد في إتقان كيفية عمل التداخل في CSS. وهذا يجعل أيضا تصحيح أخطاء CSS الخاص بك أسهل بكثير.

تعرف على كيفية استخدام Sass في React

نظرًا لأن Sass يقوم بالترجمة إلى CSS، يمكنك استخدامه مع أي إطار عمل لواجهة المستخدم تقريبًا. يمكنك تثبيت معالج CSS المسبق في مشاريع Vue وPreact وSvelte و-بالطبع-React. تعتبر عملية إعداد Sass لجميع هذه الأطر واضحة تمامًا أيضًا.

أكبر ميزة لاستخدام Sass في React هي أنه يتيح لك كتابة أنماط نظيفة وقابلة لإعادة الاستخدام باستخدام المتغيرات والخلطات. باعتبارك مطور React، فإن معرفة كيفية استخدام Sass ستساعدك على كتابة تعليمات برمجية أكثر وضوحًا وكفاءة وتجعلك مطورًا أفضل بشكل عام.