تکنولوژی { less}

Less چیست؟

Less در معنی به معنای “کمتر” است و تکنولوژی است که با آن می توان کدهای css را به صورت داینامیک و تابعی تولید کرد در واقع یک پیش پردازنده سی اس اس است و می توان آن را هم  در سمت سرور و هم در سمت کلاینت (کاربر) می توان آن را اجرا کرد.

این تکنولوژی توسط الکسیس سیلیر (Alexis Sellier) در سال ۲۰۰۹طراحی شده است. و اولین بار توسط زبان برنامه نویسی روبی (ruby) به کار گرفته شد. اما بعدها آن را تغییر داده و با کد های جاوا اسکریپت اجرا کردن به همین دلیل آن را به عنوان کتابخانه جاوا اسکریپت می شناسند.

رقیب LESS برنامه نویسی SASS است اما SASS سمت سرور اجرا می شود و کامپایل آن در سمت سرور است اما LESS فرقی ندارد  طراحی سایت به خاطر هسته جاوا اسکریپتی که دارد.

کدهای LESS با کل مرورگرها سازگار است .

نوشتن کدهای less تقریباً شبیه کدهای php است.

یک قابلیت چالب در less وجود دارد به نام maxin ها که تقریبا می توان گفت عملکردی شبیه کلاس ها ی سازنده در زبان های شیءگرایی دارد یعنی می توان به متغییر یک id یا class را انتصاب داد و از این به بعد هر کجا از این متغییر استفاده کنیم کل خصوصیت های داخل آن کلاس به آن قسمت نیز اضافه می شود (شبیه سازنده ها در زبان شی گرایی).

less

مثلا به جای کد css زیر:

#header {

  color: #4D926F;

}

h2 {

  color: #4D926F;

}

می توان آن را در less به صورت زیر نوشت :

@pale-green-color: #4D926F;

#header {

  color: @pale-green-color;

}

h2 {

  color: @pale-green-color;

}

اگر به مثال بالا توجه کنید، می بینید که رنگی که قرار است به عناصر داخل صفحه داده شود تک و احتمال اشتباه در آن زیاد و در سایت  های بزرگ زمان گیر است اما در less ما برای رنگ مورد نظر را در داخل یک متغییر به نام (@pale-green-color) قرار داده ایم و هرجا خواستیم آن را به کار می بریم و اگر بعدا خواستیم رنگ مورد نظر را تغییر دهیم به راحتی کد رنگی که به متغییر انتصاب داده ایم را تغییر داده، این کار باعث می شود خیلی مدیریت روی کدهای css راحت تر و زودتر و کم اشتباه تر انجام شود.

  طراحی سایت داینامیک جای طراحی سایت استاتیک را گرفت

مثال دوم:

به کد css زیر توجه کنید:

#header {

  -webkit-border-radius: 5px 10px 8px 2px;

  -moz-border-radius: 5px 10px 8px 2px;

  border-radius: 5px 10px 8px 2px;}

#footer {

  -webkit-border-radius: 10px 25px 35px 0px;

  -moz-border-radius: 10px 25px 35px 0px;

  border-radius: 10px 25px 35px 0px;}

حالا بریم ببینم درless  با یک تابع ساده چقدر کار راحت و کدها کمتر شده:

.rounded-corners (@radius: 5px 10px 8px 2px) {

-webkit-border-radius: @radius;

  -moz-border-radius: @radius;

  border-radius: @radius;}

#header {

  .rounded-corners;}

#footer {

  .rounded-corners(10px 25px 35px 0px);}

در کد بالا به جای تکرار کردن چندین این کد (5px 10px 8px 2px;)، به راحت بایک تابع ساده و یک پارامتر

.rounded-corners (@radius: 5px 10px 8px 2px) آن را ساده و کنترل روی کد را راحت تر کرده ایم

مثال سوم:

کدهای css زیر را در نظر بگیرید:

.a{

Color :red;

Width:300px ;

Height : 300px;

}

#b{

Background-color: blue;

