عنوان مقاله :

آموزش less در 10 دقیقه

گردآوری و تالیف : حسام موسوی
تاریخ انتشار : 29 مرداد 1394
دسته بندی ها : css

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

خوشبختانه، جامعه توسعه وب این مشکل رو حل کرده . ما در حال حاضر زبان های پیش پردازنده زیادی از جمله sass ، less و Stylus داریم . همه اونها دارایی مزایای خیلی بیشتری نسبت به css هستند . مانند : 

متغیرها ، به طوری که شما در یک جا میتونید متغیری تعریف کنید و در جاهای مختلف قرار بدید و در صورت لزوم فقط در یک جا اونو تغییر بدید تا در سرتاسر کد هاتون تغییر پیدا کنه . ( در واقع این ویژگی در نسخه جدید css اضافه خواهد شد )

محاسبات پویا 

mixin ها ، که شما را قادر به استفاده مجدد از کد ها و همینطور سبک های ترکیبی از mixin ها می کند و حتی قادر به گرفتن پارمتر نیز است . 

Functions ها ، که قطعا شما با کارایی توابع در زبان های مختلف آگاه هستید و میدونید قادر به انجام چه کارهای هستند .

و در نهایت جنبه منفی استفاده از یکی از این زبان های پیش پردازنده این است که شما نیاز به کامپایل کردن کدهاتون دارید تا کدهاتون به css تبدیل بشن در غیر اینصورت قادر به نمایش در مروگر ها نیستند .

1. شروع

less با جاوا اسکریپت نوشته شده است برای همین برای اجرا باید یا از نود جی اس استفاده کنید یا از مرورگر . شما می توانید از فایل less.js در وبسایتتون استفاده کنید تا فایل های با پسوند .less رو بصورت real-time کامپایل کنند اما بدلیل آهسته بودن ، این روند اصلا توصیه نمیشه چون مرورگر ها فایل های css رو فقط میشناسن . بجاش کاری که پیشنهاد میشه کامپایل کردن فایل .less در سیستم خودتون و اضافه کردن فایل css به مرورگرتونه که خیلی بهتر از روش اوله . برنامه های زیادی برای کامپایل فایل less وجود داره اما ما از Node.js استفاده میکنیم 

نصب نود جی اس خیلی راحته و اگر شما اونو در سیستمتون نصب کردید به راحتی با دستور npm در ترمنال سیستمتون میتونید less رو به سیستم اضافه کنید . به صورت زیر : 

npm install -g less

بعد از اینکار شما با دستور lessc در ترمینال می تونید فایل های .less رو کامپایل و به فایل های css تبدیل کنید . بصورت زیر 

lessc styles.less > styles.css

در کد بالا تمام کد هامون در فایل styles.less نوشته میشه و با اجرا کردن این دستور کدهامون کامپایل شده و به فایل styles.css منتقل میشه و شما میتونید به راحتی از فایل css در اسناد html خودتون استفاده کنید . 

2. متغیرها 

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

@background-color: #ffffff;
@text-color: #1A237E;

p{
  background-color: @background-color;
  color: @text-color;
  padding: 15px;
}

ul{
  background-color: @background-color;
}

li{
  color: @text-color;
}

و زمانی که کامپایل بشن و به کد های css تبدیل بشن بصورت زیر در میان

p{
  background-color: #ffffff;
  color: #1A237E;
  padding: 15px;
}

ul{
  background-color: #ffffff;
}

li{
  color: #1A237E;
}

در مثال بالا ، رنگ پس زمینه سفید و رنگ متن سیاه است و اجازه بدید که بهتون بگم که اگر شما زمانی بخواین رنگ اونها رو تغییر بدید به راحتی با تغییر دادن کد رنگ در متغیر میتواید رنگ ها در جاهای مختلف رو تغییر بدید بجای اینکه کدهای رنگ رو در هر جای که بود جایگزین کنید . 

برای توضیحات بیشتر میتونید به اسناد less مراجعه کنید .

3. Mixins

less ما رو قادر به استفاده مجدد از یک کلاس یا شناساسه بطور مستقیم در کلاس دیگر میکند بطوری که شما میتونید همه خصوصیات یک کلاس رو در کلاس دیگه داشته باشید . برای بهتر فهمیدن این موضوع به مثال های زیر دقت کنید .

#circle{
  background-color: #4CAF50;
  border-radius: 100%;
}

#small-circle{
  width: 50px;
  height: 50px;
  #circle
}

#big-circle{
  width: 100px;
  height: 100px;
  #circle
}

