[css] Sass 음의 변수 값?

Program / 글쓴이

다음과 같이 동일한 양의 양수와 음수를 사용하는 몇 개의 scss 선택기가 있습니다.

padding: 0 15px 15px;
margin: 0 -15px 20px -15px;

모든 15px 금액에 대해 변수를 사용하고 싶지만 작동하지 않습니다.

$pad: 15px;
padding: 0 $pad $pad;
margin: 0 -$pad 20px -$pad;

마진 금액은 양수로 변환됩니다. 내가 뭔가를 놓치고 있습니까?

답변

이렇게 해봐

margin: 0 (-$pad) 20px (-$pad);

답변

sass 지침에 따른보다 건전한 솔루션 interpolate은 다음 예제와 같은 변수에 대한 것입니다 .

margin: 0 -#{$pad} 20px -#{$pad};

예 : https://www.sassmeister.com/gist/c9c0208ada0eb1fdd63ae47830917293

답변

나는 두 개의 이전 답변을 고려한 후 2 펜을 추가하고 있지만 다음을 읽었습니다 (강조 표시).

특히와 같은 보간을 사용하지#{$number}px 않아야합니다 . 이것은 실제로 숫자를 생성하지 않습니다! 숫자처럼 보이는 인용되지 않은 문자열을 생성하지만 숫자 연산이나 함수에서는 작동하지 않습니다. $number이미 unit을 갖도록 수학 단위를 깨끗하게 만들 px거나 $number * 1px.

출처

따라서 올바른 방법은 SASS / SCSS의 수학적 능력을 보존하는 다음과 같습니다.

$pad: 15px;
padding: 0 $pad $pad;
margin: 0 $pad*-1 20px $pad*-1;

답변