ولادت حضرت معصومه (س) و روز دختر مبارک، (کد تخفیف 35%: rozedokhtar)

سبد خرید (0)

عملگرها در Less

توضیحات مقدماتی

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

مثالی از Less

مثال زیر به شما نشان می دهد که چطور از عملگرها در یک فایل 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>

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

 

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

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

 

lessc style.less style.css

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

 

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

 خروجی -->

 با انجام گام های زیر، خواهید دید که این کدها چگونه کار می کنند:

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

 


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

 با استفاده از ادیتور زیر، می توانید این مثال را به طور زنده مشاهده کنید. و با استفاده از گزینه ی بالا و سمت راست این ادیتور، می توانید وارد صفحه ی اصلی ادیتور کدپن شوید و این کدها را ویرایش کنید.

 

See the Pen Less آموزش by Ehsan Abbasi (@sbaloot) on CodePen.

دیدگاه‌ها  

0 # دادمهر صفاييان پور 1395-04-20 11:41
با سلام چگونه میتوان از فایل less در mvc5 استفاده کرد
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن