Sass ujemna wartość zmiennej?


107

Mam kilka selektorów scss, w których używam tej samej ilości dodatniej i ujemnej, jak w:

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

Wolałbym używać zmiennej dla wszystkich kwot 15px, ale to nie działa:

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

Kwoty depozytu są zamieniane na liczby dodatnie. Czy coś mi brakuje?

Odpowiedzi:


215

Spróbuj w ten sposób

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

1
Automatycznie wypróbowałem to podejście - wydaje się nie działać, gdy używasz funkcji kalkulator. Edycja: Wygląda na to, że nie musisz używać nawiasów podczas korzystania z kalkulatora, ale musisz interpolować stackoverflow.com/questions/17982111/ ...
Kevin


2

Po rozważeniu dwóch poprzednich odpowiedzi dodaję dwa pensy, ale potem przeczytam (moje podkreślenie):

Należy szczególnie unikać stosowania interpolacji, np#{$number}px . To właściwie nie tworzy liczby! Tworzy niecytowany ciąg, który wygląda jak liczba, ale nie będzie działał z żadnymi operacjami liczbowymi ani funkcjami. Postaraj się, aby jednostka matematyczna była czysta, tak aby $numberjuż ją zawierała px, lub napisz $number * 1px.

Źródło

Dlatego uważam, że właściwy sposób wyglądałby następująco, który zachowuje zdolności matematyczne SASS / SCSS:

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

Na pierwszy rzut oka wydaje się, że jest to szukanie nitek (twoja odpowiedź), ale na drugi rzut oka to naprawdę lepsza odpowiedź. W końcu, jeśli zmienna stanie się zmienną ujemną, odpowiedź będzie pozytywna! $ pad: -2rem; ... margines: 0 - # {$ pad}; // staje się margin: 0 --2rem; margines: 0 $ pad * -1; // staje się margin: 0 2rem;
Fnordius
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.