۱۴
اسفند

جلسه ۰۵ : عملگرها در LESS

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

فهرست

مقدمه

با عرض سلام خدمت کاربران سایت پی وی لرن ، و کاربرانی که دوره کامل آموزش LESS را دنبال می کنند. آموزش قسمت پنجم Less را با هم شروع می کنیم. در جلسه قبلی در مورد دستورالعمل های تو در تو در less صحبت کردیم. در این جلسه با آموزش عملگرها در LESS در خدمت شما هستیم.Less از برخی عملگرهای محاسباتی همچون عملگر چمع(+) و تفریق(-) و ضرب(*) و تقسیم(/) پشتیبانی می کند.

عملگرها در LESS

عملگر یک سمبل یا نشانه است که باعث میشه اسکریپت شما بتونه یه عمل ریاضی یا منطقی انجام بده!

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

مثال زیر عملکرد عملگر ها در LESS را نشان میدهد:

مثال :

<html>
   <head>
      <title>Less Operations</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Operations</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

<html>

<head>

<title>Less Operations</title>

</head>

<body>

<h1>Example using Operations</h1>

<p class = "myclass">LESS enables customizable,

manageable and reusable style sheet for web site.</p>

</body>

</html>

اکنون فایل style.less را ایجاد می کنیم:

style.less

مثال :

@fontSize: 10px;
.myclass {
 font-size: @fontSize * 2;
 color:green;
}

@fontSize: 10px;

.myclass {

font-size: @fontSize * 2;

color:green;

}

حال می توانید فایل style.less را به style.css، با استفاده از دستور زیر کامپایل کنید:

مثال :

lessc style.less style.css

1	lessc style.less style.css

بعد از اینکه کد بالا را اجرا کردید، فایل style.css به طور خودکار به صورت زیر ایجاد خواهد شد:

style.css

مثال :

.myclass {
   font-size: 20px;
   color: green;
}

.myclass {

font-size: 20px;

color: green;

}

خروجی

گام های زیر را انجام دهید تا ببینید کدهای بالا چگونه کار میکنند:

فایل اچ تی ام ال بالای صفحه را با نام operations.html ذخیره کنید.
سپس این فایل اچ تی ام ال را در مرورگر خود باز کنید. خروجی به صورت زیر خواهد بود:

عملگرها در LESS

کلام آخر

عملگرها برای انجام عملیات بر پایه ی ریاضیات مورد استفاده قرار میگیرند و با استفاده از آنها میتوانید عملیاتی همچون ضرب، تقسیم، جمع و تفریق را انجام دهید.

به اشتراک بگذارید

less ,استفاده از ریاضیات در less ,عملگر های LESS ,عملگرهای محاسباتی

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

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۰۵ : عملگرها در LESS

مقدمه

عملگرها در LESS

style.less

style.css

کلام آخر

لیست مطالب دوره

مقدمه

ویژگی های زبان برنامه نویسی LESS

توابع در LESS

کاربرد LESS

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