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

다음 코드의 컴파일 결과를 설명하세요:

@var: ul;

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

다음 코드의 컴파일 결과를 설명하세요:

@var: ul;

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

다음 코드의 컴파일 결과를 설명하세요:

@var: ul;

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

다음 코드의 컴파일 결과를 설명하세요:

@var: ul;

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

다음 코드의 컴파일 결과를 설명하세요:

@var: list;

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

다음 코드의 컴파일 결과를 설명하세요:

@var: list;

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

다음 코드의 컴파일 결과를 설명하세요:

@var: list;

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

다음 코드의 컴파일 결과를 설명하세요:

@var: list;

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

다음 코드의 컴파일 결과를 설명하세요:

@var: list;

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

다음 코드의 컴파일 결과를 설명하세요:

@var: .block;

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

다음 코드의 컴파일 결과를 설명하세요:

@var: .block;

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

다음 코드의 컴파일 결과를 설명하세요:

@var: a;

@{var}:hover {
	text-decoration: none;
}

다음 코드의 컴파일 결과를 설명하세요:

@var1: div;
@var2: a;

@{var1} @{var2}:hover {
	text-decoration: none;
}

다음 코드의 컴파일 결과를 설명하세요:

@var1: block1;
@var2: block2;

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