با عرض سلام خدمت کاربران سایت پی وی لرن ، و کاربرانی که دوره کامل آموزش LESS را دنبال می کنند. در این فصل،قصد داریم بفهمیم انتخابگرهای والد در LESS چگونه کار می کنند. با استفاده از عملگر & در LESS ،انتخابگر والد ارجاع داده میشود. انتخابگرهای والد با یک قانون تو در تو، توسط & نشان داده میشود و هنگام استفاده از یک کلاس اصلاح کننده یا شبه کلاس به یک selector موجود استفاده می شوند.
توضیحات زیر انواع انتخابگرهای والد را نشان می دهد:
& چندگانه
نزدیکترین انتخابگر و همچنین تمام انتخابگرهای والد را نشان می دهد.
تغییر ترتیب انتخابگر
انتخاب یک انتخابگر والد برای هنگامی که میخواهید ترکیب انتخابگرها رو تغییر بدهید مناسب است.
انفجار ترکیبی
همچنین &، می تواند تمام تغییرات ممکن انتخابگرها را در یک لیست جداگانه توسط کاما ایجاد کند.
مثال زیر نحوه استفاده از انتخابگرهای والد را در LESS نشان می دهد:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!doctype html> <head> <link rel = "stylesheet" href = "style.css" type = "text/css" /> <title>Parent Selector</title> </head> <body> <h2>Welcome to TutorialsPoint</h2> <ul> <li><a>SASS</a></li> <li><a>LESS</a></li> </ul> </body> </html> |
اکنون فایل style.less را بسازید:
1 2 3 4 5 6 | a { color: #5882FA; &:hover { background-color: #A9F5F2; } } |
با استقاده از دستور زیر شما می توانید فایل style.less را به فایل style.css کامپایل کنید:
1 | lessc style.less style.css |
با اجرای دستور بالا فایل style.css بصورت خودکار با کد زیر ایجاد خواهد شد:
1 2 3 4 5 6 7 | a { color: #5882FA; } a:hover { background-color: red; } |
در مثال بالا & به انتخابگر a برمیگردد.
با انجام دادن گام های زیر خواهید دید کدهای بالا چگونه عمل میکنند:
عملگر انتخابگرهای والد کابردهای فراوانی دارد از جمله:هنگامی که میخواهید انتخابگرها را به غیر از روش پیش فرض با یکدیگر ترکیب کنید.
همچنین یکی دیگر از استفاده های معمول عملگر & در LESS این است که به طور مرتب نامهای کلاس را به طور تکراری تولید کنیم.