تعریف
extend یک pseudo class هست که استایل های selector دیگر را با استفاده از :extend در یک selector می آورد.
مثال
مثال زیر extend در فایل LESS را نشان میدهد:
<!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 را ایجاد کنید.
h2 {
&:extend(.style);
font-style: italic;
}
.style {
background: green;
}
با استفاده از دستور زیر فایل style.less را به style.css تبدیل کنید:
lessc style.less style.css
با اجرای دستور بالا فایل style.css بصورت خود به خود ایجاد میشود و شامل کدهای زیر است:
h2 {
font-style: italic;
}
.style,
h2 {
background: blue;
}
خروجی
بیایید دستورات زیر را انجام دهیم تا خروجی را ببینیم:
- کدهای html بالا را در فایل extend_syntax.html ذخیره کنید.
- فایل HTML را در مرورگر باز کنید، خروجی بدین شکل خواهد بود.
