LESS Parent Selector(&)

LESS 부모 선택자

이 글에서는 LESS 문법 중 부모(상위) 선택자에 대해 알아보는 시간을 가져보겠습니다.

LESS Parent Selectors documentation

Parent Selectors

LESS 에서 부모 선택자를 참조하기위해 & 지시자를 사용합니다.

& 지시자는 중첩된 규칙의 부모 선택자를 참조하며 일반적으로 클래스를 변경적용하거나 가상 클래스를 적용할 때 사용됩니다.

less

a {
	color: blue;
	&:hover { // 이 코드에서는 중첩된 바로 위의 부모 선택자인 a를 참조한다
		color: green;
	}
}

컴파일된 css

a {
  color: blue;
}
a:hover {
  color: green;
}

부모 선택자인 & 는 다양한 용도로 사용할 수 있습니다.

기본적으로 중첩된 규칙 내에서 기본 선택자 이외의 다른 방식으로 선택자를 결합시킬 수 있습니다.

예를 들어 & 의 다른 용도는 반복적인 클래스 네임을 생성하는 것입니다. 다음과 같이 :

less

.button {
	&-ok { // 여기서 부모 선택자 .button을 참조하여 결합시킨다
		background-image: url("ok.png");
	}
	&-cancel {
		background-image: url("cancel.png");
	}

	&-custom {
		background-image: url("custom.png");
	}
}

컴파일된 css

.button-ok {
  background-image: url("ok.png");
}
.button-cancel {
  background-image: url("cancel.png");
}
.button-custom {
  background-image: url("custom.png");
}

Multiple &(다수의 부모 선택자 사용하기)

부모 선택자는 셀렉터 내에서 여러 번 사용할 수 있습니다.

이 선택자는 부모 선택자 이름을 반복하지 않고 부모 선택자를 참조할 수 있습니다. 다음과 같이 : 

less

.link {
	& + & {
		color: red;
	}

	& & {
		color: green;
	}

	&& {
		color: blue;
	}

	&, &ish {
		color: cyan;
	}
}

컴파일된 css

.link + .link {
  color: red;
}
.link .link {
  color: green;
}
.link.link {
  color: blue;
}
.link,
.linkish {
  color: cyan;
}

주의 바랍니다. 부모 선택자는 가장 가까운 상위 선택자 뿐만 아니라 모든 부모 선택자를 나타냅니다.

다음의 예제 코드를 살펴봅니다.

less

.grand {
	.parent {
		& > & {
			color: red;
		}

		& & {
			color: green;
		}

		&& {
			color: blue;
		}

		&, &ish {
			color: cyan;
		}
	}
}

컴파일된 css

.grand .parent > .grand .parent {
  color: red;
}
.grand .parent .grand .parent {
  color: green;
}
.grand .parent.grand .parent {
  color: blue;
}
.grand .parent,
.grand .parentish {
  color: cyan;
}

Changing Selector Order(선택자 순서 변경하기)

부모 선택자인 & 앞에 다른 선택자를 배치하여 사용하면 유용할 수 있습니다.

예를 들어 모더나이저와 같은 플러그인을 사용할 때 지원되는 기능에 따라 서로 다른 규칙을 지정할 수 있습니다.( e.g 서로 다른 테마를 지정)

less

.header {
	.menu {
		background-color: red;
		#theme-01 & {
			background-color: green;
		}
	}
}

컴파일된 css

.header .menu {
  background-color: red;
}
#theme-01 .header .menu {
  background-color: green;
}

기본 메뉴 테마가 red 이고 다른 테마를 정의하고자 할 때 위와 같이 활용할 수도 있습니다.

Combinatorial Explosion(조합적 폭발)

부모선택자는 또한 콤마(,)로 구분된 리스트에서 선택자의 모든 가능한 순열을 생성하는데 사용할 수 있습니다.

다음 코드와 같이 지정된 요소의 16개 조합이 가능해 집니다.

less

p, a, ul, li {
	border-top: 2px dotted #366;
	& + & {
		border-top: 0;
	}
}

컴파일된 css

p,
a,
ul,
li {
  border-top: 2px dotted #366;
}
p + p,
p + a,
p + ul,
p + li,
a + p,
a + a,
a + ul,
a + li,
ul + p,
ul + a,
ul + ul,
ul + li,
li + p,
li + a,
li + ul,
li + li {
  border-top: 0;
}

또 다른 예제를 살펴봅니다.

less

p, .demo01 {
	color : red;
	font-family:Lucida Console;
	& + & {
		color : green;
		background-color: yellow;
		font-family: "Comic Sans MS";
	}
}

컴파일된 css

p,
.demo01 {
  color: red;
  font-family: Lucida Console;
}
p + p,
p + .demo01,
.demo01 + p,
.demo01 + .demo01 {
  color: green;
  background-color: yellow;
  font-family: "Comic Sans MS";
}

Jaehee's WebClub