یکی از متدهای برنامه نویسی , استفاده از حلقه هاست. حلقه ها باعث می شوند که یک تابع , برای چندین بار با شرایط متفاوت روی لیستی از داده ها اعمال شود. اگر سابقه کار با هرکدام از زبان های برنامه نویسی را داشته باشید , حتما با پیاده سازی حلقه آشنایی دارید. در این مقاله قصد داریم در LESS حلقه هایی را پیاده سازی کنیم تا به صورت داینامیک استایل های متفاوتی را به صفحه اضافه کند.

در مقالات قبل گفتیم که استفاده از پیش پردازنده های CSS , چه مزایایی رو برای ما به همراه دارد. یکی از پیش پردازنده ها LESS نام دارد. در این مقاله می توانید در عرض ۵ دقیقه با مفاهیم LESS آشنا شوید. با استفاده از LESS و Mixin های آن می توان بهینه تر و حرفه ای تر کدنویسی CSS را انجام داد.

ساختار حلقه ها در LESS

حلقه ها در LESS به شکل زیر پیاده سازی می شوند.

.loop( @parameters ) when ( @condition ) {
    .loop( @parameters + 1 ); // iterate.
    // do blah1
    // do blah2
    // do blah3
}

پارامترهای خود را به loop. ارسال می کنیم و تا زمانی که شرط حلقه درست باشد , دستورات داخل حلقه انجام می شوند. گام حلقه هم می تواند با توجه به ماهیت آن کاهشی یا افزایشی و یا به هرشکل دیگر پیاده شود.

یک مثال

تصور کنید که المانی را طراحی کردید که وظیفه پیام رسانی به کاربر را دارد. یک div.alert-type که با توجه به نوع پیام , رنگ و ظاهر متفاوتی را دارد. برای مثال div.alert-success تم رنگی سبز و همچنین div.alert-danger که شامل پیغام خطا می باشد , تم رنگی قرمز را دارد.  همچنین div.alert-warning با ماهیت اخطار و تم رنگی زرد و در نهایت div.alert-info با تم رنگی آبی روشن برای اطلاع رسانی به کاربر.

تمام این المان ها ساختار و اندازه های یکسانی دارند مانند padding , border-radius و ویژگی های دیگر , ولی فقط در بعضی موارد که مربوط به رنگ آن هاست تفاوت دارند. برای شروع لیستی از کد رنگی و نام کلاس آن رنگ را به صورت متغیر تعریف می کنیم. متغیر length@ هم تعداد داده های colors@ را در خود نگهداری می کند تا بعدا بتوانیم به راحتی در آن پیمایش کنیم.

@colors : #E74C3C, #2ECC71, #F1C40F, #9ABEE4;
@names  : danger, success, warning, info;
@length : length(@colors);

حال حلقه مورد نظرمون رو پیاده سازی می کنیم.

.alert-type(@names; @colors; @index) when (iscolor(extract(@colors, @index))) and (@index > 0) {
.alert-type(@names; @colors; (@index - 1)); // decrement.
}

حلقه ما با نام alert-type دارای ۳ پارامتر می باشد.

• لیست نام های کلاس رنگی با نام names@
• لیست کدهای رنگ با نام colors@ که متناظر با نام آن کلاس در names@ است.
• متغیر index@ که برای محاسبه اندیس آرایه , ارسال می شود.

این حلقه تا زمانی که هر دو شرط آن درست باشد اجرا می شود. یعنی هم اندیس index@ از آرایه ی colors@ برابر یک کد رنگی باشد و هم به آخر آرایه نرسیده باشیم.

حال  باید قوانین درون حلقه را بنویسیم.

.alert-type(@names; @colors; @index) when (iscolor(extract(@colors, @index))) and (@index > 0) {
   .alert-type(@names; @colors; (@index - 1)); // decrement.
   @name  : extract(@names, @index);
   @color : extract(@colors, @index);
   .alert-@{name} {
      border-color: darken(@color, 10%);
      color: white;
      background-color: @color;
   }
}

همانطور که می بینید در هر گام از حلقه , نام کلاس و کد رنگی متناظر با آن را به کمک تابع )(extract در LESS , از لیست جدا و در متغیر نگه داری می کنیم. بعد از آن کلاسی با نام -alert. تعریف کرده و نام کلاس اختصاصی را به انتهای آن اضافه می کنیم.  در نهایت بعد از کامپایل این حلقه , کلاس های زیر تعریف میشه.

.alert-success
.alert-danger
.alert-warning
.alert-info

برای هر کدام از این کلاس ها هم استایل اختصاصی با توجه به کد رنگی متناظر آن نوشته می شود.

حالا کافیه که حلقه تعریف شده را فراخوانی کنیم.

.alert-type(@names; @colors; @length);

لیستی از نام های کلاس به همراه لیستی متناظر با آن , شامل کدهای رنگی و در نهایت تعداد داده های این لیست را ارسال می کنیم تا خروجی ما به شکل زیر شود.

.alert-danger {
   border-color: #d62c1a;
   color: white;
   background-color: #E74C3C;
}

.alert-success {
   border-color: #25a25a;
   color: white;
   background-color: #2ECC71;
}

.alert-warning {
   border-color: #c29d0b;
   color: white;
   background-color: #F1C40F;
}

.alert-info {
   border-color: #72a4d9;
   color: white;
   background-color: #9ABEE4;
}

See the Pen Loops In LESS by Reza Majidi (@rezamajidi) on CodePen.

با استفاده از حلقه ها , می توانیم سرعت و کیفیت کدنویسی را بالا ببریم. می توان به راحتی با استفاده از حلقه ها , ستون بندی بوت استرپ را پیاده سازی کرد. col-number. که number می تواند بین ۱ تا ۱۲ باشد و مقدار width آن برابر %(۱۰۰/number)  است.

برای تمرین و یادگیری بهتر , ستون بندی بوت استرپ را با استفاده از حلقه ها در LESS , پیاده سازی کنید.