ცვლადები სელექტორებში LESS-ში

ცვლადების გამოყენება ასევე შესაძლებელია სელექტორების შიგნით. თუმცა, ამისთვის საჭიროა ცვლადის ჩასმის ოდნავ განსხვავებული სინტაქსის გამოყენება: @ სიმბოლოს შემდეგ ცვლადის სახელი უნდა იყოს ფიგურულ ფრჩხილებში. მოდით შევხედოთ მაგალითებს. დავუშვათ, გვაქვს შემდეგი ცვლადი:

@var: div;

მოდით, ჩავსვათ ეს ცვლადი სელექტორში. განვიხილოთ სხვადასხვა სიტუაციები.

მაგალითი

ჩავსვათ ჩვენი ცვლადი, როგორც სელექტორი:

@{var} {
	font-size: 20px;
}

კომპილაციის შედეგი:

div {
	font-size: 20px;
}

მაგალითი

დავუშვათ, ახლა ჩვენი ცვლადი შეიცავს სელექტორის ნაწილს:

main @{var} {
	font-size: 20px;
}

კომპილაციის შედეგი:

main div {
	font-size: 20px;
}

მაგალითი

დავუშვათ, ახლა ჩვენ ვამბობთ, რომ ჩვენს ცვლადში არის არა ტეგის სახელი, არამედ მისი id. დავუმატოთ ცვლადის სახელის წინ ჩანგალი:

#@{var} {
	font-size: 20px;
}

კომპილაციის შედეგი:

#div {
	font-size: 20px;
}

მაგალითი

დავუშვათ, ახლა ჩვენ ვამბობთ, რომ ჩვენს ცვლადში არის არა ტეგის სახელი, არამედ მისი კლასი. დავუმატოთ ცვლადის სახელის წინ წერტილი:

.@{var} {
	font-size: 20px;
}

კომპილაციის შედეგი:

.div {
	font-size: 20px;
}