Sass, yüzde eksi piksel hesapla

133

Aşağıdakileri yapabilmek istiyorum:

height: 25% - 5px;

Açıkçası bunu yaptığımda şu hatayı alıyorum:

Incompatible units: 'px' and '%'.

sass

— Mike Fielden
kaynak

Ben olsun Invalid property valuehatayı. Chrome'un Canary yapısı dahil her tarayıcıda.

— Mike Fielden

Bana istediğimi güzelleştirecek bir Sass işlevi varsa, sadece oynuyordum calc...

— Mike Fielden

Evet :) Dediğim gibi nasıl yapılacağı umurumda değil, calcilk önce ben mi gittim ve işe yaramadı. calcTarayıcılarımın hiçbirinde çalışmıyor gibi görünüyor , bu yüzden bir sass uygulaması tahmin edebileceğim en iyi şey olacaktır.

— Mike Fielden

1

Sass, calc () için çoklu dolgu görevi göremez. % 25'i piksele nasıl dönüştüreceğini bilmiyor, böylece matematik işlemlerini yapıp CSS oluşturabilir. Tam ihtiyaçlarınıza bağlı olarak, ekran tablosu ailesini kullanmak, kutu boyutunuzu değiştirmek veya negatif kenar boşlukları kullanmak gibi bir alternatif olabilir ( jsfiddle.net/5JZGt )

— cimmanon

240

Sass, bir birimden diğerine dönüştürülemeyen değerler üzerinde aritmetik yapamaz. Sass'ın piksel veya başka bir birim olarak "% 100" ne kadar geniş olduğunu bilmesinin hiçbir yolu yoktur. Bu, yalnızca tarayıcının bildiği bir şey.

Bunun calc()yerine kullanmanız gerekir . Kullanabilir miyim ile ilgili tarayıcı uyumluluğunu kontrol edin ...

.foo {
    height: calc(25% - 5px);
}

Değerleriniz değişkenler içindeyse, onları dizelere dönüştürmek için enterpolasyon kullanmanız gerekebilir (aksi takdirde Sass sadece aritmetik yapmaya çalışır):

$a: 25%;
$b: 5px;

.foo {
  width: calc(#{$a} - #{$b});
}

— chrisgonzalez
kaynak

5

Calc () işlevinin çoğu tarayıcıda hiç çalışmadığını söyleyebilirim. Mobil platformlar, masaüstü bilgisayarlar kadar önemlidir.

— dalgard

3

Orada tartışma yok, ancak tarayıcıları sayın! Calc () 'ı desteklemekten daha fazla destekleyin ve yakın gelecekte daha da fazlası onu destekleyecek!

— chrisgonzalez

5

Ben kalk fonksiyonları içinde bir değişken kullanarak genişliği sorunları vardı, ama burada bulundu: stackoverflow.com/questions/13542164/... Böyle değişkeni referans verebilecek: calc(25% - #{$var}).

— mlunoe

@ Dalgard'ın açıklamasını takip etmek için, mevcut, yayınlanmış tarayıcılar açısından, calc çalıştığından daha fazla çalışmıyor. Bkz: caniuse.com/#search=calc

— imjared

3

Her zaman ekleyerek bir düşüş arka seçeneğini kullanabilirsiniz width: 22%her şeyden de widthbirlikte scalc

— Hengjie

23

calcHem SCSS'de [derleme zamanı] hem de CSS'de [çalışma zamanı] bir işlev vardır . Muhtemelen ikincisi yerine ilkini çağırıyorsunuz.

Açık nedenlerden dolayı, karıştırma birimleri derleme zamanında çalışmaz, ancak çalışma zamanında çalışır.

İkincisini unquotebir SCSS işlevi kullanarak zorlayabilirsiniz .

.selector { height: unquote("-webkit-calc(100% - 40px)"); }

— Sandström
kaynak

14

$var:25%;
$foo:5px;
.selector {
    height:unquote("calc( #{$var} - #{$foo} )");
}

— Edwin Fernando Marroquin Busto
kaynak

2

Bu soruya bir cevap gönderdiğiniz için teşekkür ederiz! Stack Overflow'da yalnızca kod yanıtları tavsiye edilmez, çünkü bağlam içermeyen bir kod dökümü, çözümün nasıl veya neden çalışacağını açıklamaz, bu da orijinal göndericinin (veya gelecekteki okuyucuların) arkasındaki mantığı anlamasını zorlaştırır. Başkalarının cevabınızdan yararlanabilmesi için lütfen sorunuzu düzenleyin ve kodunuzun bir açıklamasını ekleyin. Teşekkürler!

— Maximillian Laumeister

Bu beni kurtardı. genişlik: alıntı ("hesap (% 100 - # {$ leftnav-width})");

— httpete

5

EĞER sen konteyner genişliğini biliyorum, böyle yapabilirdi:

#container
  width: #{200}px
  #element
    width: #{(0.25 * 200) - 5}px

Birçok durumda #container'ın göreceli bir genişliğe sahip olabileceğinin farkındayım. O zaman bu işe yaramaz.

— Adrian Tasarım
kaynak

2

Eski iş parçacığını canlandırdığım için özür dilerim - Compass 'uzantısı ile bir: after sözde seçici amacınıza uygun olabilir - ör. bir div'in ekranın soldan (% 50 + 10px) genişliğini doldurmasını istiyorsanız, kullanabilirsiniz (SASS girintili sözdiziminde):

.example
    background: red
    +stretch(0, -10px, 0, 0)
    &:after
        +stretch(0, 0, 0, 50%)
        content: ' '
        background: blue

: After öğesi, .example öğesinin sağındaki% 50'yi doldurur (.example'ın genişliği için% 50 kullanılabilir durumda kalır), ardından .example bu genişlik artı 10 piksel olacak şekilde uzatılır.

— Bryce Gilhome
kaynak

1

bir yerlerde bunun için daha az veya sass karışımı var mı? calc pek iyi çalışmıyor gibi görünüyor.

— v3nt

0

Yüzde değerini bir değişkene ekleyin ve #{$variable} örneğin

$twentyFivePercent:25%;
.selector {
    height: calc(#{$twentyFivePercent} - 5px);
}

— Aftab Ahmed
kaynak