You are here:

معرفی کتابخانه جاوا اسکریپت LESS - طراحی حرفه ای تر شیوه نامه ها

فرستادن به ایمیل چاپ

Tags: تجربیات | تخصصی | معرفی | وب

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

مثلاً اگر برای پشت زمینه ، رنگی را انتخاب کرده اید و می خواهید رنگ متن ، 50 درصد روشن تر نسبت به آن باشد با استانداردهای فعلی امکان پذیر نیست .

در مثال دیگر ، قالب بندیH1 را طراحی می کنید از لحاظ فونت ، رنگ ، حاشیه ، مرز و سایر مشخصات و برای بقیه برچسب های H2…H6 می خواهید به طور نسبی آنها را افزایش دهید، مثلا فونت در هر سطح رنگ ده درصد کمتر شود ، رنگ با ضریب ثابتی تیره تر شود و حاشیه ها هم به همین منوال تغییر یابد. می توانید در حالت ایده آل، تابعی بنویسید که این مقادیر را به صورت پارامتری دریافت کند و برای هر یک از H1..H6 آن تابع را با مقادیر مورد نظر فراخوانی کنید.

اینجاست که کتابخانه جاوااسکریپت LESS به کمکمان می آید . با هم چند مثال از شیوه نامه هایی که با این روش طراحی شده اند را می بینیم :

 

.box {

@base: #f938ab;
color: saturate(@base, 5%);
border-color: lighten(@base, 30%);
div { .box-shadow(0, 0, 5px, 0.4) }
}

 

@color: #4D926F;
#header {
color: @color;
}

.rounded-corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}

#header { .rounded-corners; }
#footer { .rounded-corners(10px); }

 

تمام کدهای فوق که در آنها از متغیر و تابع استفاده شده است ، نهایتاً به CSS های استاندارد تبدیل می شوند. برای استفاده از این کتابخانه باید کدهای زیر را به ابتدای صفحه وبتان استفاده کنید :

<link rel="stylesheet/less" type="text/css" href="/styles.less">
<script src="/less.js" type="text/javascript"></script>

کتابخانه less حدود 34 کیلوبایت حجم دارد اما اگر همین حجم هم برایتان زیاد است و نمی خواهید سرباری را به بازدیدکنندگان به این خاطر تحمیل کنید، می توانید از این ابزار آنلاین استفاده کنید که شیوه نامه های نوشته شده با قالب Less را گرفته و نسخه استاندارد آنرا به شما تحویل می دهد.

نظرات (1)Add Comment
0
عالی
نویسنده رضا.ب, نوامبر 11, 2011
مرسی از این پست خوب...

نظرتان را بنویسید
کوچکتر | بزرگتر

busy
آخرین بروزرسانی ( جمعه ، 13 آبان 1390 ، 20:25 )