اگر در حوزه طراحی وب کار کرده باشید، می دانید که امروزه بار اصلی طراحی یک سایت ، طراحی دقیق شیوه نامه های آن یا همان 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 را گرفته و نسخه استاندارد آنرا به شما تحویل می دهد.
مطالب تصادفی
- معرفی سایت - استانداردها و تعرفه های حوزه نرم افزار
- معرفی سایت - ویدئوهای آموزشی دروس تخصصی دانشگاه های معتبر دنیا
- معرفی نرم افزار - کتابخانه ای برای مدیریت کدها
- ضرورت وجود یک نهاد مشاورتی قابل اعتماد در زمینه نرم افزار
- معرفی نرم افزار - افزونه مترجم برای فایرفاکس
- توصیه های اقتصادی پدرانه - نحوه کسب موفقیت در ایران
- معرفی نرم افزار رایگان - تبدیل فایل های ویدیویی
Subscribe to this comment's feed