زمانی که به css کامپایل بشه بصورت زیر در میاد

#circle {
  background-color: #4CAF50;
  border-radius: 100%;
}
#small-circle {
  width: 50px;
  height: 50px;
  background-color: #4CAF50;
  border-radius: 100%;
}
#big-circle {
  width: 100px;
  height: 100px;
  background-color: #4CAF50;
  border-radius: 100%;
}

اگر شما نمیخواید که mixin ها بصورت یک قانون در css بشن میتونید از پرنتز باز و بسته برای mixin ها بصورت زیر استفاده کنید .

#circle(){
  background-color: #4CAF50;
  border-radius: 100%;
}

#small-circle{
  width: 50px;
  height: 50px;
  #circle
}

#big-circle{
  width: 100px;
  height: 100px;
  #circle
}

زمانی که به css کامپایل بشه بصورت زیر در میاد

#small-circle {
  width: 50px;
  height: 50px;
  background-color: #4CAF50;
  border-radius: 100%;
}
#big-circle {
  width: 100px;
  height: 100px;
  background-color: #4CAF50;
  border-radius: 100%;
}

نکته جالب دیگه که شما میتونید در Mixin ها انجام بدید دادن پارامتر به mixin هاست ، در مثال زیر یک آرگومان برای طول و عرض با اندازه پیش فرض 25px رو میتونید مشاهده کنید .

#circle(@size: 25px){
  background-color: #4CAF50;
  border-radius: 100%;

  width: @size;
  height: @size;
}

#small-circle{
  #circle
}

#big-circle{
  #circle(100px)
}

که زمانی که کامپایل و به کد css تبدیل بشن به شکل زیر در میان

#small-circle {
  background-color: #4CAF50;
  border-radius: 100%;
  width: 25px;
  height: 25px;
}
#big-circle {
  background-color: #4CAF50;
  border-radius: 100%;
  width: 100px;
  height: 100px;
}

4. Nesting و Scope

با استفاده از nesting شما می توانید شیوه نامه خود را بصورت تو در تو بنویسید تا قابل فهم تر شود و همینطور این باعث کاهش احتمال درگیری با عناصر دیگه میشود . در اینجا یک مثال از المنت ul و فرزندش یعنی li میزنیم تا شما به راحتی بتونین مفهموم nesting رو درک کنید .

ul{
  background-color: #03A9F4;
  padding: 10px;
  list-style: none;

  li{
    background-color: #fff;
    border-radius: 3px;
    margin: 10px 0;
  }
}

بعد از کامپایل کد css بصورت زیر ظاهر میشود 

ul {
  background-color: #03A9F4;
  padding: 10px;
  list-style: none;
}
ul li {
  background-color: #fff;
  border-radius: 3px;
  margin: 10px 0;
}

من زبان های برنامه نویسی رو دوست دارم ، در less هم شما با تعریف متغیر می تونید در داخل nesting دوباره اون متغیر رو پارامتر دهی کنید و در زیر شاخه اش استفاده کنید و زمانی که دیگر در جای متغیر دارای ارزشی نبود به پدر های خودش مراجعه میکنه تا به یک متغیری مثل خودش برسه که دارای پارامتر باشه و همونو برای خودش انتخاب میکنه . مثال زیر رو ببنید.

@text-color: #000000;

ul{
  @text-color: #fff;
  background-color: #03A9F4;
  padding: 10px;
  list-style: none;

  li{
    color: @text-color;
    border-radius: 3px;
    margin: 10px 0;
  }
}

زنمانی که به css تبدیلش کنیم در داخل li دیگه از @text-color که در بیرون تعریف کردیم استفاده نمیکنه بلکه میاد از @text-color که در داخل ul تعریف شده استفاده میکنه ، بصورت زیر

ul {
  background-color: #03A9F4;
  padding: 10px;
  list-style: none;
}
ul li {
  color: #ffffff;
  border-radius: 3px;
  margin: 10px 0;
}

اسناد بیشتر در مورد scope در اینجا

5. عملیات

شما می توانید عملیات ریاضی پایه به مقادیر عددی و رنگ انجام دهید . در مثال زیر شما مشاهده میکنید که متغیر های پیشفرضی که تعریف کردیم با عملیات ریاضی ضرب و کم میشن به راحتی 

@div-width: 100px;
@color: #03A9F4;

div{
  height: 50px;
  display: inline-block;
}

#left{
  width: @div-width;
  background-color: @color - 100;
}

#right{
  width: @div-width * 2;
  background-color: @color;
}

