LESS چیست ؟ توسعه برنامه نویسی مکمل css

[s1r101 15]

LESS چیست ؟

توسعه داینامیکی css مانند متغیر ها mixin ها، عملیات و توابع که باعث شده css به سوی پویا سازی هدایت گردد و امکانات زیادی رو فراهم نموده برای طراحان وب .

سازگاری این برنامه نویسی با اکثر مروگر های معروفی از جمله کروم (چروم) سافاری و فایرفاکس می باشد و از سرور قدرتمند (

node.js

) و

rhino

قابل اجرا می باشد و فراخوانی می گردد.

در واقع LESS چطور کد گذاری می کند و در جوملا فعال می باشد و چگونه ؟

خوب باید بگم که بله خوشبختانه همیشه جوملا در زمینه امکانات جدید و نویین در سطح بالایی بوده و این روش کد نوشتن که باعث می گردد استفاده کمتری از php در بعضی از مواقع باشد در جوملا 3 یکپارچه سازی گردیده و در بیشتر مواقع خروجی html دارد و سر آخر نیز با تحلیل سرور به خروجی css تبدیل می گردد

کمی گنگ هست نه ؟ نگران نباشید با کمی دقت بیشتر شما می توانید از این برنامه نویسی قوی به صورت کامل لذت ببرید !!

ویژگی های LESS چیست ؟

باید بگم در سه بعد این مورد برسی می گرددکه هر کدام برای خودشان شاخه و برگ دارند .

Mixins ها:

در واقع این امکان بسیار بزرگ برای طراحان وب ایجاد شده هست که قادر هست تمام مشخصات کلاس مورد نظر یا id را در خود ذخیره کند. شما فقط نام یک کلاس یا id را به عنوان یک مشخصه ی CSS انتخاب کنید تا LESS به آن مراجعه کرده و تمامی مشخصه های آن را به محل جدید اضافه نماید.

حال شما می توانید چند کد در هم یا همان چند استایل در استایل را ذخیره کنید و کد نویسی شما به صورت واقعا رویایی کم می شود و باعث می گردد وب سایت شما پویا سازی شده و سرعت آن بالا برود

در زیر یک تکنیک رو برای شما آورده ایم

کد:

.thinborder(@radius: 5px, @color:  #d5d4d4, @width: 1px){ border: @width solid @color;  -webkit-border-radius: @radius; -moz-border-radius: @radius;  border-radius: @radius; } 

و می توانید به صورت زیر هم به کار ببرید

کد:

.moduletable { 

کد:

.thinborder(2px,#336699);
}

خوب نکته جالب اینجاست که شما الان می توانید به سادگی هرچه تمام تر در کد نویسی زیاد css از این مورد استفاده کنید و به راحتی کد های خودتان را قابل به روز رسانی رها نمایید.

متغیر ها (VARIABLES) :

وقتی نام متغییر ها در یک برنامه نویسی می آید همیشه فکر به خلاصه نویسی می رود دقیقا در این برنامه نویسی نیز همچنین امکانی فراهم شده شما بجای اینکه چندین خط رو همیشه کپی کنید یا اینکه برای هر کدام اندازه چندین خط دوباره ایجاد کنید متغییر ها به شما اجازه می دهند شما یک بار نوشته و همیشه با یک خط در هرجایی که نیاز دارید استفاده کنید و حتی ویرایش نمایید (اشتباه نگرید با کلاس ها )

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

کد:

@primary : #336699;   @secondary : #444444;   @bordercolor : #d5d4d4; 

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

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

کد:

a.readon{ color: @secondary; }   h1{ color: @primary; border: 1px solid @bordercolor; } 

کد:

a.readon{ color: @secondary; } h1{ color: @primary; border: 1px solid @bordercolor; } 

وقتی از طرف سرور کد های فراخوانی و خواننده می شود به صورت css در آید منظرو خروجی می باشد حال وقت این هست که شما نتیجه کار خود را ببنید

توجه فرمایید اگر شما یک طراح وب باشید در اولین نگاه این کد ها شاید برای شما چیزی نباشد و اصلا کاربرد خاصی نداشته باشد ولی متعادل کد های حرفه ای برای ساخت یک وب سایت جوملایی شاید به حدود 1800 خط برسد و خیلی بیشتر از این پس در آن موقع شما درک خواهید کرد که نیمی از خط ها را حلاصه نویسی نمودید

توابع (Functions):

یکی از مهمترین بعد هایی که در ایم مقاله برسی خواهیم کرد . با این امکان شما دیگر می توانید از ضرب، تقسیم، جمع و تفریق استفاده کنید. و ساخت یک استایل قوی یا ساده و استفاده مجدد در چند جا . و یک نکته ویژه این هست که شما با این مورد می توانید جاوا اسکریپت رو لود کنید در LESS به سادگی بخوانید و سر آخربا مقادیری بهتر و خاص در در css قرار بدهید.

کد:

//Define variables @borderwidth : 2px; @background : #222222;  .moduletable { background-color: (@background / 4); border:  (@borderwidth + 1) solid (@background * 2); } 

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

به آخر مقاله رسیدید پیشنهاد می کنم از قالب هایی که جوملای جهانی قرار داده استفاده کنید تا آشنایی کامل با جوملا 3 پیدا کنید هرچه به جلوتر می رویم به ابعادی جدیدی از وب می رسیم

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

کد:

// CSS Reset@import "../../../media/jui/less/reset.less";   // Grid  system and page structure @import  "../../../media/jui/less/scaffolding.less"; @import  "../../../media/jui/less/grid.less"; @import  "../../../media/jui/less/layouts.less";   // Base CSS @import  "../../../media/jui/less/type.less"; @import  "../../../media/jui/less/code.less"; @import  "../../../media/jui/less/forms.less"; @import  "../../../media/jui/less/tables.less"; 

برای آموزش های بیشتر و دریافت کتاب خانه می توانید از وب سایت زیر استفاده کنید

LESS « The Dynamic Stylesheet language

دریافت موارد بیشتر مربوط به جوملا

JUI - Joomla User Interface Library