با عرض سلام خدمت کاربران سایت پی وی لرن ، و کاربرانی که دوره کامل آموزش LESS را دنبال می کنند. در این جلسه قصد داریم تا extend کردن در Less رو به شما آموزش دهیم.سلکتور extend برای مشتق کردن یک کلاس جدید از کلاس دیگر استفاده میشود با اینکار شما میتوانید از متدهای کلاس پایه در کلاس جدید استفاده کنید و همینطور خودتان میتوانید به آن متدهای جدیدی اضافه کنید و یا متدهای کلاس پایه را overide کنید و دوباره نویسی کنید.
Extend یک شبه کلاس در Less است که به ما امکان می دهد تا با استفاده از سلکتور extend: کلاس های دیگر سلکتورها را توسعه دهیم.
برای درک بهتر مطلب به مثال ساده زیر که نحوه ی کار کردن extend در Less نشان داده شده است دقت کنید :
1 2 3 4 5 6 7 8 9 10 11 12 | <!doctype html> <head> <link rel = "stylesheet" href = "style.css" type = "text/css" /> </head> <body> <div class = "style"> <h2>Welcome to TutorialsPoint</h2> <p>Hello!!!!!</p> </div> </body> </html> |
اکنون فایل style.less را بسازید:
1 2 3 4 5 6 7 8 | h2 { &:extend(.style); font-style: italic; } .style { background: green; } |
با استفاده از دستور زیر، فایل style.less را به style.css کامپایل کنید:
1 | lessc style.less style.css |
با اجرای دستور بالا، فایل style.css به طور خودکار به صورت زیر ایجاد خواهد شد:
1 2 3 4 5 6 7 8 | h2 { font-style: italic; } .style, h2 { background: blue; } |
خروجی کدهای بالا
گام های زیر را انجام دهید تا مشاهده کنید که کدهای بالا چگونه کار می کنند:
سینتکس extend در Less
دستور extend را می توان در داخل آکولادها قرار داد و یا آن را به یک سلکتور(گزینشگر) اضافه نمود. می توان در داخل دستور extend یک یا چند کلاس را اضافه کرد به طوری که با استفاده از کاما از یکدیگر جدا شده باشند.
در مثال زیر، می توانید نحوه ی استفاده از سینتکس extend را در فایل Less مشاهده نمایید:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!doctype html> <head> <link rel = "stylesheet" href = "style.css" type = "text/css" /> </head> <body> <div class = "style"> <h2>Welcome to TutorialsPoint</h2> <div class = "container"> <p>Hello!!!!!</p> </div> </div> </body> </html> |
اکنون فایل style.less را بسازید:
1 2 3 4 5 6 7 8 9 10 11 | .style:extend(.container, .img) { background: #BF70A5; } .container { font-style: italic; } .img { font-size: 30px; } |
شما می توانید با استفاده از دستور زیر، فایل style.less را به style.css کامپایل کنید:
1 | lessc style.less style.css |
اکنون دستور بالا را اجرا کنید. خواهید دید که فایل style.css به طور خودکار ایجاد می شود. به صورت زیر:
1 2 3 4 5 6 7 8 9 10 11 12 13 | .style { background: #BF70A5; } .container, .style { font-style: italic; } .img, .style { font-size: 30px; } |
گام های زیر را انجام دهید تا مشاهده کنید که کدهای بالا چگونه کار می کنند:
استفاده از مفهوم ارث بری در برنامه نویسی بسیار ساده است. هنگامی که یک کلاسی را تعریف میکنیم، در آن کلاس ویژگیها و رفتارهایی را هم مشخص میکنیم. حالا اگر یک کلاس دیگر تعریف کنیم و بخواهیم از یک کلاس دیگری ارث بری کند، باید از کلمهی کلیدی extends استفاده کنیم.