1407

جزئیات وبلاگ

shape
shape
shape
shape
shape
shape
shape
1394/12/25 - مقالات

آموزش مقدماتی LESS

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

نحوه استفاده از LESS
شیوه های استفاده از LESS متفاوت است. برای مثال میتوان در سمت سرور یا کلاینت از آن استفاده کرد. اما ما میخواهیم ابتدا در localhost خودمان کدهای LESS را بنویسیم سپس توسط یک کامپایلر کدها را به CSS تبدیل کنیم و آنها را درون سرور قرار دهیم.
برای دانلود کامپایلر میتوان از نرم افزار های WinLess برای ویندوز و LESS.app برای مک استفاده کنید.
پس از نصب نرم افزار  پوشه ای که فایلهای HTML و CSS درون آن قرار دارد را درون نرم افزار مشخص میکنید. سپس درون پوشه دو فایل به نام style.less و style.css درست میکنید. و کدهای زیر را درون تگ head قرار میدهید:

1
2
<link href="style.less" rel="stylesheet" />
<link href="style.css" rel="stylesheet" />

سپس درون نرم افزار روی دکمه refresh کلیک میکنید تا فایل های ورودی (stlye.less) و خروجی (style.css) را شناسایی کند. حالا شما میتوانید کدهای LESS خود را درون فایل style.less بنویسید سپس کامپایلر آن را تبدیل به کد CSS میکند و درون فایل style.css مینویسد.

دستورات LESS
دلیل استفاده از LESS این است که زبان CSS را تبدیل به یک زبان برنامه نویسی میکند و میتوان به صورت ماژولار با آن کار کرد، و همچنین بیشتر در پروژه های بزرگ بازدهی بالایی دارد.

متغیرها
کد زیر را در نظر بگیرید:

1
2
3
4
5
6
7
8
9
10
.class1 {
  background-color: #2d5e8b;
}
.class2 {
  background-color: #fff;
  color: #2d5e8b;
}
.class3 {
  border: 1px solid #2d5e8b;
}

در این کد ما سه بار از رنگ 2d5e8b# استفاده کردیم، به جای اینکار میتوانید از یک متغیر استفاده کنیم. نحوه تعریف متغیر درون LESS به صورت زیر است که با @ شروع میشود:


2
3
4
5
6
7
8
9
10
11
12
@color-base: #2d5e8b;
 
.class1 {
  background-color: @color-base;
}
.class2 {
  background-color: #fff;
  color: @color-base;
}
.class3 {
  border: 1px solid @color-base;
}

این فقط یک مثال بود. شما میتوانید قسمت های مهم استایل را درون متغیرها و در ابتدای صفحه تعریف کنید و هر زمان که نیاز به تغییر بود میتوانید به راحتی تغییرات را اعمال کنید.
ترکیب کردن
اگر قبلا برنامه نویسی کرده باشید، حتما توابع را به خاطر دارید. ما زمانی که یک عمل را چندین بار تکرار میکنیم، از توابع استفاده میکنیم، و آن کد را فقط یک بار مینویسیم و چندین بار فراخوانی میکنیم.
همین کار را هم میتوانیم در LESS انجام دهیم. برای مثال در کد زیر ابتدا ما کد border-radius را که به صورت متناوب از آن استفاده میکنیم را درون یک کلاس فرضی مینویسیم. سپس هر زمان که خواستیم از آن کد استفاده کنیم فقط نام آن کلاس را مینویسیم.

1
2
3
4
5
6
7
8
9
10
.border-radius{
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.wr{
  .border-radius;
  width: 400px;
  height: 500px;
}

خروجی به صورت زیر میشود:

?
1
2
3
4
5
6
7
8
9
10
11
12
.border-radius {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.wr {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  width: 400px;
  height: 500px;
}

اما اگر بخواهیم به جای مقدار 5px از مقدار دیگری استفاده کنیم کلاس border-radius دیگر کاربردی ندارد. مگر اینکه ما برای کلاسborder-radius یک آرگومان قرار دهیم که در آن مقدار border-radius را دریافت کنیم. مانند کد زیر:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.border-radius (@radius: 5px){
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}
.wr{
  .border-radius(10px);
  width: 400px;
  height: 500px;
}
.nav{
  .border-radius(2px);
  background: red;
}

خروجی به صورت زیر میشود:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
.wr {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  width: 400px;
  height: 500px;
}
.nav {
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  background: red;
}

همانطور که دیدید در واقع ما یک تابع با یک آرگومان ساختیم. شما میتوانید تمام توابع مورد نیاز خودتان را به ندرت در یک فایل ذخیره کنید، به این صورت کار شما خیلی ساده میشود. برای مثال من توابعی که تا به حال نوشتم را درون فایل funcs.less قرار دادم. خب فقط کافیست آن را ابتدا import کنم. سپس به راحتی میتوانم از توابع نوشته شده استفاده کنم.

?
1
2
3
4
5
6
7
8
9
10
11
@import "funcs.less";
 
.wr{
  .border-radius(10px);
  width: 400px;
  height: 500px;
}
.nav{
  .border-radius(2px);
  background: red;
}

کدنویسی تو در تو

برای فهم کدنویسی تو در تو کد زیر را در نظر بگیرید:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
header {
  background: #222;
  font-size: 14px;
}
header nav{
  font-size: 27px;
}
header .logo{
  width: 45px;
  height: 45px;
}
header .logo:hover{
  opacity: 0;
}

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
header{
  background: #222;
  font-size: 14px;
  nav {
    font-size: 27px;
  }
  .logo {
    width: 45px;
    height: 45px;
    &:hover {
      opacity: 0;
    }
  }
}

در کد بالا شما میتوانید تابعی cross-browser برای خاصیت opacity بسازید سپس آن را فراخوانی کنید.

نتیجه گیری

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

شما میتوانید امکانات دیگری که LESS در اختیار شما میگذارد را درون سایت lesscss.org مشاهده کنید.

آموزش مقدماتی LESS