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

107

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

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

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

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

Суммы маржи конвертируются в положительные числа. Я что-то упускаю?

css sass compass-sass

— Стив
источник

215

Попробуйте вот так

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

— Золтан Тот
источник

1

Автоматически пробовал этот подход - похоже, не работает при использовании в функции calc. Изменить: похоже, вам не нужно использовать круглые скобки при использовании calc, но вам нужно интерполировать stackoverflow.com/questions/17982111/…

— Кевин

27

Более разумным решением в соответствии с рекомендациями sass было бы использование interpolateпеременных, подобных следующему примеру:

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

Пример: https://www.sassmeister.com/gist/c9c0208ada0eb1fdd63ae47830917293

— Вангель Цзо
источник

@Green Вы всегда можете проверить пример ссылки: sassmeister.com/gist/c9c0208ada0eb1fdd63ae47830917293

— Vangel TZO

2

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

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

Источник

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

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

— EvilDr
источник

На первый взгляд это кажется придирком (ваш ответ), но на второй взгляд это действительно лучший ответ. В конце концов, если переменная действительно становится отрицательной переменной, ответ становится положительным! $ pad: -2 бэр; ... маржа: 0 - # {$ pad}; // становится margin: 0 --2rem; маржа: 0 $ pad * -1; // становится маржой: 0 2rem;

— Fnordius