دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)



  • ۱۴
  • اسفند

جلسه ۲۴ : انتخابگرهای والد در LESS

  • دسته‌بندی‌ها :
جلسه ۲۴ : انتخابگرهای والد در LESS
    • جزئیات
    • نوع محتواآموزش تصویری

      با عرض سلام خدمت کاربران سایت پی وی لرن ، و کاربرانی که دوره کامل آموزش LESS را دنبال می کنند. در این فصل،قصد داریم بفهمیم انتخابگرهای والد در LESS چگونه کار می کنند. با استفاده از عملگر & در LESS ،انتخابگر والد ارجاع داده میشود. انتخابگرهای والد با یک قانون تو در تو، توسط & نشان داده میشود و  هنگام استفاده از یک کلاس اصلاح کننده یا شبه کلاس  به یک selector موجود استفاده می شوند.

      انتخابگرهای والد در LESS

      توضیحات زیر انواع انتخابگرهای والد را نشان می دهد:

      & چندگانه

      نزدیکترین انتخابگر و همچنین تمام انتخابگرهای والد را نشان می دهد.

      تغییر ترتیب انتخابگر

      انتخاب یک انتخابگر والد برای هنگامی که میخواهید ترکیب انتخابگرها رو تغییر بدهید مناسب است.

      انفجار ترکیبی
      همچنین &،  می تواند تمام تغییرات ممکن انتخابگرها را در یک لیست جداگانه توسط کاما ایجاد کند.

      مثال زیر نحوه استفاده از انتخابگرهای والد را در LESS نشان می دهد:

      مثال : 

      اکنون فایل style.less را بسازید:

      style.less

      مثال : 

      با استقاده از دستور زیر شما می توانید فایل style.less را به فایل style.css کامپایل کنید:

      مثال : 

      با اجرای دستور بالا فایل style.css بصورت خودکار با کد زیر ایجاد خواهد شد:

      مثال : 

      در مثال بالا & به انتخابگر a برمیگردد.

      خروجی

      با انجام دادن گام های زیر خواهید دید کدهای بالا چگونه عمل میکنند:

      • کد HTML بالا را در فایل parent_selector1.html ذخیره کنید.
      • سپس فایل HTML را در مرورگر خود باز کنید،درنهایت خروجی زیر به شما نمایش داده خواهد شد.

      انتخابگرهای والد در LESS

      کلام آخر

      عملگر انتخابگرهای والد  کابردهای فراوانی دارد از جمله:هنگامی که میخواهید انتخابگرها را به غیر از روش پیش فرض با یکدیگر ترکیب کنید.

      همچنین یکی دیگر از استفاده های معمول عملگر & در LESS این است که به طور مرتب نامهای کلاس را به طور تکراری  تولید کنیم.

      QR:  جلسه ۲۴ : انتخابگرهای والد در LESS
      به اشتراک بگذارید