LESS를 사용하면 캐스캐이딩 방식으로 결합하는 방식 대신에 중첩하는 방식을 사용할 수 있습니다. CSS가 다음과 같은 상황을 살펴 보죠:
1 2 3 4 5 6 7 8 9 10 | #header { color : black ; } #header .navigation { font-size : 12px ; } #header .logo { width : 300px ; } #header .logo:hover { text-decoration : none ; } |
LESS를 사용하면 다음처럼 쓸 수도 있습니다.
1 2 3 4 5 6 7 8 9 10 11 | #header { color : black ; .navigation { font-size : 12px ; } .logo { width : 300px ; &:hover { text-decoration : none } } } |
아니면 이렇게 쓸 수도 있습니다.
1 2 3 4 5 6 | #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.
예를들어
1 2 3 4 5 6 7 8 | .bordered { &.float { float : left ; } . top { margin : 5px ; } } |
다음의 결과가 나옵니다.
1 2 3 4 5 6 | .bordered.float { float : left ; } .bordered . top { margin : 5px ; } |