LESS에서 의사 클래스를 위한 코드 블록 사용
링크에 hover 상태 스타일을 설정하는 함수를 만들어 봅시다.
이 함수가 매개변수로 코드 블록을 받도록 합니다:
.hover(@code) {
}
전달된 코드 블록을 hover 상태 내부에서 출력해 봅시다:
.hover(@code) {
&:hover {
@code();
}
}
링크 내부에서 우리의 함수를 사용해 봅시다:
a {
color: red;
.hover({
color: blue;
text-decoration: none;
});
}
컴파일 결과:
a {
color: red;
}
a:hover {
color: blue;
text-decoration: none;
}
인풋에 focus 상태 스타일을 설정하는 비슷한 함수를 만드세요.