و بعد از ترجمه css 

div {
  height: 50px;
  display: inline-block;
}
#left {
  width: 100px;
  background-color: #004590;
}
#right {
  width: 200px;
  background-color: #03a9f4;
}

6. Functions

less هم شامل توابع میشود . برای همین در نگاه اول شما به راحتی فکر میکنید که اون یک زبان برنامه نویسی است ؟ درسته ؟ 

اجازه بدید یک نگاه ساده به توابع در less بندازیم در زیر یک تابع ساده برای کاهش شفافیت استفاده میکنیم 

@var: #004590;

div{
  height: 50px;
  width: 50px;
  background-color: @var;

  &:hover{
    background-color: fadeout(@var, 50%)
  }
}

بعد از کامپایل کد css به صورت زیر در میاد

div {
  height: 50px;
  width: 50px;
  background-color: #004590;
}
div:hover {
  background-color: rgba(0, 69, 144, 0.5);
}

در مثال بالا زمانی که ما موس خود را روی div ببریم 50% از شفافیت رنگ بکگراند اصلی کم میشه . تعداد خیلی زیادی از توابع در less وجود دارن که برای تغییر رنگ ، اندازه و دیگر اعمال انجام میشن که همه اونها رو از اینجا میتونید مشاهده کنید . 

مقالات پیشنهادی

استایل آماده برای ویرایشگر متن wysiwyg

زمانی که شما از ویرایشگر wysiwyg در وبسایت های خودتان استفاده میکنید و یک سری متون را در دیتابیس ذخیره و در صفحه اصلی وبسایتان نمایش میدهید ، متوجه ای...

Gridder یک سیستم Grid بر اساس Flexbox

Gridder یک سیستم ساده Grid است که بر اساس Flexbox طراحی شده و به شما کمک میکنه تا layout بندی های خودتون رو بر اساس Flexbox طراحی کنید . این ابزار دار...

افکت های دوست داشتی Hover برای css

Imagehover.css یک کتابخانه دوست داشتی css است که دارای تعدادی زیادی از افکت های hover می باشد . این کتابخانه بسیار سبک و مقیاس پذیر است و دارای چیزی د...

مقایسه bootstrap با Material Design Lite

از اونجا که گوگل اعلام کرد که به همراه اندروید 5.0 متد جدید طراحی یعنی متیرال هم ارائه میشه ، تعداد زیادی فریمورک های front با هدف آوردن مفهوم این مت...

دیدگاه های ارزشمند شما

Sina | 5 ماه پیش

ترجمه جالبی بود!

yahya | 8 ماه پیش

با سلام و خسته نباشید.
خیلی ممنون
فقط اگر امکانش هست اجرای less در html را نیز بگذارید.

admin | 8 ماه پیش

فایل less رو نمی تونید بصورت مستقیم در Html استفاده کنید بعد از نوشتن باید کامپایل بشه و به css تبدیل بشه بعد از فایل css میتونید در html استفاده کنید
http://lesscss.org/usage/

حسین | 1 سال پیش

بسیار عالی ، مختصر و مفید !
مرسی

علی اکبر رضایی | 2 سال پیش

تشکر فراوان به خاطر مطلب آموزشی در مورد less امیدوارم همیشه موفق و پیروز باشید.

میثم | 2 سال پیش

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

میعاد شاهرخی | 2 سال پیش

بسیار ممنون واقعا خلاصه و مفید رسالت less رو آموزش دادید

محمد مهدی جهان‌آرا | 2 سال پیش

واقعا کارتون عالیه.
بهتون تبریک میگم.
ممنون، موفق‌باشید.

admin | 2 سال پیش

مرسی ، همچنین

MohsenKasiri | 2 سال پیش

ممنون خیلی خوب بود .

حسین | 2 سال پیش

خیلی عالی بود
واقعا خلاصه و کامل
باریکلا و ممنون

admin | 8 ماه پیش

چنین کاری باعث افت سرعت سایتون میشه چون باید فایل less به فایل css کامپایل بشه و css اجرا بشه پس بهتره تو لوکال خودتون بعد از اتمام کد نویسی less اونو کامپایل کنید به css
روش درست این کاره نه اینکه فایل less رو بزارید رو سایتتون

یحیی | 8 ماه پیش

باید فایل دیگری به اسم less.js دانلود کرد و لینک و script را در html تعریف کرد اما جوابی نگرفتم.

admin | 2 سال پیش

خواهش میکنم امیدوارم مورد استفاده اتون قرار گرفته باشه