آموزش LESS بخش اول

آموزش LESS بخش اول

در این سری آموزشی قصد داریم با زبان شیوه نامه LESS آشنا شویم .

آموزش Less

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

این زبان توسط روش هایی مثل متغیرها و توابع ، CSS را پویا (Dynamic)  ساخت است که در هر دو سمت کاربر (Client Side) مانند مرورگرهای کروم ، موزیلا و … و سمت سرور (Server Side) مانند Node.Js قابل استفاده می باشد .

وب سایت مرجع این زبان LessCss.org می باشد که می توانید توضیحات مفصلی درباره less را در آن مشاهده کنید . برای دوستانی که با زبان انگلیسی آشنایی ندارند و یا نیاز به راهنمای فارسی Less دارند وب سایت LessCss.ir پیشنهاد می شود .

فلسفه اصلی استفاده از این زبان به این صورت است که فرض کنید یک پروژه در مقیاس بزرگ دارید که میخواهید بعنوان مثال رنگ border بالای هدر را تغییر دهید و این رنگ در بالای سایدبارهای سمت راست و چپ و چند جای دیگر از وب سایت شما استفاده شده است . در حالت عادی باید در فایل css وب سایت خود دنبال رنگ مورد نظر بگردید و یکی یکی آنها را تغییر دهید . در حالی که ممکن است چند property را فراموش کنید عوض کنید ، کاری زمان بر نیز می باشد . در صورتی که اگر از Less استفاده کنید ، در ابتدای فایل style.less وب سایت خود ، رنگ موردنظر را که در چند قسمت مختلف سایت استفاده شده است را در متغیری بنام topColor میریزیم و از این پس هر وقت که نیاز به تغییر رنگ موردنظر بود ، فقط کافیست مقدار این متغییر را به رنگ دلخواه خود تغییر دهید .

فریمورک های بزرگ و قدرتمندی توسط این زبان استایل دهی شده اند مانند بوت استرپ ، Foundation . با این اوصاف ، وقت آن رسیده است که استایل پروژه های بزرگ خود را از این به بعد توسط Less توسعه دهید .

شروع کار با LESS :

کد اصلی زبان Less توسط جاوا اسکریپت نوشته شده است . برای شروع کار می توان به سه روش از less در برنامه خود استفاده کنیم :

 یکی اینکه نرم افزارهای کامپایل Less را دانلود کرده و فایل با پسوند less خود را به آن import کرده و فایل css مربوطه را خودش بسازد .

روش دوم بدین صورت است که فایل less.min.js را دانلود کرده و در بخش head سایت خود آنرا اضافه کنید .

 روش سوم اینست که به وب سایت هایی که بصورت آنلاین Less را به css تبدیل میکنند مراجعه کنید .

در مقاله بعد ، نرم افزار WinLess را دانلود خواهیم کرد ( نرم افزاری برای کامپایل less و تبدیل آن به css ) و اولین فایل html و less را ایجاد خواهیم کرد .


تاریخ انتشار :۱۲ فروردین ۱۳۹۵



دیدگاه ها :