آموزش فریم ورک LESS برای CSS

بهمن ۱۸, ۱۳۹۰ توسط : سعید

آموزش فریم ورک LESS برای CSS

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

LESS  چیست ؟
LESS یک فریم ورک برای کار با زبان CSS میاشد که از قوانین CSS استفاده میکنه و فقط کافیه کدهای LESS رو در یک فایل CSS بنویسید و ازش استفاده کنید.کامپایلر اصلی LESS با استفاده از جاوااسکریپت نوشته شده که کدهایی رو که شما مینوسید رو به فرمت استاندارد CSS تبدیل میکنه.
یادگیری LESS خیلی راحته همچنین استفاده و نصبش هم به آسونی آب خوردنه!!
LESS امکانات زیادی رو در اختیار ما قرار میده که میتونیم از زبان CSS به عنوان یک زبان برنامه نویسی استفاده کنیم.
ایجاد متغیر
ایجاد توابع
فضای نام (Namespace)
و…

دانلود و نصب
–    برای دانلود به سایت LESS برید و فایل less.js رو دانلود کنید.
http://lesscss.org/
–    کدهای مربوط به LESS در یک فایل با پسوند less باید قرار داشته باشن. مثلا style.less
–    پس از انجام دو مرحله بالا باید less.js و style.less رو داخل صفحه وبسایتمون بارگذاری کنید.

 <link rel="stylesheet/less" type="text/css" href="style.less">
 <script src="less-1.0.41.min.js" type="text/javascript"></script>

دقت کنید باید فایل style.less قبل از فایل less.js بارگذاری بشه.
خب کار نصب این فریم ورک قدرتمند انجام شد . بعد از اجرای صفحه کدهایی که داخل فایل style.less نوشته شدن توسط کامپایلر LESS به کدهای معمولی CSS تبدیل میشن.حالا بریم ببینیم چه کاری میشه با LESS انجام داد!!
دقت کنید تمامی کدهایی که از این به بعد مینویسیم در فایل style.less قرار داره.

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

@variable-name: value;

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

@mainColour: #309296;

body { color: @mainColour; }
 blockquote { border: 2px solid @mainColour; }

کد بالا برابر با کد CSS زیره :
 body { color: #309296; }
 blockquote { border: 2px solid #309296; }

استفاده مجدد از بلاکها با استفاده از mixins
یکی از قابلیتهای LESS استفاده مجدد از بلاکهای CSS که به این قابلیت mixins گفته میشه.به اسن صورت که شما بلاک مورد نظرتون رو به صورت CSS مینویسید سپس میتونید از این بلاک در بقیه بلاکها استفاده کنید :


.roundedBox {
 border: 1px solid #309296;
 background-color: #eee;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 padding: 10px;
 }

blockquote {
 font-size: 1.5em;
 .roundedBox;
 }

.promo {
 width: 10em;
 .roundedBox;
 }

میبینید که به صورت CSS یک کلاس با نام roundBox  نوشتیم که وظیفه گرد کردن گوشه ها رو داره.از این کلاس در کلاسهای blockqoute و promo استفاده کردیم .
که برای نوشتن کد CSS معمولی باید به صورت زیر عمل کنیم :

.roundedBox {
 border: 2px solid #309296;
 background-color: #eee;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 padding: 10px;
 }

blockquote {
 font-size: 1.5em;
 border: 2px solid #309296;
 background-color: #eee;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 padding: 10px;
 }

.promo {
 width: 10em;
 border: 2px solid #309296;
 background-color: #eee;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 padding: 10px;
 }

همچنین میتونید به کلاس roundedBox مقدار هم بفرستید :


.roundedBox( @borderRadius, @borderColour ) {
 border: 2px solid @borderColour;
 background-color: #eee;
 -moz-border-radius: @borderRadius;
 -webkit-border-radius: @borderRadius;
 border-radius: @borderRadius;
 padding: 10px;
 }

blockquote {
 font-size: 1.5em;
 .roundedBox( 5px, #6c6 );
 }

.promo {
 width: 10em;
 .roundedBox( 10px, #fa6 );
 }

همینطور که میبینید دوتا پارامتر به roundedBox اضافه شده . @borderRadius و  @borderColourیکی برای مقدار زاویه گرد شدن گوشه ها و دیگری برای رنگ حاشیه.
سپس وقتی میخواستیم داخل کلاسهای blockquote  و .promo استفاده کنیم مقادیر مختلفی رو به roundedBox پاس دادیم.

همچنین میتونید از مقادیر پیش فرض هم استفاده کنیم :

.roundedBox( @borderRadius: 5px, @borderColour: #6c6 ) {
/* declarations here */
}

استایل های مختصرتر با قوانین تو در تو
LESS اجازه میده از بلاکهای تو در تو برای کوتاه کردن کدهای CSS استفاده کنیم . به عنوان مثال کد css زیر رو در نظر بگیرید :


ul#nav {
 list-style: none;
 }

ul#nav li {
 display: inline;
 margin: 0;
 padding: 0;
 }

ul#nav li a {
 color: #aaa;
 font-size: 1em;
 }

ul#nav li a:hover {
 color: #000;
 }

