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

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

styles.less@var: div;

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

მაგალითი

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

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

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

styles.cssdiv {
  font-size: 20px;
}

მაგალითი

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

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

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

styles.cssmain div {
  font-size: 20px;
}

მაგალითი

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

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

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

styles.css#div {
  font-size: 20px;
}

მაგალითი

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

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

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

styles.css.div {
  font-size: 20px;
}

პრაქტიკული ამოცანები

Задание 1

ახსენით, რა იქნება შემდეგი კოდის კომპილაციის შედეგი:

styles.less@var: ul;

@{var} {
  font-size: 20px;
}
Задание 2

ახსენით, რა იქნება შემდეგი კოდის კომპილაციის შედეგი:

styles.less@var: ul;

div @{var} {
  font-size: 20px;
}
Задание 3

ახსენით, რა იქნება შემდეგი კოდის კომპილაციის შედეგი:

styles.less@var: ul;

div @{var} {
  font-size: 20px;
}
Задание 4

ახსენით, რა იქნება შემდეგი კოდის კომპილაციის შედეგი:

styles.less@var: ul;

@{var} li {
  font-size: 20px;
}
Задание 5

ახსენით, რა იქნება შემდეგი კოდის კომპილაციის შედეგი:

styles.less@var: list;

.@{var} {
  font-size: 20px;
}
Задание 6

ახსენით, რა იქნება შემდეგი კოდის კომპილაციის შედეგი:

styles.less@var: list;

#@{var} li {
  font-size: 20px;
}
Задание 7

ახსენით, რა იქნება შემდეგი კოდის კომპილაციის შედეგი:

styles.less@var: list;

.@{var} li {
  font-size: 20px;
}
Задание 8

ახსენით, რა იქნება შემდეგი კოდის კომპილაციის შედეგი:

styles.less@var: list;

ul.@{var} li {
  font-size: 20px;
}
Задание 9

ახსენით, რა იქნება შემდეგი კოდის კომპილაციის შედეგი:

styles.less@var: list;

ul.@{var} li {
  font-size: 20px;
}
Задание 10

ახსენით, რა იქნება შემდეგი კოდის კომპილაციის შედეგი:

styles.less@var: .block;

ul@{var} {
  font-size: 20px;
}
Задание 11

ახსენით, რა იქნება შემდეგი კოდის კომპილაციის შედეგი:

styles.less@var: .block;

ul@{var} li {
  font-size: 20px;
}
Задание 12

ახსენით, რა იქნება შემდეგი კოდის კომპილაციის შედეგი:

styles.less@var: a;

@{var}:hover {
  text-decoration: none;
}
Задание 13

ახსენით, რა იქნება შემდეგი კოდის კომპილაციის შედეგი:

styles.less@var1: div;
@var2: a;

@{var1} @{var2}:hover {
  text-decoration: none;
}
Задание 14

ახსენით, რა იქნება შემდეგი კოდის კომპილაციის შედეგი:

styles.less@var1: block1;
@var2: block2;

.@{var1}.@{var2} {
  font-size: 20px;
}