آموزش Less چهار عملگر اصلی در Less

1396/3/26 علیرضا حاتمی نیا 2178

چهار عمل اصلی در less

سلام خسته نباشید
آموزش قسمت چهارم Less را با هم شروع می کنیم. در جلسه قبلی در مورد قواعد تودرتو نویسی دایرکت ها در less صحبت کردم. در این جلسه با آموزش عملگرها در less در خدمت شما هستم. 

عملگرها درLess  

از ویژگی های خوب less پشتیبانی از چهار عمل اصلی مانند ضرب (*)، جمع  (+)، تفریق (-) و تقسیم می باشد.  از این عملگرهای اصلی در Less بیشتر برای عملیات روی اعداد ، رنگ ها و متغیرها استفاده می شود. در مورد متغیر ها در جلسه آینده به طور کامل توضیح داده خواهد شد. 
استفاده از این عملگرها در less کار توسعه Css را بسیار راحت تر می کند. مثلا فرض کنید متغیری به نام myFont برای ذخیره مقداری پیش فرض برای اندازه سایز فونت تعریف شده است. برای تغییر سایز اندازه فونت در قسمت های مختلف محتوا کافی ست با اضافه و کم کردن مقدار myfont تعیین کنیم : 

<html>
   <head>
      <title>Less Operations</title>
      <link rel="stylesheet" type = "text/css" href = "mystyle.css">
   </head>
   
   <body>
      <h1>عملیات اصلی در LEss</h1>
      <p class = "content">
    این یک مثال برای توضیح اجرای عملگرهای اصلی در لس می باشد.
      </p>
   </body>
</html>

در ادامه فایل less را برای این سند اینگونه می نویسیم : 

mystyle.less

@fontSize: 15px;
.content {
   font-size: @fontSize + 5;
}

توسط دستور زیر فایل mystyle.less را به mystyle.css کامپیال می کنیم. 

lessc mystyle.less mystyle.css

اجرای کد بالا فایل mystyle.css را به صورت خودکار می سازد. 

mystyle.css

.content {
   font-size: 20px;
}

 

کلمات کلیدی

علیرضا حاتمی نیا
طراح و برنامه نویس وب
طراحی وبسایت های واکنش گرا
طراحی و پیاده سازی سیستم مدیریت محتوا
سئو و بهینه سازی سایت