آموزش Less مقدمه و نصب Less

1396/3/26 علیرضا حاتمی نیا 2754

روش نصب less

مقدمه و معرفی:

 

سلام دارم خدمت شما دوست گرامی و علاقه مندان به آموزش Less من علیرضا حاتمی نیا هستم و با یکی دیگر از آموزش های وبسایت ilikephp.ir در خدمت شما هستم. در قسمت اول آموزش Less با مقدماتی از این آموزش آشنا خواهید شد و سپس روش نصب و استفاده از Less را فرا خواهید گرفت.

 

از زمانی که زبان CSS برای استایل دهی به عناصر HTML معرفی شد، روند طراحی یک سایت بسیار لذتبخش تر و سریع تر پیش رفت. کنترل ظاهر یا استایل عناصر HTML راحت تر شد و توسعه آن نیز آسان تر گردید. ولی اکنون  با پیشرفت HTML و CSS و ارائه نسخه های جدیدتر از این دو و به دلیل داینامیک نبودن CSS روند طراحی و توسعه یک وبسایت کند و خسته آور شده است. زیرا هر ساله شاهد تغییر تم های مختلف از سوی طراحان هستیم و گاهی برای تغییر استایل ظاهری چند عنصر مجبورید کل  سند css را خط به خط مرور کنید و تغییرات لازم را اعمال کنید.


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


نگران نباشید : پیش پردازنده هایی چون Sass ، Less و Stylus برای همین کار پدید آمده اند.
دقت کنید :
قبل از شروع آموزش Less شما باید با زبان های HTML و CSS آشنا باشید. اگر با این زبان ها بیگانه اید می توانید آموزش HTML CSS را فرابگیرید.

divider

Less چیست ؟

Less یک پیش پردازنده CSS است که با زبان جاوا اسکریپت توسعه یافته است. ویژگی های Less شما را قادر به استفاده از متغیر ها ، mixin ها ، توابع و ده ها تکنیک دیگر جهت استفاده بهینه تر از CSS می کند. Less با کلیه مرورگرهای مطرح و محبوب سازگاری کامل دارد و توسط Node.js و Rhino قابل اجرا می باشد. در کل شما با قاعده Less اقدام به نوشتن کدهای CSS می کنید و بعد از اتمام کار آن را به CSS کامپایل می کنید.

نصب Less :

از آنجایی که Less با جاوااسکریپت نوشته شده است ، روش های مختلفی برای نصب و استفاده از قابلیتهای Less وجود دارد. دو روش پرکاربرد برای نصب واستفاده از less وجود دارد .
1-    استفاده از فایل less.js
2-    استفاده از node.js
در روش اول شما با اضافه کردن فایل less.js به سند HTML به صورت realtime فایل هایی با پسوند .less را به CSS کامپایل می کنید. استفاده از این روش راحت است ولی اجرای بسیار کندی دارد به همین دلیل کمتر مورد استقبال قرار می گیرد.
در روش بعدی که آموزش ما بر همین اساس پیش می رود استفاده از node.js است. روند بسیار ساده ای است.
قدم اول : شما ابتدا  آخرین نسخه node.js را دانلود کنید و مراحل نصب آن را انجام دهید.

 

nodejs

 

قدم دوم : پس از نصب nodejs در خط فرمان ترمینال سیستم عامل با استفاده از دستور npm به راحتی می توانید less را توسط دستور زیر نصب کنید:
 

npm install -g less

cmd install less

پس از نصب less پیامی شبیه پیام زیر نمایش داده می  شود.

استفاده از less :

بسیار عالی .شما به راحتی توانستید less را نصب کنید. حال برای استفاده از less شما باید فایلهای html و css خود را در پوشه nodejs ایجاد کنید.  
برای مثال: یک فایل با نام style.css ایجاد کنید. سپس فایلی با همان نام و با پسوند less  یعنی فایلی با نام style.less ایجاد می کنیم.
سپس کدهای less را طبق قواعد دستوری less در فایل style.less می نویسیم و در نهایت با دستور زیر آن را به فایل style.css کامپایل می کنیم.

lessc style.less style.css

cmd lessc

برای مثال قطعه کد less زیر را به css کامپایل کنید

علیرضا حاتمی نیا
طراح و برنامه نویس وب
طراحی وبسایت های واکنش گرا
طراحی و پیاده سازی سیستم مدیریت محتوا
سئو و بهینه سازی سایت