스타일러스 펜으로 장치 안전을 유지하려면 어떻게해야합니까?

Question

내 프로젝트에서 일부 CSS 전처리기를 사용하고 스타일러스를 선택하려고합니다. 내가 스타일러스가이 컴파일 것을 발견했습니다 오늘 : 여기에

body { 
    width: 100% + 50px; 
} 

: 두 값이 모두 변수 때

body { 
    width: 150%; 
} 

이 될 수는 놀라운 변화한다. 예를 들어 나는 이런 내 규칙의 일부 표현이있는 경우 :

my-element { 
    width: $some-value + $some-other-value + $some-more-value; 
} 

을 그리고 난이 변수 중 하나의 단위를 변경하는 경우, 예를 들어, 픽셀에서 persents에, 모든 표현은 자동으로 깨진 것입니다. 그래서 단위를 바꾸고 싶다면이 변수의 모든 용도를 프로젝트 전체에서 검토하고 괜찮은지 확인해야합니다.

어떤 종류의 안전 장치를 스타일러스에 보관할 수 있습니까? 스타일러스가이 상황에 대해 calc(100% + 50px)을 생성하고 콘솔에 경고를 주면 완벽한 해결책이 될 것입니다. 그러나 경고 또는 오류조차도 충분합니다.

Answer 1

스타일러스 버전이 아닌 기본 CSS calc를 사용하려면 sprintf을 사용하면됩니다. 스타일러스가 단위를 변환하여 수학을 처리하는 것과는 달리, 예상 한 것과 같이 다른 단위를 해결합니다. 예 :

width: 'calc(%s + %s + %s)' % ($some-value $some-other-value $some-more-value)