آشنایی با ‌LESS

inroduction-to-less-css

امروزه با وجود اینکه CSS به صورت ساده و بدون وضعیت است ولی اونو دوست داریم اما ابزارهای هستند که باعث میشن اونو بیشتر دوست داشته باشیم یکی از اون ابزارها LESS است که امکاناتی رو بوجود میاره که بتونیم هر کار سختی رو به آسانی و با سرعت انجام بدیم.

LESS چیست؟

LESS یک ابزار کوچک است که قابلیت‌های همچون متغیرها ، عملگرها ، Mixin ها و دستورات تودرتو را برای CSS فراهم می‌کند به این معنی که می توانید کدهای CSS رو بسیار شبیه به زبان های همچون PHP بنویسید.

LESS دارای دو نوع پیاده سازی است:

  1. سمت سرور
  2. سمت کاربر

پیاده سازی سمت سرور بوسیله Node.js انجام شده است و پیاده سازی سمت کاربر بوسیله جاوا اسکریپت انجام شده که ما در اینجا نحوه استفاده از پیاده سازی سمت کاربر را بررسی میکنیم.

نحوه استفاده از LESS.js

برخلاف پیاده سازی سمت سرور استفاده از پیاده سازی سمت کاربر بسیار آسان است تنها کافی است که فایل جاوا اسکریپت و فایل استایل مخصوص را به صفحه HTML بیفزایید ، یعنی دو خط زیر:

<script type="text/javascript" src="http://lesscss.googlecode.com/files/less-1.0.21.min.js"></script>
<link rel="stylesheet" href="style.less" title="main style" type="text/less">

باید در هنگام ارتباط دادن فایل استایل به این نکته توجه داشته باشید که در اینجا به جای استفاده از rel="stylesheet/css"‎می بایست از rel="stylesheet/less"‎ استفاده کنید همچنین حتما باید لینک معرفی فایل استایل قبل از معرفی فایل اسکریپت LESS آمده باشد.

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

قابلیت های کلیدی LESS

در اینجا به شیرین ترین قسمت رسیده‌ایم یعنی نوشتن کدهای LESS. در ادامه خواهید دید که کدهای LESS در عین قدرت زیاد بسیار آسان و ساده است. همانطور که پیش تر به آن اشاره کردیم LESS به طور کلی دارای ویژگی های کلیدی زیر است.

  • متغیرها – Variables
  • عملگرها – Operators
  • میکسین ها – Mixins
  • دستورات تو در تو – Nested Rules
  • توابع – Functions
  • الحاق متن
  • و…!

در ادامه به بررسی نحوه و قوانین استفاده از هر یک از این ویزگی ها می پردازیم.

متغیرها

متغیرها در LESS همانند متغیرها در PHP هستند. آنها را در یکجا تعریف و مقداری را برایشان تنظیم میکنیم سپس آنها را در قسمت های دیگر استفاده میکنیم. برای مثال من قبل از آشنایی با LESS برای اینکه مقدار رنگها را به خاطر داشته باشم و در صورت فراموشی هر بار به فایل طراحی مراجعه نکنم آنها را به صورت زیر در بالای فایل استایل به صورت کامنت قرار می دادم.

/*
   main-color : #156DB3 - main color for highlight
   text-color : #444444
   ...
*/

H1,H2,H3,H4,H5,H6 {
   color: #156DB3
}

p {
   color: #444444
}

به کد CSS بالا دقت کنید در آن کد می بایست مقدار رنگ را به خاطر داشته باشیم و همچنین برای تغییر مقدار رنگ می بایست مقدار آن را به صورت دستی در تمامی دستورات CSS تغییر دهیم در صورتی که بوسیله متغیرها در LESS می توان آن‌ها را در یک متغیر قرار داد و آن متغیر را در کل فایل استایل استفاده کرد و برای تغییر رنگ تنها مقدار آن متغیر را تغییر داد.

@main-color : #156DB3; /* main color for highlight */
@text-color : #444444;

H1,H2,H3,H4,H5,H6 {
   color: @main-color
}

p {
   color: @text-color
}

محدوده متغیرها

