آموزش LESS بخش پنجم

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

در وب سایت مثال اول یک باکس ساده را توسط کدهای less طراحی کردیم . در وب سایت مثال بعدی که می خواهیم روی لوکال هاست پیاده سازی کنیم (توسط فایل less.min.js) خروجی زیر مورد نظر ما می باشد (تصویر زیر)

کامپایل less روی لوکال هاست

کد html مثال فوق بصورت زیر می باشد :

                              
 
    

سلام . به آموزش LESS خوش آمدید

وب سایت Mohtava.info

توضیح : ابتدا مانند مثال قبل ، تگ div ای با کلاس container تعریف کرده ایم و سپس برای مشخص کردن نوار بالای منوی سایت (خوشامد گویی) ، یک div با کلاس mixin تعریف کردیم. نام mixin دلخواه می باشد ! که بعدا در فایل style.less این کلاس ها را تعریف خواهیم کرد .

سپس به منوی سایت می رسیم که درون تگ div با کلاس menu تعریف شده است و در آن مانند سایر منوها از ul و li استفاده شده است . بعد از منو از clear استفاده کرده ایم که سایر المانهای سایت را از خط بعد شروع کند . سپس باکس محتوای سایت را داریم که از کلاس box و یک تگ h1 بهره می برد . در نهایت نیز فوتر سایت را داریم که از کلاس mixin بعلاوه footer استفاده می کند .

این بود توضیح اجمالی دستورات صفحه index.html وب سایت مثال دوم .

حال به سراغ کدهای فایل style.less می رویم که مبحث اصلی آموزش ما نیز همین فایل است :

مانند قبل ، متغیرهای مورد نظرمان را در بالای فایل تعریف می کنیم :

                              
@w: 400px;
@h: 400px;
@color1: #ff8822;
@color2: @color1 + #444;
@dir: rtl;
@centered: 0 auto;
@FontFace: Tahoma;

توضیح : طول و عرض باکس محتویات سایت را تعریف کرده ایم و سپس رنگ های دلخواه و direction را جهت فارسی نویسی (راست به چپ) و وسط چین شدن را توسط ۰ auto تعریف کردیم و در نهایت نام فونت Tahoma .

در مقاله بعد تعریف کدهای css را برای این پروژه شروع خواهیم کرد .


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



دیدگاه ها :