استفاده از Less در جوملا

Written by | 01 August 2013 | Published in 2013 August
با پیشرفت وب نرم افزارهای توسعه دهنده نیز پیشرفت های شگرفی کرده اند. در زمینه طراحی وب سایت یکی از مهمترین بخش ها مربوط به استایل ها یا همان فایلهای CSS می باشد. ابزارهای بسیار قوی برای برای توسعه استایلها ارائه شدند اما رسم الخط CSS تغییری بنیادین نکرد تا زمانی که این حرکت با Sass و سپس Less آغاز شد. Less زبانی جدید نیست بلکه تنها ابزاری است که امکانات اضافی به استایلهایی که همیشه به آن عادت داشتید اضافه کرده است.این امکانات باعث توسعه سریعتر، ساده تر و خواناتر می شود. در این مقاله به توضیح مقدماتی درباره Less و سپس نحوه استفاده از آن در جوملا می پردازیم.

LESS چیست؟

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

قابلیت های اصلی LESS

1 – متغیرها :

حتما برای شما هم بسیار پیش آمده که رنگی را به تعدادی از کلاس ها اعمال کرده اید و بعدا تصمیم به تغییر آن گرفتید اما تغییر تمام رنگ ها ممکن است کمی سخت باشد. LESS با استفاده از متغیرها این کار را برای شما ساده میکند و فقط کافی است یکبار کد رنگ را تغییر دهید. به عنوان نمونه :

/* Normal CSS */

/* It's difficult to change all colors */

