در پروژه های خود می توانیم از فایل های less بهمراه دستورات مخصوص آن استفاده کنیم.برای اینکار در پروژه خود یک فایل با پسوند less. ایجاد می کنیم.
یک فایل less باید دارای دستورات مخصوص خود باشد و اگر قرار باشد در یک فایل less تنها از دستورات عادی css استفاده کنیم پس بهتر است پسوند فایل همان css. باشد و نیازی دیگر به کامپایل کردن نیست.
نمونه فایل html که فایل style.css را درون خود import کرده است.
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>دوره آموزش less</title> <link rel="stylesheet" type="text/css" href="./style.css"> </head> <body> <p>تبدیل فایل less به css</p> </body> </html> |
برای تبدیل یک فایل less به css نیاز به یک کامپایلر داریم که به دو روش قابل استفاده است:
- استفاده از از ابزار npm و نوشتن دستور کامپایل درون command line
- استفاده از افزونه جانبی برنامه vscode
استفاده از افزونه جانبی برنامه vscode
برای تبدیل یک فایل less به css نیاز به یک کامپایلر داریم که ما در روش اول از افزونه جانبی برنامه vscode استفاده می کنیم.برای همین منظور در بخش extensions برنامه vscode افزونه easy less را جستجو، دانلود و نصب می کنیم.
پس از نصب این افزونه می توانیم یک فایل با پسوند less. ایجاده کرده و دستورات مخصوص less خود را درون آن قرار می دهیم.
پس از کدنویسی فایل less شما آماده تبدیل شدن به فایل css است.
در vscode برای اجرای افزونه باید کلید ترکیبی ctrl+shift+p را بزنیم.پس از کلیک بخشی برای جستجوی دستور براساس افزونه باز می شود که باید دستور زیر را درون آن وارد کنیم.در کادر باز شده متن زیر را می نویسیم.
|
1 |
compile less to css |
پس از وارد کردن دستور بالا در لیست باز شده، گزینه compile less to css نمایش داده می شود که باید بر روی آن کلیک کنیم.پس از کلیک فایل شما در همان مسیر تبدیل به css می شود.
این فایل قابل استفاده خواهد بود.
