تعریف
selector میتواند به هر متغیر ارجاع داده شود و در زمان کامپایل ایجاد شود. نام متغیر باید بین پرانتز {} بیاید و ابتدای آن از سمبل @ استفاده کرد.
مثال
مثال زیر الحاق selector در فایل LESS را نشان میدهد:
<html>
<head>
<link rel = "stylesheet" href = "style.css" type = "text/css" />
<title>LESS selectors</title>
</head>
<body>
<h2>Welcome to Tutorialspoint</h2>
<div class = "div1">
<p>LESS is a CSS pre-processor that enables customizable, manageable and reusable style sheet for web site.</p>
</div>
<div class = "div2">
<p>LESS is a dynamic style sheet language that extends the capability of CSS. LESS is also cross browser friendly.</p>
</div>
</body>
</html>
سپس فایل style.less را ایجاد کنید.
@selector: h2;
@{selector} {
background: #2ECCFA;
}
با استفاده از دستور زیر فایل style.less را به style.css تبدیل کنید:
lessc style.less style.css
با اجرای دستور بالا فایل style.css بصورت خود به خود ایجاد میشود و شامل کدهای زیر است:
h2 {
background: #2ECCFA;
}
خروجی
بیایید دستورات زیر را انجام دهیم تا خروجی را ببینیم:
- کدهای html بالا را در فایل less_variables_interpolation_selectors.html ذخیره کنید.
- فایل HTML را در مرورگر باز کنید، خروجی بدین شکل خواهد بود.
