LESS에서 벤더 접두사를 사용한 calc 함수 구현

크로스 브라우저 CSS 함수 calc를 구현하는 함수를 만들어 봅시다:

styles.less.calc(@name, @calc) {
  @{name}: -webkit-calc(@calc);
  @{name}: -moz-calc(@calc);
  @{name}: calc(@calc);
}

우리의 함수를 사용해 보겠습니다:

styles.lessdiv {
  .calc(width, ~'10px + 30%');
}

컴파일 결과:

styles.cssdiv {
  width: -webkit-calc(10px + 30%);
  width: -moz-calc(10px + 30%);
  width: calc(10px + 30%);
}