محدوده متغیر به مکان های که می توان به متغیر دسترسی داشت و از آن استفاده کرد اشاره می کند. اگر شما متغیری را در بالای فایل LESS خود تعریف بکنید آنگاه در تمام فایل LESS می توانید به آن دسترسی داشته باشید.

محدوده متغیرها در LESS همانند محدوده متغیر های PHP است پس شما می توانید در هر جایی از کد متغیر تعریف کنید به عنوان مثال می توان در درون یک دستور یک متغیر تعریف کرد.

a {
    @color: #ffffff;
    color:@color;
}

در مثال بالا متغیر color تعریف شده در دستور مقدار دهی می گردد اما توجه داشته باشید که اگر از متغیری استفاده کنید که قبلا آن را تعریف نکرده اید LESS به شما هیچ اخطاری و پیامی را اعلان نمی کند.

@color: #000000;
a {
    @color: #ffffff;
    color:@color;
}
button {
    background: @color;
}

در مثال قبل دو تعریف برای متغیر color وجود دارد یکی بیرون از دستور و محدوده و دیگری در درون محدوده یک دستور a در این شرایط LESS از داخلی ترین تعریف برای متغیر color استفاده می کند یعنی مقدار خصوصیت color مربوط به گزینشگر a با سفید مقدار دهی می شود و مقدار خصوصیت color مربوط به دستور button با سیاه مقدار دهی می گردد.

عملگر ها

همانند زبان های دیگر LESS به شما قابلیت انجام عملیات بر روی متغیرها را فراهم می کند. به عنوان مثال می توان ارتفاع یک جعبه را در داخل یک متغیر قرار داد و به راحتی دو برابر مقدار آن را برای خصوصیت دیگری تخصیص داد.

@boxheight:150px;

.box1 {
	height:@boxheight * 2;
}

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

دستورات تو در تو

یکی از ویژگی های مهم CSS را می توان نوشتن دستورات آن را به صورت آبشاری دانست که باعث معروفیت و هم چنین استفاده آسان از آن می شود.

article.post p{
    margin: 0 12px 0 0;
}

استفاده از قابلیت آبشاری CSS آسان است و تنها می بایست گزینشگرهای خود را در به درستی استفاده کنید تا به نتیجه دلخواه برسید اما مشکلی که در این قابلیت وجود دارد نوشتن و خوانایی سخت آن است مثلا اگر بخواهید در مثال بالا بخواهید برای برچسب های ul و img استایل دیگری را تعریف کنید آنگاه در قسمت گزینشگر دستور هر کدام می بایست article.post را دوباره بنویسید.

article.post p{
    margin: 0 12px 0 0;
}
article.post ul{
    margin: 0 24px 0 0;
}
article.post img{
    border : 1px solid #000000;
}

اما در LESS نیازی به اینکار نیست و می توانید دستورات را در درون یکدیگر به صورت تودرتو استفاده کنید.

article.post{
    p {
        margin: 0 12px 0 0;
    }
    ul {
        margin: 0 24px 0 0;
    }
    img{
        border : 1px solid #000000;
    }
}

در مثال بالا جادوی LESS را دیدید!  برای استفاده از ویژگی تودرتو در LESS نیازی به استفاده فضای خالی در برای دستورات داخلی نیست اما ما از آن برای خوانایی بهتر استفاده کرده‌ایم.

mixin ها

میکسین قابلیتی را فراهم تا بتوان تمام خصوصیات یک کلاس را برای کلاس دیگری نیز استفاده کرد. میکسین‌ها سرعت کد نویسی شما را افزایش می دهند و شما را از شر پیچیدگی کد ها رهایی می بخشند. میکسین بسیار شبیه به تابع است با این تفاوت که میکسین یک مقدار خاص بر نمی گرداند بلکه تمامی خصوصیت و کدهای درون خودش را در مکانی که از آن استفاده شده قرار می دهد.

.rounded-corners(){
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
}
#box {
   .rounded-corners;
}

در مثال بالا یک میکسین با نام rounded-corners تعریف نموده‌ایم که خصوصیات مربوط به گوشه های گرد را به دستوری که از آن استفاده می کند اضافه می کند یعنی کد بالا به کد زیر تبدیل می گردد.

