LESS에서 벤더 프리픽스를 사용한 변환(Transform)

rotate 및 skew 함수를 통해 크로스 브라우저 변환을 설정하는 함수를 만들어 봅시다:

styles.less.rotate(@r) {
  -moz-transform+_: rotate(@r);
  -webkit-transform+_: rotate(@r);
  transform+_: rotate(@r);
}
.skew(@s) {
  -moz-transform+_: skew(@s);
  -webkit-transform+_: skew(@s);
  transform+_: skew(@s);
}

우리가 만든 함수를 사용해 봅시다:

styles.lessdiv {
  .rotate(10deg);
  .skew(10deg);
}

컴파일 결과:

styles.cssdiv {
  -moz-transform: rotate(10deg) skew(10deg);
  -webkit-transform: rotate(10deg) skew(10deg);
  transform: rotate(10deg) skew(10deg);
}