Отрицательное значение переменной Sass?

У меня есть несколько селекторов scss, в которых я использую одинаковое количество положительных и отрицательных значений, как в:

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

Я бы предпочел использовать переменную для всех 15 пикселей, но это не работает:

$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

Я добавляю свой двухпеннет после рассмотрения двух предыдущих ответов, но затем читаю это (выделено мной):

Особенно#{$number}px следует избегать использования интерполяции, например . На самом деле это не создает числа! Он создает строку без кавычек, которая выглядит как число, но не работает ни с какими числовыми операциями или функциями. Попробуйте сделать свою математическую единицу чистой, чтобы она $numberуже была px, или напишите $number * 1px.

Источник

Поэтому я считаю, что правильным будет следующий способ, который сохраняет математические способности SASS / SCSS:

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