LESSCSS

믹스인

LESS에서는 하나의 룰셋에서 속성을 여러 개 취해서 다른 룰셋에 포함시키는 것이 가능합니다. 예를 들어, 다음과 같은 클래스를 갖고 있다고 해 봅시다 :

.bordered {
 border-top: dotted 1px black;
 border-bottom: solid 2px black;
}

이 속성들을 다른 룰셋에서 사용하려고 합니다. 자, 포함시키려는 속성이 들어있는 룰셋에다가 클래스의 이름을 집어넣기만 하면 됩니다:

#menu a {
 color: #111;
 .bordered;
}
.post a {
 color: red;
 .bordered;
}

.bordered클래스의 속성(요부분 맞는지 몰겠어요 --a)이 두 군데에 나타납니다. #menu a하고 .post a안에 나타나요:

#menu a {
 color: #111;
 border-top: dotted 1px black;
 border-bottom: solid 2px black;
}
.post a {
 color: red;
 border-top: dotted 1px black;
 border-bottom: solid 2px black;
}

CSS class나 id 룰렛은 이런 방식으로 믹스인할 수 있습니다.

댓글

댓글 본문
  1. 놀부
    마지막 줄 오타가 있군요. 룰렛 -> 룰셋
버전 관리
egoing@gmail.com
현재 버전
선택 버전
graphittie 자세히 보기