العوامل في التعشيش
تشرح هذه المقالة عن العوامل في التعشيش۔
سنشرح كيفية استخدام العوامل في التعشيش مع SASS وسنقدم كوداً مثالياً لمساعدتك في الفهم خطوة بخطوة۔
YouTube Video
العوامل في التعشيش
في SASS، يمكنك كتابة محددات CSS بشكل مُوجز بناءً على علاقات الأب والابن، لكن يلزم الانتباه بشكل خاص للتعامل بشكل صحيح مع العوامل مثل محدد السليل والمحدد المجاور۔
أساسيات التعشيش
في SASS، من خلال تعشيش محددات الأبناء داخل محددات الآباء، يمكنك تمثيل علاقات الأب والابن بوضوح واختصار في CSS۔
مثال: التعشيش الأساسي
1.nav {
2 ul {
3 li {
4 color: blue;
5 }
6 }
7}CSS المُجمَّع
1.nav ul li {
2 color: blue;
3}مرجع محدد الأب (&)
يُستخدم الرمز & في SASS للإشارة إلى محدد الأب الحالي۔
دمج العوامل مع &
بإستخدام &، يمكنك إنشاء محددات مرنة۔
مثال
1.card {
2 & > .title {
3 font-weight: bold;
4 }
5 & + .card {
6 margin-top: 20px;
7 }
8}CSS المُجمَّع
1.card > .title {
2 font-weight: bold;
3}
4.card + .card {
5 margin-top: 20px;
6}الترميز المختصر للرمز &
في SASS، عندما يتم وضع منسق تركيبي في بداية المُحدد، يتم إدراج المُحدد الأب ضمنيًا، لذلك يمكنك حذف الرمز &۔
الحالات التي يكون فيها الحذف ممكنًا
على سبيل المثال، عندما تكتب + .item، يقوم SASS بتفسيرها داخليًا كـ & + .item ويولد تلقائيًا التركيبة مع المُحدد الأب۔
مثال
1.item {
2 + .item {
3 margin-top: 10px;
4 }
5 &--hover {
6 background-color: red;
7 }
8}CSS المُجمَّع
1.item + .item {
2 margin-top: 10px;
3}
4.item--hover {
5 background-color: red;
6}نظرة عامة على العوامل
تحدد عوامل CSS العلاقة بين المحددات۔ الأنواع الرئيسية للعوامل كما يلي۔
-
محدد السليل (فراغ) يستهدف محدد السليل جميع العناصر التابعة الموجودة داخل عنصر أب۔ مثال:
.parent .child -
محدد الابن (
>) يستهدف محدد الابن العناصر الأبناء المباشرة فقط۔ مثال:.parent > .child -
المحدد المجاور (
+) يستهدف المحدد المجاور العنصر الشقيق المجاور مباشرة۔ مثال:.sibling1 + .sibling2 -
محدد الأشقاء العام (
~) يستهدف محدد الأشقاء العام جميع العناصر الشقيقة التالية۔ مثال:.sibling1 ~ .sibling2
كيفية استخدام العوامل في SASS
محدد السليل (فراغ)
في تعشيش SASS، يتم تطبيق محدد السليل (الفراغ) بشكل افتراضي۔
مثال
1.container {
2 .header {
3 .title {
4 font-size: 20px;
5 }
6 }
7}CSS المُجمَّع
1.container .header .title {
2 font-size: 20px;
3}محدد الابن (> )
إذا أردت استخدام محدد الابن، اكتب > بوضوح في كود SASS الخاص بك۔
مثال
1.container {
2 & > .header {
3 & > .title {
4 font-size: 20px;
5 }
6 }
7}CSS المُجمَّع
1.container > .header > .title {
2 font-size: 20px;
3}المحدد المجاور (+)
لتنسيق العنصر الشقيق المجاور مباشرة، استخدم +۔
مثال
1.item {
2 & + .item {
3 margin-top: 10px;
4 }
5}CSS المُجمَّع
1.item + .item {
2 margin-top: 10px;
3}محدد الأشقاء العام (~)
لتنسيق جميع الأشقاء التاليين في نفس المستوى، استخدم ~۔
مثال
1.alert {
2 & ~ .alert {
3 border-top: 1px solid red;
4 }
5}CSS المُجمَّع
1.alert ~ .alert {
2 border-top: 1px solid red;
3}الفئات الزائفة والعناصر الزائفة مع التعشيش
يمكن أيضاً كتابة الفئات الزائفة والعناصر الزائفة بسهولة في SASS۔
مثال
1.button {
2 &:hover {
3 background-color: blue;
4 }
5 &::after {
6 content: '';
7 display: block;
8 }
9}CSS المُجمَّع
1.button:hover {
2 background-color: blue;
3}
4.button::after {
5 content: '';
6 display: block;
7}مثال عملي
فيما يلي مثال على نمط معقد يجمع بين عدة عوامل۔
كود SASS
1.menu {
2 .menu-item {
3 & > .submenu {
4 display: none;
5
6 & > .submenu-item {
7 font-size: 14px;
8 }
9 }
10 & + .menu-item {
11 margin-left: 15px;
12 }
13 }
14}CSS المُجمَّع
1.menu .menu-item > .submenu {
2 display: none;
3}
4.menu .menu-item > .submenu > .submenu-item {
5 font-size: 14px;
6}
7.menu .menu-item + .menu-item {
8 margin-left: 15px;
9}الملخص
إذا فهمت التعشيش والعوامل في SASS بشكل صحيح، يمكنك كتابة CSS أكثر اختصاراً وسهولة في القراءة۔
يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