div { color : #eee; }

span { border-color : 1px solid #eee; }

h2 { color : #eee;}

/* LESS */

@color : #eee;

Div { color : @color; }

Span { border-color : 1px solid @color; }

H2 { color : #eee; }

اگر تصمیم بگیرید رنگ #eee را به #ddd تغییر دهید تنها کافیست تعریف @color را تغییر دهید. LESS تمام مواردی که @color استفاده شده است را برای شما تغییر می دهد.

@color : #fff;

محاسبات بر روی متغیرها

در LESS امکان محاسبات بر روی متغیرها به صورت ساده وجود دارد. بیشترین استفاده از توابع محاسباتی استفاده در اعداد مانند width یا margin است.

@margin : 20px;

.left { margin : @margin * 2; }

.right [ margin : @margin; }

استفاده مجدد از کلاسها

از امکانات بسیار خوب LESS استفاده مجدد از کلاسها است. در واقع این امکان نوع ساده تر Mixin ها است. استفاده مجدد از کلاسها باعث میشود کدهای شما کمتر تکرار شوند و هر تغییری بر روی یک کلاس بر روی بقیه کلاسها نیز تاثیر بگذارد.

.right {

float: right;

text-align : right;

}

.box {

                Border : 1px solid #ddd;

                Border-radius : 5px;

Color : red;

Background : #fff;

}

.anotherbox {

.box;   /* box class will be inserted here */

Color : blue;

.right;

}

استفاده از Mixinها

Mixin ها میتوانند شبیه توابع رفتار کنند. استفاده از آنها هنگامی مفید است که میخواهید تعدادی از ویژگی ها را در موارد مختلفی استفاده کنید. مثلا نمونه زیر را تصور کنید :

#links a

{

-webkit-transition:all 0.3s ease-in-out;

-moz-transition:all 0.3s ease-in-out;

-o-transition:all 0.3s ease-in-out;

transition:all 0.3s ease-in-out;

}

.mybuttons

{

-webkit-transition:all 0.2s ease-in-out;

-moz-transition:all 0.2s ease-in-out;

-o-transition:all 0.2s ease-in-out;

transition:all 0.2s ease-in-out;

}

با استفاده از Mixin میتوان این کدها را بسیار ساده تر، خواناتر و سریع تر نوشت :

.transition(@transition) {

-webkit-transition: @transition;

     -moz-transition: @transition;

       -o-transition: @transition;

         transition: @transition;

}

#links a {

                .transition(all 0.3s ease-in-out);

}

.mybutton {

                .transition(all 0.3s ease-in-out);

}

کدهای تو در تو یا Nested

در هنگام نوشتن CSS حتما با تکرار زیاد idها و class ها مواجه شده اید. LESS این تکرارها را از بین میبرد به این صورت که به شما امکان میدهد این کدها را تو در تو بنویسید. مثال زیر این مسئله را بهتر نشان میدهد:

/* Normal CSS */

#main ul li { color : red; }

#main ul li a { font-size : 12px;}

#main ul li a span { color : white; }

#main ul li div { font-size : 15px;}

/* LESS code */

#main ul li {

                Color : red;

                A {

font-size : 12px;

                                span { color : white;}      

)

                Div { font-size : 15px; }

}

در درون بلاکها برای ارجاع دادن به خود کلاس باید از & استفاده کنید.

A {

                Color : blue;

                &:hover { color : red; }

                &:active { color : white; }

}

از استفاده های مهم دیگر بلاکهای تو در تو، استفاده از media query هاست.

/* LESS source */

Div {

                Float : left;

@media only screen and (max-width: 580px)

           {

                Float : none;

                Clear : both;

           }

}

توابع رنگ

LESS دارای توابع مختلفی است اما یکی از پرکاربردترین توابع ، توابع رنگ هستند. با این توابع میتوانید رنگ را به راحتی روشن تر یا تیره تر کنید یا آلفای رنگ را تغییر دهید. برای این کار از توابعی مانند lighten, darken, fade, saturate و .. .استفاده می شود. برای اطلاعات بیشتر میتوانید به مرجع رسمی LESS مراجعه کنید.

@color : #eee;

Img { box-shadow : 0px 0px 6px fade(@color , 40%) ;}

Img:hover { box-shadow : 0px 0px 6px @color; }

نرم افزارهایی برای LESS

CrunchApp

از نرم افزار CrunchApp برای ایجاد و کامپایل فایلهای LESS می توانید استفاده کنید.از ویژگی های مهم این نرم افزار خطایابی آن می باشد.

SimpleLess

نرم افزار SimpleLess بر روی ویندوز و مک اجرا می شود. این برنامه فایلهای LESS را زیرنظر قرار می دهد و در صورت ایجاد تغییر آن را کامپایل میکند.

استفاده از فایل Less.js

می توانید با اضافه کردن این فایل به سایت به صورت پویا و داینامیک فایلهای LESS را کامپایل و اجرا نمایید. از نکات مثبت استفاده از این فایل میتوان امکان تغییر پویا متغیرها و عدم نیاز به استفاده از کامپایلرها و از نکات منفی آن میتوان به کاهش سرعت و عدم امکان استفاده در صورت غیرفعال بودن جاوا اسکریپت نام برد.

نحوه استفاده از LESS در جوملا

همانطور که در مقاله ای از David Hurley با عنوان Do LESS in Joomla آمده است جوملا نسخه 3 شامل کتابخانه JUI در فولدر مدیا در مسیر media/jui/less می باشد. این پوشه شامل تمام فایلهای هسته ای و اصلی LESS می باشند. می توانید هر کدام از این فایلها را وارد (import) کنید و فایلهای اختصاصی LESS خود را بسازید تا قالب سایت خود را تغییر دهید. در پایان تمام فایلها کامپایل شده و تبدیل به یک فایل template.css می شوند و دیگر تعداد زیادی فایل استایل در سایت خود نخواهید داشت.

از نمونه فایلهای اصلی LESS می توان به فایلهای زیر اشاره کرد:

@import "../../../media/jui/less/reset.less";     /* ریست استایلها

@import "../../../media/jui/less/mixins.less";   /* میکسین های پر استفاده

و سایر فایلها مانند شکل دهی به دکمه ها (buttons.less) فرم ها و جدول ها (forms.less و table.csss) ، صفحه بندی و نوار بالای سایت (pagination.less و navs.less) طراحی واکنشی مخصوص مانیتورها، صفحات و دستگاهها و موبایلهای مختلف (responsive-xxx.less)

دو فایل اختصاصی variables.less و icomoon.less نیز جهت تعریف متغیرهای اولیه و آیکونهای سایت شما پیش بینی شده است.

برای اطلاعات بیشتر به آدرس http://jui.kyleledbetter.com مراجعه کنید.

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

https://github.com/joomla/joomla-cms/blob/master/build/generatecss.php

برای اینکار از کلاس JLess جهت تولید فایلهای CSS استفاده می شود.

Read 6676 times Tagged under Farsi
Aali Sohrabi

Aali Sohrabi

Aali Sohrabi / محمد علی سهرابی

Web developer and joomla developer, designer and programmer. Interested in new modern web designs.

توسعه دهنده وب و جوملا، طراح و برنامه نویس.

http://liber.ir/