با عرض سلام خدمت کاربران سایت پی وی لرن ، و کاربرانی که دوره کامل آموزش LESS را دنبال می کنند. آموزش قسمت پنجم Less را با هم شروع می کنیم. در جلسه قبلی در مورد دستورالعمل های تو در تو در less صحبت کردیم. در این جلسه با آموزش عملگرها در LESS در خدمت شما هستیم.Less از برخی عملگرهای محاسباتی همچون عملگر چمع(+) و تفریق(-) و ضرب(*) و تقسیم(/) پشتیبانی می کند.
عملگر یک سمبل یا نشانه است که باعث میشه اسکریپت شما بتونه یه عمل ریاضی یا منطقی انجام بده!
این عملگرها می توانند بر روی هر عدد یا رنگ یا متغیری، عمل کنند. عملگرهای محاسباتی هنگامی که شما از متغیرها استفاده می کنید و نیاز به استفاده از ریاضیات دارید، باعث صرفه جویی بسیاری در وقت می شوند و کار توسعه Css را بسیار راحت تر می کنند.
مثال زیر عملکرد عملگر ها در LESS را نشان میدهد:
1 2 3 4 5 6 7 8 9 10 11 12 | <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 را ایجاد می کنیم:
1 2 3 4 5 | @fontSize: 10px; .myclass { font-size: @fontSize * 2; color:green; } |
حال می توانید فایل style.less را به style.css، با استفاده از دستور زیر کامپایل کنید:
1 | lessc style.less style.css |
بعد از اینکه کد بالا را اجرا کردید، فایل style.css به طور خودکار به صورت زیر ایجاد خواهد شد:
1 2 3 4 | .myclass { font-size: 20px; color: green; } |
خروجی
گام های زیر را انجام دهید تا ببینید کدهای بالا چگونه کار میکنند:
عملگرها برای انجام عملیات بر پایه ی ریاضیات مورد استفاده قرار میگیرند و با استفاده از آنها میتوانید عملیاتی همچون ضرب، تقسیم، جمع و تفریق را انجام دهید.