کد بالا به خوبی کار میکنه اما کد تکراری زیاد داره ( ul#nav, ul#nav li, ul#nav li a, ul#nav li a:hover).
با استفاده از LESS و قوانین تو در تو میتونیم کد بالا رو به صورت زیر بنویسیم :

ul#nav {
 list-style: none;

li {
 display: inline;
 margin: 0;
 padding: 0;

a {
 color: #aaa;
 font-size: 1em;
 &:hover { color: #000; }
 }
 }
 }

پس از اجرای صفحه کامپایلر LESS کد بالا رو به صورت css معمولی تبدیل مبکنه.
به خط زیر دقت کنید :
&:hover { color: #000; }
کاراکتر & به LESS میگه که بین عنصر والد ( در این مثال تگ a )  و عنصر جاری ( در اینجا hover) هیچ فاصله ای قرار نده.این کار در هنگام استفاده از کلاسهای hover , focus , active و … خیلی کمک میکنه چون در هنگام کار با این کلاسها هر فاصله ای بین عنصر والد و این کلاسها باشه کد مورد نظر به درستی اجرا نمیشه.اگر & رو فراموش کنیم قرار بدیم :

a {
color: #aaa;
font-size: 1em;
:hover { color: #000; }
}

LESS کد css زیر رو بهمون میده  :

a {
color: #aaa;
font-size: 1em;
}

a :hover { color: #000; }

دقت کنید که LESS یک فاصله بین تگ a و کلاس :hover قرار داد که باعث میشه به درستی عمل نکنه.

انجام محاسبات با استفاده از توابع و عملگرها!!
یکی از مفیدترین قابلیتهای LESS استفاده از عملگرها و توابع برای دستکاری مقادیر میباشد. شما با این روش میتونید مقادیر،رنگها و متغیرها رو دستکاری کنید .

 + * / –

علگرهای ریاضی

lighten(@colour, x%)

مقدار رنگ  @ colour رو به مقدار x% روشن تر میکنه و بر میگردونه.

darken(@colour, x%)

مقدار رنگ  @ colour رو به مقدار x% تیره تر میکنه و بر میگردونه.

saturate(@colour, x%)

غلظت رنگ @colour رو به مقدار %x بیشتر میکنه

desaturate(@colour, x%)

غلظت رنگ @colour رو به مقدار %x کمتر میکنه

fadein(@colour, x%)

رنگ رو مات میکنه

fadeout(@colour, x%)

رنگ رو شفاف میکنه

spin(@colour, x)

hue(@colour)

saturation(@colour)

غلظت رنگ رو بیشتر میکنه و بر میگردونه

lightness(@colour)

رنگ رو روشن تر میکنه و بر میگردونه

مثال :

@h1Size: 5em;

h1 { font-size: @h1Size; }
h2 { font-size: @h1Size * .8; }
h3 { font-size: @h1Size * .6; }
h4 { font-size: @h1Size * .4; }
h5 { font-size: @h1Size * .2; }

خروجی :

مثال ۲ محاسبه رنگ :

@mainColour: #631;

h1 { color: @mainColour; }
h2 { color: lighten(@mainColour, 10%); }
h3 { color: lighten(@mainColour, 20%); }
h4 { color: lighten(@mainColour, 30%); }
h5 { color: lighten(@mainColour, 40%); }

خروجی :

دسته بندی بندی کدها با استفاده از فضای نام یا Namespace
برا جلوگیری از تصادم متغیرها ، توابع ، mixin ها میتونید از فضای نام استفاده کنید. فضای نام ها وقتی که کدهای زیادی نوشتید و بخواید از تصادم کدهای همنام جلوگیری کنید مفیده.برای سخت یک فضای نام کافیه بالکهای مورد نظرتون رو داخل یک id سلکتور قرار بدید :

#myNamespace {
.selector1 { ... }
#selector2 { ... }
}

برای استفاده از بلاکهای داخل فضای نام از علامت < استفاده میکنیم :

#myNamespace &gt; .selector1;
#myNamespace &gt; #selector2;

کامنت گذاری در LESS
در زبان CSS برای کامنت گذاری و نوشتن توضیحات مربوط به هر خط کد باید به صورت /* */ کامنت رو مشخص میکردیم.اما در LESS برای توضیحات تک خطی از // هم میشه استفاده کرد.

/* This comment will appear in the compiled CSS */

// This comment will not appear in the compiled CSS

بارگذاری استایلهای LESS و CSS
اگر استایل هایی که با LESS درست کردید خیلی بزرگ باشن و خطوط زیادی داشته باشن ممکنه بخواید کدهارو توی فایلهای جداگانه با پسوند .less قرار بدید.برای استفاده و بارگذاری بقیه فایلهای .less از دستور @import استفاده میکنیم :

@import "common.less";
@import "forums.less";

اگر بخواید یک فایل css معمولی رو داخل یک فایل .less بارگذاری کنید هم از دستور @import استفاده میشه.فایلهایی با پسوند .css توسط LESS کامپایل نمیشن :

@import "standard.css";  // This file won't be parsed by LESS

مشکلات
همین طور که قبلا هم گفته شد کامپایلر LESS با زبان جاوااسکریپت نوشته شده و این میتونه مشکلاتی رو برای طراحان به وجود بیاره.در صورتی که جاوااسکریپت در مرورگر کاربر غیرفعال باشه ظاهر سایت کلا به هم میریزه. حتی در صورتی که جاوااسکریپت کاربر فعال باشه کاربر مجبوره فایل less.js رو بارگذاری و اجرا کنه که زمانی رو باید صرف این کار کرد.
برای حل این مشکلات با استفاده از ابزارهایی کدهایی که با LESS نوشته شده رو میتونیم به CSS معمولی وقابل فهم برای مرورگر کنیم تا هیچ نگرانی بابت به هم ریختن استایل صفحه یا عدم بارگذاری و اجرای فایلهای LESS نداشته باشیم.
در زیر به چند تا ابزارهایی که کدهای LESS رو به کدهای CSS معمولی تبدیل میکنن اشاره میکنیم :
استفاده از کامپایلر lessphp
یک کامپایلر برای LESS که با زبان PHP نوشته شده.شما به صورت دستی میتونید قبل از استفاده کدهای LESS رو تبدیل به CSS معمولی کنید یا در حین اجرای برنامه این کار رو روی سرور انجام بدید.
توجه : کامپایلر lessphp در syntax تفاوتهایی با less.js داره.قبل از استفاده داکیومنت هردو رو بخونید تا بعد با مشکل مواجه نشید.
اجرای less.js با استفاده از Node.js
برای این کار میتونید از فریم ورک Node.js هم استفاده کنید.توضیحات تکمیلی رو در داکیومنت سایت LESS بخونید.
کامپایلر LESS برای ویندوز ، لینوکس و مک
یک کامپایلر دیگه هم برای LESS پیدا کردم که توی سیستم عاملهای مختلف اجرا میشه.
http://wearekiss.com/simpless

WinLESS کامپایلر ویندوزی
یک کامپایلر دیگه با رابط کاربری . http://winless.org/

حرف مترجم!!
در این آموزش دیدیم که فریم ورک LESS چقدر میتونه کد نویسی CSS رو برامون راحت تر و جذاب تر کنه.همچنین LESS قابلیتهای یک زبان برنامه نویسی رو به CSS داد تا انعطاف بیشتری در موقع کار با CSS داشته باشیم.روزانه طراحان حرفه ای زیادی از این فریم ورک استفاده میکنن.البته مشکلاتی هم داره اما به راحتی قابل حل شدنه و به نظر من ارزش حداقل یک بار استفاده از LESS توی یک پروژه رو داره.خودم تازه با LESS آشنا شدم و خیلی ذوق زده شدم.دوست داشتم شما هم در مورد این فریم ورک بیشتر بدونید و از کار باهاش لذت ببرید.

منبع مقاله : http://www.elated.com/articles/less-is-more-make-your-css-coding-easier-with-less/
ترجمه : سعید مقدم زاده ( کمی تغییر و تصحیح)

همچنین میتونید فایل PDF این آموزش رو از زیر دانلود کنید .

دانلود : [download id=”3″]

بازدید : ۸۲۲۲

بهمن ۱۸, ۱۳۹۰ @ ۲:۱۵ ب.ظ

بسیار عالی بود سعید جان. مرسی. من خیلی دوست دارم بروز باشم و مخصوصاً از فریم ورک ها استفاده کنم. ولی همیشه از یه چیزی رنج میبرم. این فریم ورک ها مثل همین less بهینه ساز یا optimizer یی ندارن. الآن من استایلم رو نوشتم و حالا میخوام فواصل بینشون رو حذف کنم و … تا از حجمش بیشتر بکاهم. خب بطور عادی حتی اگر css3 هم نوشته باشم باز بهینه ساز هایی هستند که ساپورت کنن ولی وقتی از فریم ورک استفاده کنم دستوراتش برای بهینه ساز نامفهومه و خطا میگیره یا حذف می کنه. بنظرت چه راه حلی برای این هست اگر بخوایم از همین فریم ورک less هم استفاده کنیم؟ ممنونم

پاسخ دادن
    سعید
    بهمن ۱۸, ۱۳۹۰ @ ۳:۳۶ ب.ظ

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

    موفق باشید

    پاسخ دادن
      میثم
      فروردین ۳, ۱۳۹۱ @ ۱۲:۲۸ ب.ظ

      سلام
      ممنون از مطلب مفیدتون
      این کامپایلر که گفتید چیه هست؟
      بازم ممنون

      پاسخ دادن
        سعید
        فروردین ۳, ۱۳۹۱ @ ۱:۰۵ ب.ظ

        سلام
        برای درک کدهای CSS نوشته شده با LESS توسط مرورگر نیاز هست که این کدها به کدهای استاندارد CSS تبدیل بشن.این کار توسط کامپایلر LESS یا سایر کامپایلرهایی که معرفی شده انجام میشه.

        موفق باشید

        پاسخ دادن
بهمن ۱۹, ۱۳۹۰ @ ۱۲:۱۱ ب.ظ

مرسی. توضیحات عالی بود. حتما یکبار امتحان میکنم 🙂

پاسخ دادن
مرتضی
بهمن ۲۱, ۱۳۹۰ @ ۳:۲۸ ق.ظ

ممنون،جالب بود

پاسخ دادن
احمدینا
شهریور ۶, ۱۳۹۱ @ ۵:۴۴ ب.ظ

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

پاسخ دادن
مرتضی
شهریور ۹, ۱۳۹۱ @ ۱۲:۴۵ ب.ظ

سلام. ممنون بابت اموزش خوبتون در مورد این فریم ورک.ببخشید هر چی گشتم لینک دانلود pdf آموزش رو پیدا نکردم.میشه قرار بدید در سایت؟

پاسخ دادن
شهریور ۲۴, ۱۳۹۱ @ ۱۲:۴۱ ب.ظ

عالی بود!
ممنون

پاسخ دادن
mostafa
دی ۱۶, ۱۳۹۱ @ ۸:۲۹ ب.ظ

یکی یه نمونه میذاشت متوجه میشدیم . والا من که نتونستم تو نمنه کارم اینو پیاده کنم . یعنی استایل میدادم و قوانین رو هم رعایت میکردم اما موقع اجرا هیچ خبری نبود

پاسخ دادن
فروردین ۲۱, ۱۳۹۴ @ ۷:۰۳ ب.ظ

سلام خسته نباشید
یه چیزی رو من نفهمیدم اینکه وقتی از این فریم روک استفاده میکنیم خودش خودکار کد هارو به سی اس اس تبدیل میکنه؟
اگه ما بخواهیم به صورت localhost ازش استفاده کنیم فقط فایل less رو باید لینک کنیم یا فایل کامپایل شده less رو؟

پاسخ دادن
    Saeed Moqadam
    فروردین ۳۱, ۱۳۹۴ @ ۹:۰۸ ق.ظ

    برای اطلاعات بیشتر میتونید به لینک زیر مراجعه کنید :

    پاسخ دادن
مهرداد
مرداد ۴, ۱۳۹۴ @ ۱:۰۰ ق.ظ

اموزش خیلی عالی بود . خسته نباشید

پاسخ دادن

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *


*