• هدف حلقه‌ها در SASS:
  حلقه‌ها به ما اجازه می‌دهند تا یک سری کدهای تکراری (مثل کلاس‌های ستون‌بندی یا استایل‌های مشابه) را به صورت داینامیک و کوتاه بنویسیم، بدون نیاز به تکرار دستی کدها.
• حلقه @for:

  • ساختار:

     

    @for $i from <شروع> through <پایان> {
      // کدهایی که تکرار می‌شوند
    }
    

  • مثال عملی: تولید کلاس‌های ستون‌بندی از 1 تا 12:

     

    @for $i from 1 through 12 {
      .col-sm-#{$i} {
        width: 8.33% * $i;
      }
    }
    

• ترکیب حلقه‌ها با متغیرها و رشته‌ها:
  • می‌توان نام کلاس‌ها را با متغیر و #{} داینامیک ساخت.

  • مثال:

     

    $sm-class-slug: col-sm;
    .#{$sm-class-slug}-#{$i} { width: 8.33% * $i; }
    

• حلقه‌ها داخل @media:

  • امکان تعریف استایل‌های واکنش‌گرا (responsive) با استفاده از حلقه:

     

    @media screen and (max-width: $sm-width) {
      @for $i from 1 through 12 {
        .col-sm-#{$i} { width: 8.33% * $i; }
      }
    }
    

  • مشابه آن برای breakpointهای بزرگ‌تر (min-width) هم قابل استفاده است.
• مزایا:
  • صرفه‌جویی در زمان و کاهش حجم کد
  • جلوگیری از خطاهای احتمالی در تکرار دستی
  • ایجاد ساختار انعطاف‌پذیر و قابل توسعه

🔹 نکته عملی: با ترکیب حلقه‌ها و متغیرها می‌توان یک سیستم شبکه (grid) سبک شبیه به بوت‌استرپ را با SASS پیاده‌سازی کرد.