سلام خسته نباشید
آموزش قسمت چهارم 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; }
