Kompilasi yang kurang agresif dengan CSS3 calc

336

The Kurang compiler yang saya gunakan ( OrangeBits dan dotless 1.3.0.5 ) secara agresif menerjemahkan

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

ke

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

Yang jelas tidak diinginkan. Saya bertanya-tanya apakah ada cara untuk memberi sinyal ke kompiler Kurang untuk dasarnya mengabaikan atribut selama kompilasi. Saya telah mencari melalui dokumentasi Less dan dokumentasi kedua kompiler, dan saya tidak dapat menemukan apa pun.

Apakah kompiler Kurang atau Kurang mendukung ini?

Jika tidak, apakah ada pemanjang CSS yang berfungsi?

css compilation less css-calc Nick Babcock
sumber
9
Apakah Anda yakin tidak ingin kompiler kurang agresif?
fiatjaf
Saya juga sangat yakin, ingin kompiler menjadi lebih agresif! (negasi ganda dalam komentar sebelumnya membingungkan saya;)) (jadi suara saya juga untuk fitur yang bagus di bawah ini)
Andreas Dietrich

Jawaban:

530

Kurang tidak lagi mengevaluasi ekspresi di dalam calcsecara default sejak itu v3.00.

Jawaban asli ( Less v1.x...2.x):

Melakukan hal ini:

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

Dalam Less 1.4.0 kita akan memiliki strictMathsopsi yang mengharuskan semua perhitungan Less berada di dalam tanda kurung, sehingga calcakan bekerja "out-of-the-box". Ini adalah opsi karena ini merupakan perubahan besar. Beta awal 1.4.0 mengaktifkan opsi ini secara default. Versi rilis telah dinonaktifkan secara default.

Luke Page
sumber
2
Perhatikan bahwa jika Anda kurang kompilasi dengan reses twitter itu mengabaikan ini melarikan diri . Setidaknya pada saat menulis komentar ini.
Attila Fulop
1
Saya baru saja mencoba calc(100% - 50px)less.css 1.4.0 dan hasilnya adalah calc(50%). ~"..."Trik yang luar biasa terus bekerja, tetapi saya bingung dengan pernyataan "out-of-the-box", yang membuat saya berpikir hal di atas akan berhasil. Luke, bagaimana dukungan untuk calcperubahan dalam Less 1.4.0? Terima kasih!
Brian M. Hunt
2
Pertanyaannya adalah mengapa less.js berupaya menghitung ini sejak awal? Seharusnya ada kesalahan "100% - 250px" karena tidak bisa menghitung jawaban yang masuk akal.
mpen
72
Untuk pembaca yang akan datang, Anda juga dapat melarikan diri dari operator, memungkinkan Anda untuk menggunakan variabel juga. Contoh:calc(@somePercent ~"-" @someLength)
0b10011
10
Alih-alih mengurangi kesalahan perhitungan ini atau membuat kesalahan mengapa tidak dapat menyadari apa yang pengguna coba lakukan dan membiarkannya sendiri? Jelas persentase dan nilai piksel tidak dapat dihitung bersama dalam waktu kurang.
dfmiller
37

Penggunaan kata kunci yang sangat umum adalah mengambil 100% lebar dan menambahkan beberapa margin di sekitar elemen.

Seseorang dapat melakukannya dengan:

@someMarginVariable = 15px;

margin: @someMarginVariable;
width: calc(~"100% - "@someMarginVariable*2);
width: -moz-calc(~"100% - "@someMarginVariable*2);
width: -webkit-calc(~"100% - "@someMarginVariable*2);
Sebastien Lorber
sumber
-o-calc- belum didukung .
lain
28

Ada beberapa opsi untuk melarikan diri dengan hasil yang sama: 

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

Ada cara yang lebih rapi untuk memasukkan variabel di dalam escaped calc, seperti yang dijelaskan dalam posting ini: fungsi CSS3 calc () tidak berfungsi dengan Less # 974

@variable: 2em;

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

Dengan menggunakan kurung keriting Anda tidak perlu menutup dan membuka kembali tanda kutip yang keluar.

brohr
sumber