2.0 KiB
title | localeTitle |
---|---|
Use @for to Create a Sass Loop | استخدمfor لإنشاء Sass Loop |
استخدمfor لإنشاء Sass Loop
- البنية الأساسية لـ
@for
loop في@for
:
- ل - من خلال حلقة:
@for $i from <start number> through <end number> { // some CSS }
- ل- للحلقة:
@for $i from <start number> to <end number> { // some CSS }
لاحظ أن الاختلاف الرئيسي هو أن "البداية إلى النهاية" تستبعد الرقم النهائي ، و "البدء من خلال النهاية" يتضمن الرقم النهائي.
- فمثلا:
- ل - من خلال حلقة:
`@for $i from 1 through 3 { // some CSS }
// 1 2 `
- ل- للحلقة:
`@for $i from 1 to 3 { // some CSS }
// 1 2 3 `
- المبدأ التوجيهي من المبادئ التوجيهية SASS
قد تكون حلقة @for
مفيدة عند دمجها مع CSS :nth-*
pseudo-classes. باستثناء هذه السيناريوهات ، تفضل حلقة @each
إذا كان عليك التكرار أكثر من شيء ما.
@for $i from 1 through 10 { .foo:nth-of-type(#{$i}) { border-color: hsl($i * 36, 50%, 50%); } }
استخدم دائمًا $i
كاسم متغير للالتزام بالاتفاقية المعتادة وما لم يكن لديك سبب جيد بالفعل ، لا تستخدم الكلمة المفتاحية أبدًا: استخدمها دائمًا. العديد من المطورين لا يعرفون حتى Sass يقدم هذا الاختلاف. قد يؤدي استخدامها إلى الارتباك.
تأكد أيضًا من احترام هذه الإرشادات للحفاظ على سهولة القراءة:
- دائما خط جديد فارغ قبل
@for
؛ - دائماً سطر فارغ جديد بعد قوس الإغلاق (}) إلا إذا كان السطر التالي هو قوس إغلاق (}).