عنوان مقاله :

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

دسته بندی :
تاریخ انتشار : ۲۹ امرداد ۱۳۹۴
گردآوری و تالیف : حسام موسوی

کارمو با طراحی گرافیکی شروع کردم و حدود 2 سال طراحی گرافیکی میکردم بعد به طراحی وب علاقه پیدا کردم و همراه طراحی وب عاشق کدنویسی شدم به PHP | sass | css | Jquery | javaScript تسلط کامل دارم . در بین فریم ورک های PHP اول با CodeIgniter کار کردم اما به laravel علاقه مند شدم و دارم بطور حرفه ای دنبالش میکنم . امید من اینکه بتونم کاربرهای ایرانی رو به دنیای بیرون متصل کنم تا بتونن از فناوری های تازه آگاهی داشته باشن

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

دیدگاه های مخاطبین

ثبت دیدگاه شما
  • yahya

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

    • admin

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

  • حسین

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

  • علی اکبر رضایی

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

  • میثم

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

  • میعاد شاهرخی

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

  • محمد مهدی جهان‌آرا

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

    • admin

      مرسی ، همچنین

  • MohsenKasiri

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

  • حسین

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

    • admin

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

    • یحیی

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

    • admin

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

پیشنهاد میکنیم این مطالب رو هم مطالعه کنید :