آموزش LESS بخش چهارم

آموزش LESS بخش چهارم

در مقاله قبل ، با mixin ها در less آشنا شدیم و نیز فایل less.min.js را دانلود کردیم . در این مقاله میخواهیم نحوه کامپایل زبان less را بوسیله کتابخانه جاوااسکریپت زبان less یعنی فایل less.min.js بررسی کنیم .

نکته مهم :  اگر می خواهیم به این روش از less استفاده کنیم باید فایلهای سایت خود را روی سرور قرار دهیم (یا روی هاست واقعی و یا روی لوکال هاست) که ما در این آموزش از Local Host استفاده می کنیم .

 

اجرای لوکال هاست :

بدین منظور برنامه xampp و یا wampp را اجرا کنید و سرور آپاچی را start کنید . حال به مسیر پیش فرض زیر بروید و فولدرسایت خود (در این مثال بنام less می باشد) را در آن کپی کنید :

C:\xampp\htdocs\

در این مرحله ، آدرس http://localhost:81/less/ را در نوار آدرس مرورگر خود تایپ کنید (ممکن است پورت لوکال هاست سیستم شما تفاوت داشته باشد) .

 

ادامه استفاده از فایل جاوا اسکریپت Less :

دقت کنید که از این پس تمام تغییرات و کدها را در فایلهای واقع در لوکال هاست اعمال می کنیم .

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

<script src="less.min.js" type="text/javascript" ></script>

نکته دیگری که وجود دارد اینست که دیگر نباید فایل css را در head تعریف کنید . بلکه می بایست فایل style.less را بصورت زیر به head اضافه کنید :

<link rel="stylesheet/less" href="style.less" type="text/css"/>

نکته ۱: همانطور که در کد فوق می بینید ، خاصیت rel را باید برابر stylesheet/less قرار دهیم.

نکته ۲: در تگ head ابتدا باید فایل style.less را تعریف کنیم و سپس فایل less.min.js . یعنی head وب سایت ما بصورت زیر خواهد شد :

<head>

    <meta charset="utf-8" />

    <title>Second Less Example !</title>

    <link rel="stylesheet/less" href="style.less" type="text/css"/>

    <script src="less.min.js" type="text/javascript" ></script>

</head>

در مقاله بعد ، مثالی در مورد استفاده از فایل less.min.js و ایجاد یک صفحه وب خواهیم دید .


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



دیدگاه ها :