#box {
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
}

میکسین با آرگومان ورودی

میکسین های دارای آرگومان ورودی کمی پیچیده به نظر می رسند اما بسیار کارآمد و البته ساده هستند. از آرگومان های ورودی هر میکسین می توان در خصوصیات داخلی میکسین استفاده نمود و در وقت صرفه جویی کرد. توجه داشته باشید که در تعداد آرگومان های ورودی برای هر میکسین هیچ محدودیتی وجود ندارد و می بایت آرگومان ها را با ویرگول لاتین ( , ) از یکدیگر جدا کنید.

.rounded-corners(@radius){
   border-radius: @radius;
   -moz-border-radius: @radius;
   -webkit-border-radius: @radius;
}
#box {
   .rounded-corners(5px)
}

در مثال بالا میکسینrounded-corners را کمی توسعه دادیم و بوسیله یک آرگومان ورودی مقدار گوشه های گرد را سفارشی کردیم و در هنگام استفاده کافی است یک مقدار به این میکسین بدهیم تا خصوصیات سفارشی را تولید کند. در مثال زیر چندین آرگومان را برای مقدار هر یک از گوشه ها تعریف نموده ایم.

.rounded-corners(@top , @right , @bottom , @left){
   border-radius: @top @right @bottom @left;
   -moz-border-radius: @top @right @bottom @left;
   -webkit-border-radius: @top @right @bottom @left;
}
#box {
   .rounded-corners(5,3,5,3)
}

استفاده یکجا از تمامی آرگومان ها

در مثال بالا نحوه استفاده از چندین آرگومان برای میکسین را آموختیم حال ترفندی را یاد می گیرید تا از مقدار های این آرگومان ها به صورت یکجا استفاده کنید.

.rounded-corners(@top , @right , @bottom , @left){
   border-radius: @arguments;
   -moz-border-radius: @arguments;
   -webkit-border-radius: @arguments;
}
#box {
   .rounded-corners(5,3,5,3)
}

همانطور که دیدarguments یک کلمه کلیدی است که مقدارهای آرگومان های ورودی هر میکسین را به ترتیب ورودی در مکان مورد استفاده قرار می‌دهد. پس کد بالا به کد زیر تبدیل می گردد.

#box {
   border-radius: 5px 3px 5px 3px;
   -moz-border-radius: 5px 3px 5px 3px;
   -webkit-border-radius: 5px 3px 5px 3px;
}

مقدار پیش فرض برای آرگومان‌ها

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

.rounded-corners(@top:5px , @right:5px , @bottom:5px , @left:5px){
   border-radius: @arguments;
   -moz-border-radius: @arguments;
   -webkit-border-radius: @arguments;
}
#box {
   .rounded-corners();
}
#box2 {
   .rounded-corners(2px,4px,2px,4px);
}

در مثال بالا برای دستور box گوشه های گرد با مقدار های پیش فرض یعنی ۵px ساخته می شود اما برای دستور box2 مقدار های سفارشی یعنی ۲px 4px 2px 4px تعیین می گردد.

فضاهای نام

فضاهای نام در برنامه نویسی برای بسته بندی یکسری از قابلیت ها با یکدیگر و استفاده آسانتر از آن بسته ها استفاده می شوند ما در LESS می توانیم بوسیله فضاهای نام و میکسین ها همان قابلیت ها را ایجاد کنیم.

#bundle {
	.button () {
		display: block;
		border: 1px solid black;
		background-color: grey;
	}
	.tab { ... }
	.citation { ... }
}

در کد بالا ما یک فضای نام ایجاد کردیم که حاوی تعدادی میکسین بود حال می توانیم از میکسین های این فضای نام در کد های خودمون استفاده کنیم. در کد زیر ما از میکسین button برای برچسب a استفاده کرده ایم.

a {
	color: orange;
	#bundle > .button;
}

شما می توانید بوسیله فضاهای نام و میکسین ها برای خود یک فریم ورک بسازید و از آن در پروژه‌های خود استفاده کنید بدین صورت در وقت خود بسیار صرفه جویی می‌کنید ولی می تونید پا رو از این هم فراتر بگذارید و فریم ورک خود رو به صورت کد باز منتشر کنید و همچنین از فریم‌ورک های دیگران استفاده کنید دست به کار شوید همین الان!.

