중첩 관련 규칙

LESS를 사용하면 캐스캐이딩 방식으로 결합하는 방식 대신에 중첩하는 방식을 사용할 수 있습니다. CSS가 다음과 같은 상황을 살펴 보죠:

#header { color: black; }
#header .navigation {
 font-size: 12px;
}
#header .logo {
 width: 300px;
}
#header .logo:hover {
 text-decoration: none;
}

LESS를 사용하면 다음처럼 쓸 수도 있습니다.

#header {
 color: black;

 .navigation {
   font-size: 12px;
 }
 .logo {
   width: 300px;
   &:hover { text-decoration: none }
 }
}

아니면 이렇게 쓸 수도 있습니다.

#header        { color: black;
 .navigation  { font-size: 12px }
 .logo        { width: 300px;
   &:hover    { text-decoration: none }
 }
}

The resulting code is more concise, and mimics the structure of your DOM tree.
Notice the & combinator—it’s used when you want a nested selector to be concatenated to its parent selector, instead of acting as a descendant. This is especially important for pseudo-classes like :hover and :focus.

예를들어

.bordered {
 &.float {
   float: left;
 }
 .top {
   margin: 5px;
 }
}

다음의 결과가 나옵니다.

.bordered.float {
 float: left;
}
.bordered .top {
 margin: 5px;
}