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;
}