Border: 2px solid green;

}

Cls2{

Color :red;

Width:300px ;

Height : 300px;

Background-color: blue;

Border: 2px solid green;

Box-shadow: red 0 0 10px 5px;

}

حالا هم کد شلوغ را با یه حرکت زیبای less کم حجم تر کرده در واقع ضربه فنی اش می کنیم:

.a{

Color :red;

Width:300px ;

Height : 300px;

}

#b{

Background-color: blue;

Border: 2px solid green;

}

Cls1{.

.a();

#b();

Box-shadow: red 0 0 10px 5px;

}

در کد بالا .a() و #b() مکزین های (maxin) ما هستند.

less

مراحل نصب و  بکار گیری less:

روش اول :

روش اجرای محلی و اصطلاحا لوکال هاست

برای نصبless ابتدا باید نرم افزار کامپایلر nodejs را دانلود کرده که در سایت رسمی خود nodejs.org می توانید آن را دانلود کرده و نصب نماید سپس در NPM (مدیریت پکیج nodejs ) کدهای comment prompt زیرا قرار دهید تا less نصب شود:

npm install -g less

 

بعد از نصب less در همان صفحه کدهای زیر به نشان موفقیت آمیز بودن نصب نشان داده می شود (حدود ۴۰ خط کد این شکلی):

-- [email protected]

+-- [email protected]

| `-- [email protected]

+-- [email protected]

+-- [email protected]

+-- [email protected]

+-- [email protected]

| `-- [email protected]

+-- [email protected]

| `-- [email protected]

+-- [email protected].0

| +-- [email protected]

| +-- [email protected]

| | `-- [email protected]

| |   +-- [email protected]

| |   `-- [email protected]

| +-- [email protected]

.

.

.

 

  6 روش برای افزایش سرعت سایت (آپدیت 2018)

بعد از نصب می رویم سراغ کار با less:

یک مثال ساده برای کار با less:

یک فایل html درست کرده و کدهای زیر را در آن قرار دهید

<!doctype html>

<head>

<link rel="stylesheet" href="style.css" type="text/css" />

</head>

<body>

<h1>Welcome to less edite</h1>

<h3>Hello world !</h3>

</body>

</html>

یک فایل style.css درست کنید.

سپس فایل style.less را درست کنیم اما یادتان نرود که باید فایل .html و style.less در پوشه nodejs باشند .

این کد را در فایل less وارد کنید:

@primarycolor: red;

@color:blue;

h1{

color: @primarycolor;

}

h3{

color: @color;

}

حالا در cmd باز شده nodejs کد زیر را وارد می کنیم:

Less style.less style.css

بعد از این که کد بالا وارد شد و خطا نداد حالا دیگه کدهای less ما تبدیل شده به کدهای css قابل فهم مرورگر و فایل style.css برای ما بروزرسانی شده است.

حالا فایل html خود را باز کرده با مرورگر و نتیجه کار را به شکل زیر ببنید:

Welcome to less edite

Hello world !

راه حل بعدی اجرای کدهای less

یه راه دیگه اجرای کدهای less استفاده از تبدیل کنندهای آنلاین هستن که کد less را به آن داده و خروجی را همان لحظه می بینید از این سایت ها می توان به موارد زیر اشاره کرد:

Codepen.io 

winless.org

lesstester.com

freeformatter.com

سایت های بالا نسبت به روش اجرای  اول ساده تر است  اما مشکل کار اینجاست اگر اینترنت در دسترس  شما نباشد کارتان پیچ می خورد L و باید دوباره به سراغ روش اول بیاید که در اصل روش نرمال و حرفه ای کار است. (سعی کنید حرفه ای باشد)

less

حالا شما اولین کد less خود را اجرا کردید، خوشحال هستید و باشید چون همیشه اولین بار که یک کار انجام می شود طراحی سایت توسعه دهندگان سخت ترین و شادی آورترین لحظه ها است.

 

به وبلاگ توسعه دهندگان وب خوش آمدید .

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