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

s: تجربیات | تخصصی | معرفی | وب اگر در حوزه طراحی وب کار کرده باشید، می دانید که امروزه بار اصلی طراحی یک سایت ، طراحی دقیق شیوه نامه های آن یا همان 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 های استاندارد تبدیل می شوند. برای استفاده از این کتابخانه باید کدهای زیر را به ابتدای صفحه وبتان استفاده کنید : کتابخانه less حدود 34 کیلوبایت حجم دارد اما اگر همین حجم هم برایتان زیاد است و نمی خواهید سرباری را به بازدیدکنندگان به این خاطر تحمیل کنید، می توانید از این ابزار آنلاین استفاده کنید که شیوه نامه های نوشته شده با قالب Less را گرفته و نسخه استاندارد آنرا به شما تحویل می دهد.