در این کلید آموزشی قصد داریم که از نرم افزار WinLess برای پردازش کدهای LESS در ویندوز (Windows) استفاده نماییم. در واقع سعی می کنیم که یکی از ساده ترین روش های پردازش کدهای LESS را انتخاب کنیم تا شما به راحتی بتوانید در کامپیوتر شخصی خود، به تمرین کدنویسی LESS بپردازید.

برای نصب نرم افزار WinLess به وب سایت زیر مراجعه نمایید :

http://winless.org

در صفحه اصلی این وب سایت، بر روی لینک مربوط به دانلود نرم افزار WinLess کلیک نمایید :

بنابراین یک فایل با نامی مشابه WinLess-1.9.1.msi دانلود می شود :

فایل مورد نظر را اجرا کرده و مراحل نصب نرم افزار WinLess را از طریق آن دنبال می کنیم :

پس از نصب نرم افزار WinLess ، آن را اجرا می کنیم :

سپس در ویندوز (نه در محیط نرم افزار WinLess)، در آدرسی دلخواه، یک پوشه (Folder) ساخته و یک فایل جدید با نام دلخواه kelidestan.less می سازیم (دقت شود که less پسوند فایل می باشد، باید تنظیمات ویندوز به گونه ای باشد که بتوانید پسوند فایل ها را ببینید و بنابراین بتوانید پسوند فایل ها را تغییر بدهید) :

و کدهای LESS زیر را در فایل kelidestan.less می نویسیم :

و تغییرات فایل را ذخیره (Save) می کنیم.

از کدهای LESS بالا، تنها در همین حد بدانید که یک کد رنگ ( #FF0000 ) را در متغیری با نام kelidestan_color ذخیره کرده ایم و سپس متغیر را در دو قسمت از کدها ذکر نموده ایم که باعث می شود کد رنگ مورد نظر، در دو قسمت از کدهای CSS که از پردازش این کدهای LESS به وجود می آیند، وجود داشته باشد.

اکنون در نرم افزار WinLess ، بر روی دکمه Add folder کلیک می کنیم :

بنابراین پنجره زیر نمایش داده می شود :

در این پنجره، پوشه (Folder) حاوی فایل kelidestan.less را انتخاب نموده و بر روی گزینه Select Folder کلیک می کنیم.

بنابراین فایل kelidestan.less در پنجره نرم افزار WinLess نمایش داده می شود :

گزینه Minify را برای آن برمی داریم تا عملیات Minify کردن کدهای CSS (کم کردن حجم کدها با بازنویسی آنها) اجرا نشود (چون در مرحله آموزش هستیم و می خواهیم تغییرات پردازش از LESS به CSS را به خوبی متوجه شویم) و سپس بر روی گزینه Compile کلیک می نماییم تا عملیات پردازش کدهای LESS و تبدیل آنها به کدهای CSS انجام شود :

بنابراین یک فایل با نام kelidestan.css در همان پوشه حاوی فایل kelidestan.less ساخته خواهد شد که حاوی کدهای CSS حاصل شده از پردازش کدهای LESS می باشد :

اگر فایل kelidestan.css را با یک نرم افزار ویرایشگر متن (مثل Notepad ویندوز یا Adobe Dreamweaver) باز کنیم، شامل کدهای CSS زیر می باشد :

بنابراین چگونگی پردازش کدهای LESS و تبدیل آنها به کدهای CSS نهایی را یاد گرفتید و در کلیدهای آموزشی بعدی، تنها به ذکر کردن کدهای LESS و کدهای CSS تولید شده از پردازش آنها، اکتفا می کنیم و فرضمان بر این است که چگونگی پردازش کدهای LESS را می دانید.