الحاق متن

الحاق متن در اینجا یعنی مقدار دهی یک متن و استفاده از آن برای مقدار خصوصیات.

	@base-url: "http://web.irtuts.com";
	#header {
		background-image: url("@{base-url}/images/bg.png");
	}

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

وارد یا import کردن استایل

همانند CSS معمولی شما می توانید استایل های رو به استایل خودتون import کنید. برای این کار در LESS می تونید از سه نوع نوشتار زیر استفاده کنید.

@import "reset.css";
@import "framework.less";
@import "widgets";

نمونه اول ازimportتنها فایل استایل را به داخل استایل وارد می کند و هیچ کارپردازشی بر روی فایل انجام نمی دهد.

در نمونه دوم فایل LESS پردازش شده و سپس به استایل وارد می شود.

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

LESS تنها همین قابلیت ها رو داره!؟

اگر با این سوال روبه رو شدید نشون دهنده اینه که ذهن فعالی دارید و اگر نه نشون دهنده اینه که این مطلبو خوب نخوندید پس برگردید و از اول بخونید.

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

کامپایل کردن LESS

میدونم الان دارید به این فکر می‌کنید که همه اینها درست و واقعا قابلیت های خوبی داره این LESS اما آیا واقعا می تونم از اون تو پروژه‌هام استفاده کنم؟ آیا سرعت بارگذاری صفحات رو پایین نمیاره؟ چه مرورگرهای ازش پشتیبانی میکنند؟ اما باید بدونید که این سوالات و سوالات شبیه اونا هیچ اهمیتی برای شما ندارند!. ایده بوجود آمدن LESS تنها سرعت بخشیدن به مرحله توسعه است و در پایان پروژه شما فابل CSS را به سایت اضافه می‌کنید.

تنها کافی است که در پایان پروژه فایل LESS خود را بوسیله یک مرورگر و یا ابزارهای خاصی که به همین دلیل بوجود آمده کامپایل کرده و سپس کد فایل CSS پایانی در مرورگر را با فایل LESS جایگزین کرده و سپس فایل جاوا اسکریپت LESS را حذف و خصوصیت rel="stylesheet/less"‎ را در معرفی فایل استایل به rel="stylesheet/css"‎ تغییر دهید حالا همه چیز آمادست.

نتیجه گیری

به طور خلاصه LESS الان میتونه با اضافه کردن دو خط کد به فایل HTML کلا راه و روش نوشتن CSS و توسعه سایت‌هاتون رو تغییر بده. شما با LESS می تونید متغیر تعریف کنید، از عملگرها بر روی متغیرها استفاده کنید، کد های تودرتو بنویسید، و از میکسین هاش برای لذت بردن از CSS3 استفاده کنید.

منابع: lesscss.org و designshacke

برای ما دیدگاه خودتون رو در مورد LESS بنویسید. آیا LESS یه ابزار خیلی خوبه که میتونه روند توسعه سایت ها رو سریعتر کنه یا اینکه نه ما وقتتون رو هدر دادیم!!؟ ، ما می خوایم بدونیم.

دیدگاه کاربران

  1. داوود در

    ممنون از مقاله خوبتون.
    سوالی که برای من مطرح شده این هست که چطور با این همه قابلیت مفید در css3 همچین امکاناتی رو فراهم نکردن!!!

  2. Pingback: طراحی سایت ایران فردامرجع اصلی و مستندات یادگیری LESS برای فارسی زبانان » طراحی سایت ایران فردا

  3. حاتم در

    سلام
    با تشکر
    خیلی ساده و جامع توضیح دادید

  4. فرزاد در

    خیلی واضح و عالی بود, چندتا وبسایت آموزشی و یوتیوب رو دیدم, تازه با این مطلب متوجه شدم قضیه چیه!
    ممنون

  5. anafasama در

    باسلام و تشکر
    خیلی عالی توضیح داده بودید فقط آخرش برام نامفهوم بود که چرا باید دوباره less رو به css تبدیل کرد؟!

دیدگاه خود را بنوبسید