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

همه ما میدونیم که نوشتن کد های 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 وجود دارن که برای تغییر رنگ ، اندازه و دیگر اعمال انجام میشن که همه اونها رو از اینجا میتونید مشاهده کنید .