CSS3 calc ile daha az agresif derleme

336

Kullandığım Less derleyiciler ( OrangeBits ve dotless 1.3.0.5 ) agresif bir şekilde çeviri yapıyor

body { width: calc(100% - 250px - 1.5em); }

içine

body { width: calc(-151.5%); }

Açıkçası arzu edilmez. Daha az derleyiciye derleme sırasında özniteliğini görmezden gelmek için bir yol olup olmadığını merak ediyorum. Less belgelerini ve her iki derleyicinin belgelerini de araştırdım ve hiçbir şey bulamadım.

Less or Less Less derleyicisi bunu destekliyor mu?

Değilse, bunu yapan bir CSS genişletici var mı?

— Nick Babcock
kaynak

9

Daha az agresif bir derleyici istemediğinizden emin misiniz?

— fiatjaf

Ben de derleyicinin daha agresif olmasını istiyorum! (önceki yorumdaki çifte olumsuzluk beni şaşırttı;)) (bu yüzden

— Andreas Dietrich

530

Daha azı artık içerideki ifadeyi calcvarsayılan olarak değerlendirmez v3.00.

Orijinal cevap ( Less v1.x...2.x):

Bunu yap:

body { width: calc(~"100% - 250px - 1.5em"); }

Daha Az 1.4.0 sürümünde strictMaths, tüm Daha az hesaplamaların köşeli parantez içinde olmasını gerektiren bir seçeneğimiz olacaktır , bu nedenle calc"kutudan çıkar çıkmaz" çalışacaktır. Bu büyük bir kırılma değişikliği olduğu için bir seçenektir. 1.4.0 başındaki betaların varsayılan olarak bu seçeneği vardı. Yayın sürümü varsayılan olarak kapalıdır.

— Luke Sayfası
kaynak

2

Twitter'ın girintisiyle daha az derliyorsanız, bu kaçmayı görmezden geldiğini unutmayın . En azından bu yorumu yazarken.

— Attila Fulop

1

Ben sadece calc(100% - 50px)less.css 1.4.0 denedim ve sonuç oldu calc(50%). Müthiş ~"..."hile çalışmaya devam ediyor, ancak "kutunun dışında" ifadesi ile kafam karıştı, bu da beni yukarıdakilerin işe yarayacağını düşündürüyor. Luke, calcDaha Az 1.4.0'daki değişimi nasıl destekliyor ? Teşekkürler!

— Brian M. Hunt

2

Soru şu ki, less.js neden ilk etapta bunu hesaplamaya çalıştı? Mantıklı bir cevabı hesaplayamadığı için "% 100 - 250 piksel" için bir hata atmalıdır.

— mpen

72

Gelecekteki okuyucular için, yalnızca operatörden de kaçabilirsiniz, böylece değişkenleri de kullanabilirsiniz. Örnek:calc(@somePercent ~"-" @someLength)

— 0b10011

10

Bunu daha az yanlış hesaplamak veya hata atmak yerine, kullanıcının ne yapmaya çalıştığını ve onu yalnız bırakmaya çalıştığını neden anlamıyor? Açıkçası bir yüzde ve bir piksel değeri, daha az bir sürede birlikte hesaplanamaz.

— dfmiller

37

Kireçin çok yaygın bir kullanımı% 100 genişlik almak ve elemanın etrafına bir miktar marj eklemektir.

Biri bunu yapabilir:

@someMarginVariable = 15px;

margin: @someMarginVariable;
width: calc(~"100% - "@someMarginVariable*2);
width: -moz-calc(~"100% - "@someMarginVariable*2);
width: -webkit-calc(~"100% - "@someMarginVariable*2);

— Sebastien Lorber
kaynak

-o-calc- henüz desteklenmiyor .

— başka bir

28

Aynı sonuçla birkaç kaçış seçeneği vardır:

body { width: ~"calc(100% - 250px - 1.5em)"; }
body { width: calc(~"100% - 250px - 1.5em"); }
body { width: calc(100% ~"-" 250px ~"-" 1.5em); }

— icl7126
kaynak

9

Bu yayında açıklandığı gibi, kaçan calc içine değişkenler eklemenin daha düzenli bir yolu vardır: CSS3 calc () işlevi Less # 974 ile çalışmaz

@variable: 2em;

body{ width: calc(~"100% - @{variable} * 2");}

Kıvrımlı parantezleri kullanarak, kaçan tırnak işaretlerini kapatıp yeniden açmanız gerekmez.

— brohr
kaynak