تعریف
گاردها برای این منظور استفاده میشوند تا مقادیر ساده یا تعداد آرگومان ها را در یک عبارت مقایسه کنند. گارد برای سلکتورهای CSS استفاده میشوند. درواقع گارد نحوه بیان میکسین Mixin و فراخوانی سریع آن می باشد. برای بیان موفق if، گارد را همراه با & بیاورید. این کار به شما این اجازه را میدهد که چندین گارد مختلف را با هم ترکیب کنید.
مثال
مثال زیر استفاده گارد CSS در فایل LESS را نشان میدهد:
<!doctype html> <head> <link rel="stylesheet" href="/style.css" type="text/css" /> </head> <body> <div class="cont"> <h2>Welcome to TutorialsPoint</h2> </div> <div class="style"> <h3>The largest Tutorials Library on the web.</h3> </div> </body> </html>
سپس فایل style.less را ایجاد کنید.
@usedScope: global; .mixin() { @usedScope: mixin; .cont when (@usedScope=global) { background-color: red; color: black; } .style when (@usedScope=mixin) { background-color: blue; color: white; } @usedScope: mixin; } .mixin();
با استفاده از دستور زیر فایل style.less را به style.css تبدیل کنید:
lessc style.less style.css
با اجرای دستور بالا فایل style.css بصورت خود به خود ایجاد میشود و شامل کدهای زیر است:
.style { background-color: blue; color: white; }
خروجی
بیایید دستورات زیر را انجام دهیم تا خروجی را ببینیم:
- کدهای html بالا را در فایل css_guard.html ذخیره کنید.
- فایل HTML را در مرورگر باز کنید، خروجی بدین شکل خواهد بود.