Sass negatif değişken değeri?


107

Aşağıdaki gibi aynı miktarda pozitif ve negatif kullandığım birkaç scss seçicim var:

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

Tüm 15px miktarları için bir değişken kullanmayı tercih ederim, ancak bu işe yaramıyor:

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

Marj tutarları pozitif sayılara dönüşür. Bir şey mi kaçırıyorum?

Yanıtlar:




2

Önceki iki cevabı düşündükten sonra iki pennethimi ekliyorum, ama sonra bunu okuyorum (vurgu benim):

Sen gerektiğini özellikle gibi interpolasyon kullanmaktan kaçının#{$number}px . Bu aslında bir sayı oluşturmaz! Bir sayıya benzeyen, ancak herhangi bir sayı işlemi veya işlevi ile çalışmayan tırnaksız bir dize oluşturur. $numberZaten bir üniteye sahip olması için matematik ünitenizi temiz yapmaya çalışın pxveya yazın $number * 1px.

Kaynak

Bu nedenle, SASS / SCSS'nin matematiksel yeteneklerini koruyan doğru yolun aşağıdaki gibi olacağına inanıyorum:

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

İlk bakışta, işin özü (cevabınız) gibi görünüyor, ancak ikinci bakışta gerçekten daha iyi cevap. Sonuçta, eğer değişken negatif bir değişken haline gelirse, cevap olumlu olur! $ ped: -2rem; ... margin: 0 - # {$ pad}; // kenar boşluğu olur: 0 --2rem; kenar boşluğu: 0 $ ped * -1; // margin olur: 0 2rem;
Fnordius
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.