Giá trị biến âm Sass?

Tôi có một số bộ chọn scss trong đó tôi sử dụng cùng một số lượng tích cực và tiêu cực, như trong:

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

Tôi muốn sử dụng một biến cho tất cả số tiền 15px, nhưng điều này không hoạt động:

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

Số tiền ký quỹ chuyển đổi thành số dương. Tui bỏ lỡ điều gì vậy?

Hãy thử nó như thế này

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

Một giải pháp lành mạnh hơn theo hướng dẫn sass sẽ là interpolatecác biến như ví dụ sau:

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

Ví dụ: https://www.sassmeister.com/gist/c9c0208ada0eb1fdd63ae47830917293

Tôi đang thêm hai xu của mình sau khi xem xét hai câu trả lời trước đó, nhưng sau đó đọc câu này (tôi nhấn mạnh):

Bạn đặc biệt#{$number}px nên tránh sử dụng nội suy như thế nào . Điều này không thực sự tạo ra một con số! Nó tạo ra một chuỗi không được trích dẫn trông giống như một số, nhưng sẽ không hoạt động với bất kỳ hoạt động hoặc hàm số nào. Cố gắng làm cho đơn vị toán của bạn sạch sẽ để $numberđã có đơn vị pxhoặc viết $number * 1px.

Nguồn

Vì vậy, tôi tin rằng cách chính xác sẽ là như sau, điều này bảo toàn khả năng toán học của SASS / SCSS:

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