LESS에서 pre-processor는 요즘 많이 사용됩니다. CSS를 사용하는데 매우 편리한 기능들을 제공하며 뛰어난 언어처럼 다양한 기능을 제공하죠.

아래는 LESS 사용시 가상클래스(pseudo-class) 선택자::before, ::after, ::hover 등을 적용하는 방법에 대하여 알아봅니다. LESS에서 가상선택자 클래스를 적용할 경우 어떻게 할까요?


# LESS에서 가상클래스 선택자 적용하기

아래는 div 태그 내에 위치한 span 태그에 대하여 가상클래스 선택자를 적용한 예제코드입니다. 보시는 것처럼 앞에 & 기호를 사용하면 간단하게 적용할 수 있습니다. 만약 div 태그 다음에 ::before, ::after를 선언하면 아래처럼 사용합니다.
div {
  width: 100px;
  height: 100px;
  border 1px solid;
  &:before {
    content: "before";
  }
  &:after {
    content: 'after';
  }
}
위 코드의 결과 div 태그에서 가상클래스 ::before, ::after가 선언됩니다.

div {
  &:hover {
    color: #f00;
  }
}
::hover시 색을 변경할 수 있죠.

매우쉽죠? 이처럼 LESS에서 & 기호를 사용하여 가상클래스 선택자를 손쉽게 선택하는 것이 가능합니다.