LESS의 미디어 쿼리

요소에 미디어 쿼리를 추가하는 함수를 만들어 봅시다. 예를 들어, 모바일 장치에 대한 스타일을 조절하는 쿼리로 해보겠습니다. 함수 이름도 그에 맞게 지어봅시다:

styles.less.mobile(@code) {

}

우리 함수는 매개변수로 코드 블록을 받을 것입니다. 이 블록을 미디어 쿼리 내부에 출력해 봅시다:

styles.less.mobile(@code) {
  @media (max-width: 600px) {
    @code();
  }
}

이제 우리 함수를 사용해 봅시다:

styles.lessdiv {
  .mobile({
    width: 300px;
  });
}

결과적으로 컴파일 후 우리의 div는 미디어 쿼리 내부에 위치하게 되어 해당 스타일을 적용받게 됩니다:

styles.less@media (max-width: 600px) {
  div {
    width: 300px;
  }
}