[css] Sass 음의 변수 값?
다음과 같이 동일한 양의 양수와 음수를 사용하는 몇 개의 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;