خصوصیاتless درجوملا

LESS چیست ؟
LESS توسط روش‌هایی مانند متغیرها، حسابگرها، mixinها و توابع، قابلیت‌های CSS را توسعه داده و آنرا پویا ساخته است.

LESS در هر دو محیط سمت کاربر (مرورگرهای وب مانند گوگل کروم، فایرفاکس، سافاری) و سمت سرور توسط Node.js و Rhino قابل اجــــرا و بهره‌ گیری می‌باشد. به نوعی می‌توانیم به آن زبان پویای شیوه نامه‌ها (CSS) نیز اتلاق کنیم.

استفاده از less در جوملا:
یکی از هزاران ویژگی جدیدی که در جوملا ۳ وجود دارد اجرای LESS می باشد ، LESS یک زبان شیوه نامه پویا است که توسط Alexis Sellier طراحی شده و به تازگی وارد جوملا ۳ گردیده و با آن یکپارچه شده است. بسیار شنیده می شود که افراد زیادی از LESS صحبت می کنند، LESS چیست و چگونه میتوان از آن استفاده کرد، اما برای کسانی که علاقمند به یادگیری هستند پیشنهاد می کنیم این مقاله را مطالعه کنند و از مزایا و چگونگی استفاده از این زبان شیوه نامه پویا در جوملا بهره مند شوند.

LESS یک شیوه نامه داینامیک یا پویا می باشد و این خصوصیت به شما کمک می کند تا معنا و درک بهتری از LESS با کد زدن کمتر، مانند php داشته باشید. LESS در اغلب موارد به همان شیوه ترجمه php، توسط سرور انجام می شود و در خروجی چیزی به صورت HTML نمایش داده می شود. همچنین باید بدانید که LESS توسط سرور تفسیر و ترجمه می شود و هم در خروجی به صورت CSS نمایش داده می شود . این خیلی ساده است.

برای این که بیشتر برایتان این مسئله را واضح کنم باید بگویم، LESS زبان توسعه داده شده از CSS به همراه تنوع و ویژگی های اضافی می باشد . در این مقاله می خواهیم بر روی سه ویژگی آن بحث و بررسی بیشتری داشته باشیم : متغیر ها، mixins ها و توابع

متغیر ها (VARIABLES) :
متغیرها این امکان را فراهم می‌کنند تا مقادیری که چندین بار در سند CSS استفاده شده را در یک متغیر ذخیره کرده و از آن در مکان‌های مختلف سند استفاده نماییم و در نهایت، برای تغییر مقدار آن، تنها کافیست فقط یک خط را ویرایش کنیم.
در LESS میتوانیم مجموعه ای از متغیرها را تعریف کنیم و سپس از آن ها در تمام CSS های خود استفاده کنید. در زیر ما سه متغیر تعریف می کنیم و به شما آموزش می دهیم که چگونه از آنها در قالب خود استفاده نمایید :

به مثال زیر توجه کنید:

هنگامی که شما به متغیر ها، مقادیری را اختصاصی دادید ، میتوانیم از آن ها در هر جای دیگر استفاده کنیم

به عنوان مثال :

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

Mixins ها:
Mixin ها مشابه متغیرها عمل می‌کنند با این تفاوت که بجای نگهداری یک مقدار ساده، قادر به ذخیره‌ی تمامی مشخصه‌های یک class یا id هستند. کافیست نام یک کلاس یا id را به عنوان یک مشخصه‌ی CSS استفاده کنیم تا LESS به آن مراجعه کرده و تمامی مشخصه‌های آن را به محل جدید اضافه نماید. در واقع باید گفت این یک راه فانتزی برای ذخیره کردن هست، شما می توانید مجموعه ای از استایل ها را درون استایلی دیگر ذخیره کنید. و این کار بسیار شبیه متغیر ها است.

در زیر یک مثال از این تکنیک را آورده ایم:

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

همانطور که متوجه شدید، شما می تواند هرگونه یا هیچ یک از پارامترها را تغییر دهید، هر پارامتری که تعریف نشده باشد، را شما می توانید از مقادیر پیش فرض استفاده کنید (در مثال بالا مقدار پیش فرض width:1px می باشد).

نکته : این یک راه خوب برای مدیریت خوب CSS می باشد و شما را در نوشتن مقدار زیادی خطوط اضافی و کد های CSS کمک می کند.
نکته : به راحتی شما می توانید مقادیر پیش فرض CSS را بروز نمایید،  و این امر کلیه اسناد CSS شما را در بر می گیرد.

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

به مثال زیر توجه کنید:

با ایجاد این استایل و اضافه کردن توابع LESS شما به راحتی می توانید استایلی ایجاد کنید که استاندارد باشد و در تمامی استایل ها در صورت نیاز به صورت منحصر به فردی استفاده نمایید. کد بالا نشان می دهد که به صورت پیش فرض رنگ پس زمینه تعریف کرده ایم، سپس در قسمت background color  مقدار آن را بر عدد ۴ تقسیم کردیم، سپس در border ما از مقدار متغیر borderwidth با رنگ زمینه متغیر background استفاده کرده ایم.

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

http://lesscss.org

حال چگونه قالب جوملا ۳ را با جوملا پیاده سازی کنیم : جوملا ۳  شامل یک JUI library در روت پوشه media می باشد . این پوشه در تمامی هسته های LESS قابل استفاده است. قالب های جوملا می توانند از این فایل ها استفاده کنند، برای این کار باید ابتدا این فایل ها را درون قالب خود import کنند.

در زیر مثالی از وارد کردن و استفاده کردن آن در CSS های خود را آورده ایم:

هنگامی که شما پایه کلاس های LESS را وارد می کنید (IMPORT)، امکان افزودن استایل LESS در قالب خود را دارید و  یک فایل template.css کامپایل و تمام سایت خود را به صورت یک سبک واحد کنترل کنید. در کامپایل استایل LESS شما نیاز به اجرا کردن یک کامپایلر برای خروجی فایل CSS دارید. این راه یک اصطلاح است برای تعریف و نوشتن فایل های CSS کمتر نسبت به فایل هایی CSS عادی که شامل خطوط زیادی کد می باشد .