LESSCSS

중첩 관련 규칙

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

댓글

댓글 본문
  1. Jae Sung So
    위 내용은 이해가 잘 되었어요.~
버전 관리
egoing
현재 버전
선택 버전
공동공부
graphittie 자세히 보기