[LESS] media query, 미디어 쿼리 쓰는 방법

LESS로 미디어 쿼리를 쓰는 방법입니다.

 

원래의 CSS는

@media screen and (max-width: 1200px) {
  .top_nav ul {
    float: none;
  }
}

 

와 같은 형식으로 써야 합니다.

 

이것을 LESS로 쓰려면?

/* 설정 */
@tablet    : "@media screen and (max-width: 1200px)";

/* 사용 */
@tablet {
  float: none;
}

/* 결과 */
@tablet {
  float: none;
}

 

로 설정해서 위와 같은 형식으로 쓰려고 했는데

실제 결과물은 

컴파일이 되지 않고 그대로 나옵니다.

 

 

그러면

어떻게 해야 하나 찾아보니 생각보다 조금 더 귀찮은 방법으로 해야합니다.

@media 쿼리는 써주고, 뒤에 부분만 변수로 만들어서 줄일 수 있습니다.

 

/* 설정 */
@tablet    : ~"screen and (max-width: 1200px)";

/* 사용 */
@media @tablet{
	float: none;
}

/* 결과 */
@media screen and (max-width: 1200px) {
  .top_nav ul {
    float: none;
  }
}

 

중요한 부분은

1. @media는 떼어준다.
2. ~뒤에 나머지 쿼리를 붙여준다.

입니다.

 

즐거운 LESS 코딩 되세요.