Sass 음의 변수 값?


107

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

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

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

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

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

답변:


215

이렇게 해봐

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

1
이 접근 방식을 자동으로 시도했습니다. 계산 기능에서 사용할 때 작동하지 않는 것 같습니다. 편집 : 계산을 사용할 때 괄호를 사용할 필요가없는 것처럼 보이지만, 보간해야합니다. stackoverflow.com/questions/17982111/…
Kevin


2

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

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

출처

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

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

언뜻보기에는 꼼꼼한 대답 (당신의 대답) 인 것 같지만, 두 번째보기에는 정말 더 나은 대답입니다. 결국 변수가 음의 변수가되면 대답은 양이됩니다! $ pad : -2rem; ... 여백 : 0-# {$ pad}; // 마진이됩니다 : 0 --2rem; 마진 : 0 $ pad * -1; // 마진이됩니다 : 0 2rem;
Fnordius
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.