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



  • ۱۴
  • اسفند

جلسه ۱۳ : extend کردن در Less

  • دسته‌بندی‌ها :
جلسه ۱۳ : extend کردن در Less
    • جزئیات
    • نوع محتواآموزش تصویری

      مقدمه

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

      extend کردن در Less

      Extend یک شبه کلاس در Less است که به ما امکان می دهد تا با استفاده از سلکتور extend: کلاس های دیگر سلکتورها را توسعه دهیم.

      برای درک بهتر مطلب به مثال ساده زیر که نحوه ی کار کردن extend در Less نشان داده شده است دقت کنید :

      extend_syntax.html

      مثال : 

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

      style.less

      مثال : 

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

      مثال : 

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

      style.css

      مثال : 

      خروجی کدهای بالا

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

      1. کد اچ تی ام ال بالای این صفحه را با نام extend_syntax.html ذخیره کنید.
      2. حالا این فایل اچ تی ام ال را در مرورگر خود باز کنید، خروجی به صورت زیر خواهد بود.

      extend کردن در less

      سینتکس extend در Less

      دستور extend را می توان در داخل آکولادها قرار داد و یا آن را به یک سلکتور(گزینشگر) اضافه نمود. می توان در داخل دستور extend یک یا چند کلاس را اضافه کرد به طوری که با استفاده از کاما از یکدیگر جدا شده باشند.

      در مثال زیر، می توانید نحوه ی استفاده از سینتکس extend را در فایل Less مشاهده نمایید:

      extend_syntax.htm

      مثال : 

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

      style.less

      مثال : 

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

      مثال : 

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

      مثال : 

      خروجی

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

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

      کلام آخر

      استفاده از مفهوم ارث بری در برنامه نویسی بسیار ساده است. هنگامی که یک کلاسی را تعریف می‌کنیم، در آن کلاس ویژگی‌ها و رفتار‌هایی را هم مشخص می‌کنیم. حالا اگر یک کلاس دیگر تعریف کنیم و بخواهیم از یک کلاس دیگری ارث بری کند، باید از کلمه‌ی کلیدی extends استفاده کنیم.

      QR:  جلسه ۱۳ : extend کردن در Less
      به اشتراک بگذارید