Less.js: Fungsi CSS3 calc() tidak berfungsi dengan KURANG
Saya tahu ini sudah dilaporkan tetapi bug ditutup karena informasi yang tidak mencukupi.
Saya memiliki kode CSS berikut:
#id1 {
position: fixed;
left: 0; top: 0;
width: 130px;
}
#id2 {
position: fixed;
right: 0; top: 0;
width: calc(100% - 130px);
}
Saya ingin mengubahnya menjadi KURANG menggunakan 130px sebagai parameter tetapi calc diinterpretasikan oleh KURANG dan ini:
<strong i="11">@id1width</strong>: 130px
#id1 {
position: fixed;
left: 0; top: 0;
width: @id1width;
}
#id2 {
position: fixed;
right: 0; top: 0;
width: calc(100% - @id1width);
}
membuat baris terakhir tetapi satu berubah menjadi width: calc(-30%); yang jelas bukan yang diinginkan. Saya mencoba menggunakan width: ~"calc(100% - @id1width)"; tetapi itu membuat @id1width tidak ditafsirkan.
Saya pikir KURANG seharusnya tidak menggunakan hal-hal yang disediakan oleh CSS3 untuk penggunaan internalnya ...
mgol
Semua 51 komentar
mereka mungkin ditutup sebagai duplikat .. meskipun saya tidak dapat menemukan satu tentang calc .. lihat #146 #122 dan #915
solusi: width: ~"calc(100% - @{id1width})"; - perhatikan tanda kurung kurawal di sekitar variabel.
Kami pindah ke sistem di mana hanya hal-hal di dalam tanda kurung yang akan dievaluasi untuk memperbaiki masalah ini.
lukeapage
pada 8 Okt 2012
:+1:
shankarcabus
pada 18 Des 2012
<strong i="5">@rows</strong>: 10;
<strong i="6">@row1</strong>: 1 / <strong i="7">@rows</strong> * 100%;
.featured1
{
top: ~'-webkit-calc(@{row1} + 20px)';
right: 0;
bottom: @row5;
left: @col9;
}
Sedikit KURANG ini akan memproses nilai ' @row1 ' menjadi 10%, yang sangat bagus. Tetapi ketika itu berada di dalam bagian yang lolos dari KURANG dan dibungkus dengan keriting untuk mempertahankan variabel KURANG, ia mengembalikan '10' tanpa '%'.
Saya telah menemukan solusi yang belum mengecewakan saya. Jika Anda menempatkan '%' lain setelah ikal penutup variabel 'row1' di dalam kode yang lolos, itu akan berfungsi dengan benar ...
~'-webkit-calc(@{row1}% + 20px)';
Tapi itu sepertinya cukup meretas untuk menambahkan tipe unit lain yang seharusnya sudah ada di variabel.
jonjohnjohnson
pada 19 Des 2012
@jonjohnjohnson ini diperbaiki di kepala dan akan di 1.3.2
sisa bug ini akan diselesaikan di 1.4.0
lukeapage
pada 19 Des 2012
Tidak yakin apakah ini masalah yang sama, tetapi saya mengalami masalah dengan yang berikut ini. Perhatikan bahwa tidak ada hal-hal yang kurang spesifik di sini, kurang 1.3.3 adalah munging CSS yang valid.
Berikut CSSnya
html, body {
margin:0, padding:0, border:0;
height: 100%;
}
#content {
height: -webkit-calc(100% - 40px);
height: calc(100% - 40px);
background-color:gray;
}
#footer {
background-color:black;
}
Dan inilah HTML untuk memasukkannya
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet/less" type="text/css" href="test.css" />
<script src="less-1.3.3.min.js"></script>
<body>
<div id="content"></div>
<div id="footer" style="height:40px"></div>
</body>
</html>
"konten" sedang diatur ke ketinggian 60%, jadi lebih sedikit parsing & salah menyelesaikan ekspresi calc daripada meneruskannya tidak berubah ke browser. Diuji di Safari 6.0.2 dan Firefox.
faceless2
pada 14 Jan 2013
Diperbaiki pada master untuk 1.4.0
lukeapage
pada 2 Feb 2013
height: ~"calc(100% - 50px)";
masih menghasilkan:
height: calc(50%);
untuk saya. Aku ingin:
height: calc(100% - 50px);
OliverJAsh
pada 3 Jun 2014
Terlebih lagi, masih menghasilkan height: calc(50%); bahkan dengan matematika yang ketat diatur ke on .
OliverJAsh
pada 3 Jun 2014
@OliverJAsh Saya tidak dapat mereproduksi hasil Anda dengan Less 1.7.0 (baik nilai lolos dan --strict-math:on berfungsi seperti yang diharapkan)... Bisakah Anda memberikan detail lebih lanjut tentang kompiler/lingkungan/skrip yang Anda gunakan? (Untuk berjaga-jaga jika ada masalah skrip pembuatan Bootstrap yang dapat menyebabkan hasil yang salah: https://github.com/twbs/bootstrap/issues/13604, mungkin ini juga kasus Anda?).
seven-phases-max
pada 3 Jun 2014
Saya mengalami masalah ini di 1.6.3 (untuk beberapa alasan, WinLESS gagal dikompilasi ketika saya memutakhirkan ke 1.7.x, jadi saya tetap menggunakan 1.6.x untuk saat ini)
Perbaikan cepat saya hanya untuk menghindari satu bagian dari persamaan seperti:
height: calc(~"100%" - unit(<strong i="7">@var</strong>, px));
Ini bahkan berfungsi untuk variabel, seperti <strong i="10">@var</strong>: 50 . Atau Anda dapat menghindari seluruh perhitungan seperti calc(~"100% - 50px");
twiginteractive
pada 26 Jul 2014
@twiginteractive Jika Anda harus menggunakan escaping dengan opsi --strict-math off (pengaturan default) maka itu bukan masalah tetapi perilaku yang diharapkan. Lihat --strict-math .
seven-phases-max
pada 26 Jul 2014
@seven-phases-max Hmmm - menurut dokumen, dengan SM mati (default) maka _harus_ ini diuraikan dengan benar (yaitu tidak tersentuh)
height: calc(100% - 10px);
Tapi tidak. CSS keluaran adalah height: calc(90%); , yang bukan hasil yang diinginkan. Mungkin ini diperbaiki di 1.7, tetapi seperti yang saya katakan, saya tidak dapat menggunakan versi itu sekarang sampai saya mengetahui apa yang merusak kompilasi WinLESS.
(Kecuali saya salah membaca dokumen ketika dikatakan "akan diproses dengan benar"... KURANG tidak dapat mengetahui nilai 100%, jadi seharusnya tidak melakukan perhitungan matematis pada '100% - 10px')
twiginteractive
pada 26 Jul 2014
@twiginteractive
menurut dokumen, dengan SM mati (default) maka ini harus diuraikan dengan benar (yaitu tidak tersentuh)
Tidak, kata di sana adalah currently bukan correctly (yaitu "akan _akan diproses_ saat ini").
seven-phases-max
pada 26 Jul 2014
@seven-phases-max Ah - buruk, masuk akal sekarang. Terimakasih atas klarifikasinya.
twiginteractive
pada 27 Jul 2014
tinggi: ~"calc(100% - 50px)"; Bekerja untuk saya.
aamirshahzad
pada 5 Sep 2014
Di sinilah Less.js mulai mengacaukan kode Anda.
height: _calc(50%);
height: calc(100% - 50%); /* browser-native */
stevenvachon
pada 5 Sep 2014
@stevenvachon
Seharusnya v2.0 akan memiliki opsi untuk mengawali fungsinya seperti:
Ini tidak akan memengaruhi calc dengan cara apa pun. Tidak ada fungsi calc bawaan, Less hanya mengevaluasi ekspresi matematika sesuai dengan aturannya (Less). Itu dia. Jika Anda tidak ingin "kekacauan" ini gunakan --strict-math .
seven-phases-max
pada 5 Sep 2014
Ps solusi untuk masalah ini adalah matematika yang ketat. Dan mungkin kita harus
memaksakan matematika yang ketat saat dalam panggilan ke calc?
lukeapage
pada 5 Sep 2014
Masalahnya meluas saat menggunakan Mitos setelah Kurang.
stevenvachon
pada 5 Sep 2014
Mengapa? Apakah mitos menghapus tanda kurung? Matematika yang ketat membuat superset yang kurang tepat
dari css.
lukeapage
pada 5 Sep 2014
Dan mungkin kita harus memaksakan matematika yang ketat saat melakukan panggilan ke calc?
Kami telah membahas ini di # 1872 dan ada beberapa argumen yang menentang solusi "local strict- math:on ". Solusi yang diusulkan (belum diputuskan) ada di #1880.
seven-phases-max
pada 5 Sep 2014
@stevenvachon
Bahkan dengan strictMath, kita perlu ~"calc(...)" agar Less mengabaikannya.
Contoh? Yaitu cuplikan di mana Less memasang ekspresi di dalam calc dengan --strict-math=on .
seven-phases-max
pada 5 Sep 2014
Sejak kapan awalan v2 akan berfungsi? Apakah kita memutuskan itu dan aku lupa?
lukeapage
pada 6 Sep 2014
Sejak kapan awalan v2 akan berfungsi? Apakah kita memutuskan itu dan aku lupa?
Tidak. Saya kira ini hanya sedikit berlebihan https://github.com/less/less.js/issues/2102#issuecomment -50286985.
seven-phases-max
pada 6 Sep 2014
Ya, maaf, bukan "opsi untuk" tetapi "kemampuan menulis plugin yang menyediakan opsi untuk". Saya harus menguji beberapa kode lagi dengan dan tanpa Saya pasti salah beberapa waktu lalu dan terus bergerak maju dengan kesalahpahaman itu. Saya memiliki beberapa kode lama yang harus saya modifikasi sekarang.~"" pada calc() .
stevenvachon
pada 6 Sep 2014
Saya telah melihat sesuatu yang aneh terjadi dengan calc ketika digunakan bersama dengan width . Saya sudah memasukkan semuanya ke dalam codepen hanya untuk membuatnya lebih mudah: http://codepen.io/anon/pen/OVpJvP
alenb
pada 2 Jun 2015
@alenb
Lalu apa yang aneh disana? Kode dalam codepen Anda dikompilasi seperti yang diharapkan...
seven-phases-max
pada 2 Jun 2015
@seven-fase-max
Ini dikompilasi, tetapi bukan itu yang diharapkan. Periksa kode CSS sedikit lebih dekat.
Aneh karena masih ada celah di paling kanan meskipun harus meregang penuh dengan 3 kolom. Dua kolom pertama harus 33,33% dikurangi 20px dengan kolom terakhir 33,33%. 2 kolom pertama akan memiliki padding-right 20px, tetapi ini tidak tercermin karena jelas ada celah di paling kanan.
Saya telah bermain lebih banyak dengannya tadi malam dan margin-right alih-alih padding-right melakukan trik dan menyelesaikan masalah.
alenb
pada 3 Jun 2015
@alenb
Ini dikompilasi, tetapi bukan itu yang diharapkan. Periksa kode CSS sedikit lebih dekat.
Tentu saja. Jadi jika Anda mengharapkan sesuatu yang berbeda - sebutkan.
2 kolom pertama akan memiliki padding-right 20px, tetapi ini tidak tercermin
padding tidak memengaruhi lebar dengan cara apa pun (kecuali jika Anda menetapkan [ box-sizing ](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing tertentu )), consult [CSS specs](http://www.w3.org/TR/REC-CSS2/box.html). So you simply get :
(33% - 20px) + (33% - 20px) + 33% = 99% - 40px -> 40px` gap seperti yang diharapkan.
Either way ini hanya terkait dengan CSS dan tidak ada hubungannya dengan bagaimana Less mengkompilasi calc . Klik tombol "lihat yang dikompilasi" dalam kode codepen dan di sana Anda melihat pernyataan calc dikompilasi oleh Kurang persis seperti yang Anda tentukan).
seven-phases-max
pada 3 Jun 2015
@seven-fase-max
Saya akan berpikir codepen akan membuat ini jelas, tetapi tidak ada masalah sama sekali.
Terimakasih atas infonya!
alenb
pada 3 Jun 2015
Hari ini masih tidak berfungsi dengan instalasi default less (menggunakan npm).
Saya harus menggunakan:
min-height: ~"calc(100% - 262px)"; //calc(100% - 262px);
Saya tidak tahu apakah itu normal, karena bug ditandai "ditutup", tetapi hanya ingin memberi tahu Anda.
rkyoku
pada 8 Apr 2016
@RenaudParis --strict-math
seven-phases-max
pada 8 Apr 2016
Oke saya akan mencobanya, terima kasih! Tapi bukankah akan lebih baik kalau itu dengan
bawaan? Karena itu cukup mengejutkan, ketika Anda tidak tahu tentang ini
parameter.
Terima kasih!
Le ven. 8 rata-rata 2016 20:48, pemberitahuan Max [email protected] a
écrit:
@RenaudParis https://github.com/RenaudParis --strict-math
http://lesscss.org/usage/#command -line-usage-strict-math—
Anda menerima ini karena Anda disebutkan.
Balas email ini secara langsung atau lihat di GitHub
https://github.com/less/less.js/issues/974#issuecomment -207553212
rkyoku
pada 8 Apr 2016
Tapi bukankah lebih baik jika itu secara default?
Menjadikannya sebagai default akan merusak banyak basis kode Less yang ada. Suatu ketika (di ~ v1.4.0 ) sebenarnya ada upaya untuk menjadikannya default, tetapi kemudian dibalik karena kompatibilitas mundur yang lama... Metode yang lebih baru dan tidak terlalu mengganggu dikembangkan di #1880 (tetapi belum dilaksanakan).
seven-phases-max
pada 9 Apr 2016
Oke, terima kasih telah meluangkan waktu untuk menjelaskannya kepada saya Max!
Le sam. 9 rata-rata 2016 13:46, pemberitahuan Max [email protected] a
écrit:
Tapi bukankah akan lebih baik kalau itu dengan
bawaan?Menjadikannya sebagai default akan merusak banyak basis kode Less yang ada. Satu kali
(di ~v1.4.0) sebenarnya ada upaya untuk menjadikannya default, tapi
kemudian dibalik karena kompatibilitas mundur lama... Yang lebih baru,
metode yang kurang mengganggu dikembangkan di # 1880
https://github.com/less/less.js/issues/1880 (tetapi tidak diimplementasikan
belum)).—
Anda menerima ini karena Anda disebutkan.
Balas email ini secara langsung atau lihat di GitHub
https://github.com/less/less.js/issues/974#issuecomment -207776654
rkyoku
pada 9 Apr 2016
Saya telah memecahkan ini:
.calc(<strong i="6">@prop</strong>, @val) {
@{prop}: ~"calc(~'@{val}')";
@{prop}: ~"-moz-calc(~'@{val}')";
@{prop}: ~"-webkit-calc(~'@{val}')";
@{prop}: ~"-o-calc(~'@{val}');"
}
.calc(width, "80% - 36px");
Ketika saya menggunakan command line itu benar . Hanya less-loader yang tidak benar. Jadi saya menemukan solusi ini di stackoverflow
Saya menyalinnya ke kode saya, Sayangnya itu juga tidak benar. Jadi saya memodifikasi sesuatu. Berhasil!
Sayangnya, baris perintah tidak benar!!😂 😂 😂
mqliutie
pada 1 Sep 2016
Tidak yakin mengapa masalah ini ditutup. Tidak masuk akal bahwa Less akan mengubah perilaku CSS asli.
vincentmorneau
pada 3 Nov 2016
... Lebih sedikit akan mengubah perilaku CSS asli.
Itu tidak akan terjadi. Cukup setel --strict-math=on (tidak diaktifkan secara default karena kompatibilitas dengan sejumlah besar proyek Less tergantung pada --strict-math=off , ditambah beberapa pertimbangan yang disebutkan di #1880).
seven-phases-max
pada 4 Nov 2016
Dalam tema UIkit 3 saya menggunakan ini di my_theme.less :
height: ~"calc(100vh - 20px)";
Dan itu berhasil.
oshihirii
pada 6 Agu 2017
Ini bekerja untuk saya ketika menulis dalam file *.less https://github.com/less/less.js/issues/974#issuecomment -9229470
Terima kasih @lukeapage ! 🥇
quytm2239
pada 16 Okt 2017
Hai @mqliutie terima kasih telah menambahkan saran mixin untuk calc, tapi, ada tambahan ~ di Mixin Anda yang merusak kompilasi:
campurannya harus
.calc(<strong i="8">@prop</strong>, @val) {
@{prop}: ~"-webkit-calc('@{val}')";
@{prop}: ~"-moz-calc('@{val}')";
@{prop}: ~"calc('@{val}')";
}
Masukan sebagai berikut:
.calc(lebar, "100% - 60px");
Keluaran sebagai berikut:
lebar: calc(100% - 60px);
ciaranlp
pada 19 Okt 2017
Kenapa masalah ini ditutup?! Ini tidak tetap.
Saya masih mendapatkan calc(30%) ketika saya menulis calc(50% - 20px) . Ini tidak pernah diinginkan oleh siapa pun. Terlepas dari kenyataan bahwa menghitung secara membabi buta dengan unit yang berbeda adalah salah , itu harus membiarkannya apa adanya dalam calc(), kecuali jika dapat dihitung dengan keandalan 100% (misalnya unit yang sama). Saya menggunakan KURANG 2.7.3.
Silakan buka kembali masalah ini.
thany
pada 25 Jan 2018
@thany
Lihat komentar ini, mereka menjelaskan bagaimana ini bukan masalah, sebanyak pengaturan default pemrosesan matematika adalah produk sampingan dari sejarah, dan Anda selalu dapat mengubah pengaturan default.
https://github.com/less/less.js/issues/974#issuecomment -207553212
https://github.com/less/less.js/issues/974#issuecomment -207776654
jonjohnjohnson
pada 25 Jan 2018
@jonjohnjohnson Itu hanya menyatakan masalahnya lagi. Jika mode ketat memperbaikinya (belum mencoba, seharusnya tidak perlu mengaktifkan semua jenis flag nondefault untuk mengatasi bug) maka itu harus diaktifkan secara default.
Tidak peduli bagaimana Anda mengatakannya, masalah ini tidak diperbaiki dengan definisi apa pun.
thany
pada 26 Jan 2018
@thany Saya hanya mencoba membantu Anda memahami bahwa pengembang memutuskan itu bukan masalah menurut mereka. Komentar tersebut tidak hanya menyatakan kembali masalah, mereka menggambarkan sikap pengembang tentang masalah tersebut. Semoga beruntung.
jonjohnjohnson
pada 26 Jan 2018
@thany
maka itu harus aktif secara default.
Tidak mungkin karena ini akan segera menghancurkan jutaan proyek di luar sana. Jadi, jika Anda memperlakukan perilaku default sebagai masalah, cukup atur opsi yang didokumentasikan dan selesai. Dengan definisi apapun.
Kenapa masalah ini ditutup?!
Karena diskusi terkini tentang cara meningkatkan perilaku default ada di sini .
seven-phases-max
pada 26 Jan 2018
@thany Sebagai @seven-phases-max, jika Anda ingin melihat ini diselesaikan, berkontribusi #1880. Saya pikir solusinya sudah ada, tetapi belum ada cukup pertimbangan masyarakat untuk mengambil keputusan yang siap untuk diterapkan. Ini adalah utas yang panjang, tetapi itulah yang diperlukan untuk menemukan solusi: meninjau proposal dan menimbang dalam satu atau lain cara. Dan kemudian: seseorang untuk mengambil pekerjaan untuk diimplementasikan.
matthew-dean
pada 27 Jan 2018
width: 15%;
height: ~"calc(width)";
cara membuat tinggi = lebar
xiaomizhou66
pada 18 Nov 2018
@xiaomizhou66
Itu tidak ada hubungannya dengan KURANG, atau dengan masalah ini. Ini murni pertanyaan CSS. Silakan cari sesuatu seperti "css keep aspek" dan Anda akan menemukan beberapa jawaban.
thany
pada 26 Nov 2018
Jadi ini masih rusak. calc(100vh - 138px) menjadi -38px.
willatathena
pada 15 Mar 2019
@willatathena
Jika Anda mengalami masalah ini dengan Less 3.x, harap buat laporan bug terpisah.
Untuk versi Kurang sebelumnya, ini adalah perilaku yang diharapkan secara default (baca posting di atas untuk menemukan cara menanganinya).
seven-phases-max
pada 16 Mar 2019
Masalah terkait
yggi49
·
7Komentar
falkenhawk
·
5Komentar
heavyk
·
3Komentar
dotnetwise
·
5Komentar
xblakestone
·
3Komentar
Komentar yang paling membantu
mereka mungkin ditutup sebagai duplikat .. meskipun saya tidak dapat menemukan satu tentang calc .. lihat #146 #122 dan #915
solusi:
width: ~"calc(100% - @{id1width})";- perhatikan tanda kurung kurawal di sekitar variabel.Kami pindah ke sistem di mana hanya hal-hal di dalam tanda kurung yang akan dievaluasi untuk memperbaiki masalah ini.