Less چیست و چه کاربردی دارد؟
اگر زبان جاوا اسکریپت را بلد نیستید و به یک ابزار برای تقویت کد های css خود نیاز دارید تا بتوانید با قابلیت های مختلف آن کد های خود را سازماندهی نمایید. این ابزار Less می باشد که می توانید از این مقاله برای شناخت کامل آن استفاده نمایید.
LESS چیست؟
LESS مخفف Leaner Style Sheets می باشد و همانند Sass به عنوان یک پیش پردازنده Css به حساب می آید. این پیش پردازنده با زبان JavaScript طراحی شده است. جالب است بدانید که برای استفاده از این ابزار نیازی به یادگیری جاوا اسکریپت ندارید. پیش پردازنده Less می تواند قابلیت های مختلفی را به css اضافه کند تا طراحان سمت سرور نیز بتوانند از آن استفاده کنند. قابلیت هایی که less به Css اضافه می کند توابع، متغیر ها، MIXIN ها، عملگر های حسابی و… می باشد که باعث ارتقاء css می شوند. در ادامه، توضیحات بیشتری درباره LESS به شما داده می شود.
قابلیت های LESS
تعریف متغیر
طراحان نمی توانند با CSS متغییر تعریف کنند، به همین دلیل وجود LESS واجب می باشد و این مشکل را بر طرف می کند. طراحان به کمک less می توانند در کد های خود متغییر تعریف کنند و در کد های دیگر خود استفاده نمایند. علاوه بر این می توانند به جای قرار دادن مقدار در کد های خود، از نام متغییر ها استفاده نمایند. به مثال زیر توجه نمایید.
|
;width: 20px@ ;height: @width + 5px@ } header# ;width: @width ;height: @height { |
همانطور که در کد نویس بالا می بینید، دو متغییر با نام های width و height تعریف شده است که برای عرض و ارتفاع می باشند. با این قابلیت می توانید به جای بررسی تمام تگ ها، تنها می توانید با تغییر مقدار متغییر مقدار بقیه تگ ها را تغییر دهید.
نوشتار تودرتو
یکی دیگر از قابلیت هایی که زبان css ندارد، نوشتن کد ها به صورت تو در تو می باشد. طراحان با less می توانند کد های خود را به صورت تو در تو بنویسند. به کد زیر توجه نمایید.
|
} header# ;color: #333 { } header .navigation# ;font-size: 14px { |
کد بالا را می توانید به وسیله LESS به صورت زیر بنویسید.
|
} header# ;color: #333 } navigation. ;font-size: 14px { |
استفاده از عملگر ها
یکی از قابلیت های جذاب LESS، انجام تمام عملیات اصلی ریاضی می باشد و طراحان می توانند نتیجه عملیات را در یک متغییر ذخیره کنند.
|
;base: 2cm * 3mm@ ;filler: @base * 2@ |
استفاده از توابع
یکی از قابلیت ها LESS که باعث راحت تر شدن کد نویسی Css می شود، قابلیت توابع می باشد. علاوه بر آن می توانید از توابع برای کاهش کد نویسی و انجام محاسبات نیز استفاده نمایید. less علاوه بر تابع موجود در کد نویسی زیر، دارای توابع دیگری نیز می باشد که می توانید با مراجعه به lesscss.org آن ها را مشاهده و از آن ها استفاده نمایید.
|
;width: 0.5@ } class. ;(width: percentage(@width { |
mixin ها
احتمالا در زمان هایی قرار گرفته اید که می خواستید کلاس های مختلفی را به تگ های خود اضافه نمایید. همانطور که می دانید این کار به طور عادی در Css سخت می باشد. شما با قابلیت Mixim می توانید این کار را به راحتی انجام دهید.
|
} border. ;border-top: 1px dotted #333 { } article.post ;background: #eee ;border. { } ul.menu ;background: #ccc ;border. } |
شما با sass می توانید کد بالا را به صورت زیر بنویسید.
|
} mixin border@ ;border-top: 1px dotted #333 { } article.post ;background: #eee ;include border@ { } ul.menu ;background: #ccc ;include border@ { |
چگونه LESS را نصب کنیم؟
برای اینکه بتوانید LESS را install نمایید، مراحل زیر را انجام دهید.
مرحله اول
دانلود فایل های مورد نیاز از سایت http://lesscss.org.
مرحله دوم
از فایل less.js یک کپی بگیرید و داخل پوشه سایت خود قرار دهید.
مرحله سوم
یک فایل ایجاد نمایید و استایل های خود را به صورت style.less بنویسید.
مرحله چهارم
کد زیر را در کد های HTML خود وارد نمایید.
|
<head> <link rel=”stylesheet/less” type=”text/css” href=”styles.less”> <script src=”less.js” type=”text/javascript”></script> </head> |
نحوه استفاده از Less
به دلیل اینکه مرورگر ها نمی توانند کد های LESS را درک کنند، طراح برای استفاده این کد ها باید یکی از این 2 روش زیر را انتخاب کند. شما با استفاده از این 2 روش می توانید کد های less را به کد های css تبدیل نمایید.
روش اول: استفاده از node.js
node.js محیطی برای اجرای کد های جاوا اسکریپت می باشد که برای اجراء کد های سمت سرور مورد استفاده قرار می گیرد. همانطور که می دانید، تنها کد های سمت کاربر بر روی مرورگر ها قابل مشاهده هستند و شما با node.js می توانید کد های سمت سرور خود را در مرورگر ها نمایش دهید. شما برای استفاده از این روش، باید کد های زیر را در node.js وارد نمایید.
|
npm install -g less lessc styles.less styles.css < |
روش دوم: کد نویسی در درون تگ <head></head>
برای استفاده از این روش، باید 2 خط کد نویسی زیر را در هدر قالب خود (درون تگ <head></head>) تایپ نمایید.
|
</ link rel=”stylesheet/less” type=”text/css” href=”styles.less” > <script src=”//cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js” > </script> |
برخی از امکانات فریمورک LESS
LESS دارای امکانات مختلفی می باشد که در این قسمت به معرفی آن ها می پردازیم.
- استفاده مجدد از مقادیر با استفاده از متغیر ها
- استفاده مجدد از بلاک ها با استفاده از mixins
- استایل های مختصر تر با استفاده از قوانین تو در تو
- انجام محاسبات با استفاده از توابع و عملگر ها
- و …
ویژگی های LESS
ویژگی های LESS شامل موارد زیر می باشند.
- برخورداری از کد های خوانا و سازماندهی شده و قابل درک
- قابلیت پشتیبانی از تمامی مرورگر ها
- نوشته شده در جاوا اسکریپت که موجب سرعت بالای پردازش نسبت به CSS میشود
- قابلیت ایجاد سبک های متفاوت با امکان استفاده مجدد
- قابلیت حل مسئله افزونگی کدها
- قابلیت مدیریت فایل های خارجی با استفاده از import@
- قابلیت ادغام چندین خصوصیت مانند (transform)، انتقال (transition) و جعبه سایه (box-shadow)
چرا LESS؟
شاید برای شما هم سوال باشد که چرا از LESS باید استفاده کنید. در این قسمت به موضوع چرا less می پردازیم و دلایل آن را برای شما معرفی می کنیم.
مزایای استفاده از LESS
- نگارش کد های CSS مشابه زبان های برنامه نویسی چون PHP
- بهبود نگارش CSS و استفاده بهینه از از CSS3
- قابلیت پیاده سازی در دو سمت سرور و کاربر
- تعریف متغیر ها همانند PHP و استفاده از آنها در سایر قسمت ها
- اجرای آسان عملیات بر روی متغیر ها
- افزایش سرعت کدنویسی به کمک mixin
- خوانایی و پیمایش بهتر دستورات تو در تو
- الحاق متن در هنگام ساختن فریم ورک ها
- نوشتن کد های CSS با قابلیت یک زبان برنامه نویسی
- اجرای استایل و کار بر روی متغیرها
- استفاده از برنامه نویسی برای ایجاد استایل ها
- استفاده از MIXIN (همانند توابع عمل می کنند)
Sass چیست؟
همانطور که در مقاله sass گفته شد، sass یکی از دیگر پیش پردازنده های Css می باشد. شما با استفاده از sass می توانید قدرت و ظرافت کد نویسی خود را بالا ببرید. این پیش پردازنده نیز به شما این امکان را می دهد تا از متغیر ها، قوانین توافقی، مخلوط ها، واردات درون خطی و غیره بیشتر استفاده نمایید. علاوه بر این Sass به شما در سازمان دهی استایل های بزرگ کمک بسیاری می کند.
انواع سینتکس در Sass
Sass دارای سینتکس های زیر می باشد.
- سینتکس (SCSS (Sassy Css
- سینتکس دندانه دار (همان Sass)
مزایای استفاده از SASS
می توانید مزایای Sass را در لیست زیر مشاهده نمایید.
- دارای قابلیت سازگاری و پشتیبانی از css
- استفاده از متغیر ها و بلاک های تو در تو
- استفاده از MIXIN ها
- دارای توابع متنوع و مفید برای تغییر رنگ و مقادیر
- دارای دستور العمل های کنترل برای کتابخانه ها
شباهت ها و تفاوت های بین LESS و SASS
شباهت های بین LESS و SASS
ویژگی هایی در LESS و SASS وجود دارند که باعث ایجاد شباهت های زیر در بین less و sass شده اند.
- کلاس ها (Class)
- پارامت رها
- قانون کلاس های تو در تو که باعث می شود از کد های تکراری جلوگیری شود
- توابعی که باعث می شود بتوانید از محاسبات ریاضی در CSS استفاده کنید
- توابعی برای رنگ‌ها که باعث می شود بهتر رنگ ها را انتخاب کنید
- قابلیتی که باعث می شود گروهی از استایل ها را فراخوانی کنید
- قابلیت scope که باعث می شود استایل های خود را به صورت local مدیریت کنید
- ارزیابی هایی از جاوا اسکریپت که باعث میشود آن را در طراحی سایت خود استفاده کنید.
تفاوت های بین LESS و SASS
علاوه بر شباهت هایی که در قسمت قبل بیان شد، less و sass دارای تفاوت هایی هستند که در این قسمت به آن ها پرداخته می شود.
- LESS یک library جاوا اسکریپت به حساب می آید
- SASS فقط بر روی Ruby اجرا می شود
- less ممکن است، کاربر جاوا اسکریپت را غیر فعال نماید
- sass چنین مشکلی را ندارد
بر طرف کردن مشکل غیر فعال کردن کاربر جاوا اسکریپت با راه حل های زیر
- از LESS تنها در زمان روند توسعه (Development) استفاده شود و پس از پایان کار خود آن را به صورت فایل CSS ذخیره نمایید.
- استفاده از برنامه LESS.app
سخن پایانییکی دیگر از پیش پردازنده های زبان CSS، پیش پردازنده LESS می باشد. Less همانند پیش پردازنده sass به شما در تقویت و سازماندهی کد های Css کمک بسیاری می کند. less دارای قابلیت ها، مزایا و امکانات مختلفی می باشد که هر آنچیز که لازم است در این مقاله برای شناخت و آگاهی شما از این موضوع بیان شده است. برای دریافت پاسخ سوالات خود و بهره مند شدن از تجربه اساتید خبره و دیگر دوستانتان در کمپین آموزشی بی لرن می توانید سوالات خود را در کافه گپ و گفت مطرح نمایید و در سریعترین زمان، پاسخ سوال خود را دریافت نمایید. همچنین می توانید با عضویت در کمپین آموزشی بی لرن، از دوره های آموزشی رایگان و کاربردی در زمینه های مختلف به صورت تخصصی و حرفه ای بهره مند شوید. با توجه به مسیر یادگیری در زمینه های مختلف می توانید برای شروع طراحی سایت و برنامه نویسی از آموزش html و css بهره مند شوید. |
دیدگاهتان را بنویسید