SCSS / SASS ile bir yüzde hesaplayın

121

Hesaplama yoluyla scss'de yüzde olarak bir genişlik ayarlamak istiyorum, ancak bu bana hata veriyor ..

"...- genişlik: (4/12)%" sonrasında geçersiz CSS: beklenen ifade (ör. 1px, kalın), ";" idi

Gibi bir şey yapmak istiyorum

$my_width: (4/12)%;

div{
width: $my_width;
}

oraya% işaretini nasıl eklerim?

Px ve em ile aynı soru

css sass

— Nick Ginanto
kaynak

Oynayacak bir şey yok. Sadece sayının birimini hesaplamaya eklemek istiyorum. (400/20) piksel ile aynı. Scss'de nasıl bir sayı ve px / em /% elde edebilirim? Bu şekilde "küresel değişkenlere" sahip olabilirim, bir kez değiştirebilirim

— Nick Ginanto

$ My_width gibi bir parantez eklemeyi deneyin: ((4/12)%);

— Sri

Hata .. Üzgünüm, kontrol edip bir deneme daha yapma şansım olmadı .. {$ my_width: (4/12)%;}

— Sri

Yanıtlar:

211

Yüzde işlevini denediniz mi?

$my_width: percentage(4/12);
div{
width: $my_width;
}

— Tomas
kaynak

px ve em için benzer bir işlev var mı?

— Nick Ginanto

Emin değilim, ancak dokümantasyonun kaynak bölümünde temeldeki mantığı görebilirsiniz: Sass :: Script :: Number.new (value.value * 100, ['%']), bu yüzden eğer yoksa varsa bunu doğrudan yapabilir veya bazı sarmalayıcı işlevlerini kendiniz oluşturabilirsiniz.

— Tomas

@NickGinanto for px, sadece +pxsatırın sonuna ekleyebilirsiniz , örneğinwidth: ($foo + $bar) +px

— DisgruntledGoat

@DisgruntledGoat Hayır, bunu hiçbir koşulda asla yapmamalısınız . Birimleri eklemek çarpma yoluyla yapılmalıdır (örn. $foo + $bar * 1px), Birimi bu şekilde birleştirmek size sadece bir dizge verir.

— cimmanon

@cimmanon bu son zamanlarda değişti mi? Eminim yorumumu yayınladığımda durum böyle değildi.

— DisgruntledGoat

Diğer yol:

$my_width: 4/12*100%;

div{
width: $my_width; // 33.33333%
}

Sass, değeri% olarak verecektir.

— rlejnieks
kaynak

Bunun benim için çalışmasını sağlamak için% 100/6 * 1 kullanmak zorunda olduğumu veya% 1666.67 ile sonuçlandığımı unutmayın.

— sp00n

*% 100'ün gerçekte ne yaptığı bir dokümantasyonu nerede bulabilirim?

— Ini

Bu şekilde çalışmasını başardım:

div{
   width: (4/12)* 1%;
   }

Bu şekilde herhangi bir özel işlev kullanmanıza gerek kalmaz.

— Enrique Cuchetti
kaynak