~ "calc (100 %-@spacing)"과 같이 ~ 연산자에 대해 Less에서 변수를 사용하는 방법이 있습니까?

~ "calc (100 %-@spacing)"과 같이 ~ 연산자에 대해 Less에서 변수를 사용하는 방법이 있습니까?

---

더 적은 ~연산자 에서 변수를 사용하는 방법이 있습니까?

~"calc(70% - @spacing)";

시도했을 때 다음과 같은 정적 값으로 만 작동합니다.

 ~"calc(70% - 10px)";

속성으로 설정하기 전에 평가할 문자열을 가져올 수 있습니까?

---

-두 숫자 값 사이에서 발견 되지만 여전히 변수를 사용할 수있을 때 LESS가 자동으로 수행하는 계산을 비활성화하려면 다음 중 하나를 작성할 수 있습니다.

1) 계산을 트리거하는 연산자 만 이스케이프하고 평소처럼 변수를 사용합니다.

@padding: 20px;
body {
    padding: calc(100% ~"-" @padding);
}

2) 전체 표현식을 이스케이프하고 @{padding}표기법으로 변수를 보간합니다.

@padding: 20px;
body {
    padding: ~"calc(100% - @{padding})";
}

두 번째 버전은 자바 스크립트의 템플릿 리터럴 과 비슷 하고 좀 더 깔끔해 보이지만 어느 쪽이든 잘 작동합니다.

두 솔루션 모두 자동 Less 계산을 비활성화하고 올바른 결과로 컴파일합니다.

body {
  padding: calc(100% - 20px);
}

참고 URL : https://stackoverflow.com/questions/14279328/is-there-a-way-to-use-variables-in-less-for-the-operator-like-calc100