Nilai variabel negatif Sass?

107

Saya memiliki beberapa penyeleksi scss di mana saya menggunakan jumlah yang sama positif dan negatif, seperti di:

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

Saya lebih suka menggunakan variabel untuk semua jumlah 15px, tetapi ini tidak berhasil:

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

Jumlah margin diubah menjadi angka positif. Apakah saya melewatkan sesuatu?

css sass compass-sass

— Steve
sumber

215

Cobalah seperti ini

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

— Zoltan Toth
sumber

1

Secara otomatis mencoba pendekatan ini - sepertinya tidak berfungsi saat menggunakan dalam fungsi kalk. Sunting: Sepertinya Anda tidak perlu menggunakan tanda kurung saat menggunakan calc, tetapi Anda perlu menginterpolasi stackoverflow.com/questions/17982111/…

— Kevin

27

Solusi yang lebih waras menurut pedoman sass adalah interpolatevariabel seperti contoh berikut:

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

Contoh: https://www.sassmeister.com/gist/c9c0208ada0eb1fdd63ae47830917293

— Vangel Tzo
sumber

@Green Anda selalu dapat memeriksa tautan contoh: sassmeister.com/gist/c9c0208ada0eb1fdd63ae47830917293

— Vangel Tzo

2

Saya menambahkan dua penneth saya setelah mempertimbangkan dua jawaban sebelumnya, tetapi kemudian membaca ini (penekanan milik saya):

Anda sebaiknya menghindari penggunaan interpolasi seperti#{$number}px . Ini sebenarnya tidak membuat angka! Ini membuat string tanpa tanda kutip yang terlihat seperti angka, tetapi tidak akan berfungsi dengan operasi atau fungsi angka apa pun. Usahakan membuat satuan matematika Anda bersih sehingga $numbersudah memiliki satuannya px, atau tulis $number * 1px.

Sumber

Oleh karena itu saya percaya cara yang benar adalah sebagai berikut, yang mempertahankan kemampuan matematika SASS / SCSS:

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

— EvilDr
sumber

Pada pandangan pertama, ini tampaknya memilih rewel (jawaban Anda), tetapi pada pandangan kedua itu benar-benar jawaban yang lebih baik. Lagi pula, jika variabel tersebut menjadi variabel negatif, jawabannya menjadi positif! $ pad: -2rem; ... margin: 0 - # {$ pad}; // menjadi margin: 0 --2rem; margin: 0 $ pad * -1; // menjadi margin: 0 2rem;

— Fnordius