Less.js: Tidak dapat membuat radius batas elips

saya ingin menambahkan masalah serupa / terkait yang terjadi dengan properti font saat mendeklarasikan ketinggian baris

.class {
    font: 13px/1.231 arial, helvetica, clean, sans-serif;
} 

itu harus tetap tidak berubah tetapi menjadi:
.class {
font: 10.560519902518276px arial, helvetica, clean, sans-serif;
}

dotless juga mengalami masalah ini (https://github.com/dotless/dotless/issues/16). Akan menyenangkan untuk mencapai kesepakatan bagaimana melanjutkan di keduanya.

Solusi paling sederhana yang berhasil di luar kotak hari ini adalah membungkusnya dalam string literal.

 font: ~"13px/1.231 arial, helvetica, clean, sans-serif";

atau bahkan

 font: ~"13px/1.231" arial, helvetica, clean, sans-serif;

Saya mengerti bahwa salah satu tujuan dari less adalah agar kompatibel dengan sintaks CSS normal. Pekerjaan di sekitar melanggar aturan ini.

Saya memahami rasa frustrasi Anda. Saya tidak dapat melihat solusi mudah antara aritmatika Less dan properti CSS tertentu. Misalnya, bagaimana jika Anda benar-benar ingin menentukan bahwa font berukuran setengah, yaitu

 <strong i="6">@example</strong>: 24pt;
 .foo {
     font: normal @example/2 sans-serif;
 }

Sesuatu harus berkompromi. Memang, Anda dapat mengubah Lebih sedikit agar konversi apa pun dibungkus.

 font: normal (@example/2) sans-serif;

tapi itu akan merusak dan membuat lebih verbose apapun Less stylesheet yang ada untuk semua kasus hanya untuk menghindari kasus yang tidak umum untuk deklarasi steno font dan radius batas. Opsi lain jika Anda khawatir tentang CSS yang ada, Anda dapat mengimpor CSS yang ada ke file Less Anda:

 <strong i="13">@import</strong> "legacy.css";

Dalam kasus ini, impor berhasil, tetapi tidak mengubah atau mengonversi CSS.

Sekali lagi saya memahami sepenuhnya kekhawatiran Anda bahwa Less bukanlah superset ketat dari CSS, tetapi saya tidak memiliki ide yang jelas lebih baik. Apakah Anda memiliki solusi potensial untuk masalah sintaksis ini?

: +1: tentang masalah ini dari saya, tetapi saya juga tidak yakin akan cara yang elegan untuk menyelesaikannya yang tidak memerlukan pelolosan CSS yang valid atau memerlukan tanda kurung untuk memicu penghitungan.

@agatronic @cloudhead Saya sedang mengerjakan perbaikan untuk ini, tetapi saya ingin mendapatkan masukan Anda tentang bagaimana menurut Anda hal ini harus ditangani sebelum saya melanjutkannya lebih jauh. SASS dan Stylus keduanya menangani ini dengan hanya mengizinkan pembagian di dalam tanda kurung, semua operasi matematika lainnya dapat dilakukan di luar tanda kurung. Metode ini juga akan mencegah implementasi garis miring oleh W3C di masa mendatang, dan menghilangkan kebutuhan pengurai Rasio dan Singkatan. Beginilah cara saya pertama kali cenderung memperbaiki masalah. Apakah ini solusi yang masuk akal untuk Anda berdua?

Perhatikan bahwa bug ini juga merusak singkatan latar belakang CSS3 yang menggunakan garis miring untuk memisahkan posisi latar belakang (yang dapat berupa kata kunci atau dimensi) dari ukuran latar belakang. Sebagai contoh:

.foo {
    background: url(image.png) center / 1px 100px;
}

Juga ping @matthewdl @Synchro

Saran sebelumnya adalah bahwa '/' membagi dan '/' adalah rasio. Akan lebih baik untuk mendapatkan masukan dari @cloudhead karena meskipun akan sangat menyenangkan untuk disortir, cukup menakutkan jika merusak perilaku yang ada ...

@cloudhead menanggapi melalui twitter, agak minimal: "solusi paren tampaknya layak"

Masalah dengan solusi spasi adalah masih merusak CSS yang benar-benar valid. Sayangnya, satu-satunya cara untuk mengatasi hal ini secara efektif tanpa merusak perilaku yang ada adalah dengan terus mengizinkan CSS lama biasa gagal mengurai dengan benar.

bagaimana dengan opsi "sementara" sehingga orang dapat menikmati keduanya untuk masa tenggang?

atau

kita harus melakukan rilis sebelum menggabungkan perbaikan ini dan menaikkan nomor versi utama ke 1.4 (dan mudah-mudahan menambahkan variabel dalam penyertaan dan interpolasi nama properti, dll.

Saya pikir ini pasti akan menjadi perbaikan yang harus menjadi bagian dari rilis yang lebih besar, karena akan merusak perilaku yang ada. Saya tidak yakin solusi sementara (jika kita berbicara tentang spasi) bahkan masuk akal mengingat itu masih dapat merusak kode yang ada, dan tidak memberikan transisi bersih apa pun ke dalam solusi permanen. Ini sepertinya situasi di mana menarik pemicu pada rilis adalah opsi terbaik, dan orang-orang dapat diperingatkan melalui Ubah Log dan Dokumen.

Maksud saya bendera untuk menjaga perilaku yang ada .. tapi saya setuju dengan Anda.

Apakah Anda memiliki hak berkomitmen? Kalaupun begitu mungkin yang terbaik adalah pull request jadi kita
dapat berkoordinasi dengan rilis (kami tidak memiliki rencana yang saya ketahui)

Secara pribadi, saya pikir kita harus menelan pil dan mulai membuat daftar operasi matematika tanpa tanda kurung sebagai fitur yang tidak digunakan lagi. Ada terlalu banyak kasus ketika bentrok dengan CSS valid. @agatronic - Layak untuk berdiskusi melalui Skype dengan @cloudhead (atau di tempat lain), dan saya benci merusak perpustakaan LESS siapa pun, tetapi LESS tidak boleh merobek dan merusak CSS yang tidak dimaksudkan oleh penulis. Pengurai LESS harus memberikan sinyal yang jelas bahwa operasi matematika diperlukan, dan tanda kurung adalah cara yang baik untuk melakukannya. Dalam tanda kurung: LAKUKAN MATEMATIKA. Tidak dalam tanda kurung: TINGGALKAN SENDIRI.

Sebagai fase 1 untuk mengurangi pukulan, kita bisa BERHENTI mengerjakan matematika HANYA dalam kasus di mana pembagiannya ambigu misalnya di tempat-tempat di mana garis miring "/" adalah token yang valid dalam nilai itu. Jadi, dalam kasus radius perbatasan, jika LESS tidak yakin, biarkan LESS saja. Jika penulis yakin mereka menginginkan pembagian antara dua angka, mereka dapat menimpa perilaku default dengan menambahkan tanda kurung.

Tapi, seperti saat ini, LESS didokumentasikan sebagai "valid CSS = valid LESS", dan dengan bug ini, bukan itu masalahnya. Ini salah menulis ulang CSS yang valid, yang membuatnya menjadi bug yang jelas. Masalahnya adalah ini JUGA operasi matematika yang terdokumentasi dengan jelas. Keduanya bertentangan, dan tampaknya jelas bagi saya bahwa kasus kedua adalah kasus yang harus diubah, dengan CSS yang dipertahankan.

Saya melihat @ttfkam dan @ mlms13 mengatakan hal yang sama. Saya pikir naluri mereka benar, dan saya akan sangat memilih bahwa LESS memulai migrasi lambat ke tanda kurung sebagai persyaratan untuk operasi.

@septianjoko_ +1

@agatronic : Saya tidak memiliki hak komitmen, namun saya setuju bahwa ini harus dilakukan melalui PR untuk meninjau kode dan potensi koordinasi rilis.

@ Matthewdl : Untuk keperluan PR saya, saya mulai bekerja hanya mengizinkan pembagian dalam tanda kurung. Anggap saja sebagai ukuran stop-gap untuk mencegah LESS melanggar CSS yang valid. Ini tidak terbatas pada aturan tertentu, jadi di mana pun garis miring ditemukan dan tidak dibungkus dalam tanda kurung, itu akan menjadi keluaran sebagai pengencer literal. Setelah selesai, saya akan melihat lebih banyak tentang cara membatasi semua operasi agar hanya dilakukan dalam tanda kurung.

Oke, saya sudah membahas ini dengan @cloudhead di Skype. Dia setuju, jadi inilah rencananya:

1) Pada rilis berikutnya, dokumentasi akan diperbarui bahwa matematika di luar tanda kurung sudah tidak digunakan lagi. Dokumentasi akan mendemonstrasikan operasi matematika dalam tanda kurung. Namun, matematika non-divisi di luar tanda kurung tetap harus dikompilasi (untuk rilis itu).

2) Pada rilis berikutnya setelah langkah # 1, SEMUA operasi matematika akan membutuhkan tanda kurung. Dokumentasi akan berubah dari "deprecated" menjadi "not support" (atau sesuatu seperti itu - cara kami mengkomunikasikannya dapat diperhalus).

Kedengarannya bagus? Ini berarti kita harus mulai merencanakan apa pencapaian untuk 2 rilis berikutnya, tetapi itu di luar cakupan utas ini di sini.

Sebenarnya, untuk memperjelas, dokumentasi dapat diperbarui SEKARANG untuk mengatakan bahwa matematika di luar tanda kurung sudah tidak digunakan lagi, karena matematika IN dalam kurung berfungsi dengan baik. Jadi itu benar-benar Langkah 0: Kami memperbarui dokumen sekarang untuk memberi tahu orang-orang a) Matematika harus dalam tanda kurung, dan jika tidak melakukannya dapat rusak di masa mendatang, b) Peragakan semua matematika dalam tanda kurung.

Bekerja untuk saya! : +1:

jadi mungkin @dcass harus melakukan pull request
https://github.com/cloudhead/lesscss.org

dan kemudian kita harus merepotkan @cloudhead untuk berkomitmen atau memberi kita hak komitmen untuk proyek itu?

Oh iya. Ya, saya akan mencoba mengingat untuk mengganggunya hari ini tentang hal itu.

Pada 21-08-2012, pukul 5:19 pagi, Luke Page [email protected] menulis:

jadi mungkin @dmcass https://github.com/dmcass harus melakukan permintaan tarik
melawan
https://github.com/cloudhead/lesscss.org

dan kemudian kita harus merepotkan @cloudhead https://github.com/cloudhead
berkomitmen atau memberi kami hak berkomitmen untuk proyek itu?

-
Balas email ini secara langsung atau lihat di
Gi tHubhttps: //github.com/cloudhead/less.js/issues/146#issuecomment -7899194.

Saya telah membuka PR untuk memperbarui dokumen di cloudhead / lesscss.org # 29

Diperbaiki pada master untuk 1.4.0

Ini akan menjadi seperti itu di 1.4.0

Lihat alfa di less2css.org

Bug ini masih terjadi di 1.4.1 jika Anda menggunakan CSS berikut:
batas- radius: 0 0 100% 100% / 0 0 24px 24px;

Ini menghasilkan:
radius batas: 0 0 100% Tak Terhingga% 0 24 piksel 24 piksel;

(Saya mencobanya di http://less2css.org)

@rubious apakah Anda mengaktifkan matematika ketat di menu opsi? Ini dinonaktifkan secara default dan memberikan perilaku lama.

Oke itu berfungsi, namun saya menggunakan LiveReload dan opsi ini sepertinya tidak diaktifkan di sana.

Maaf itu satu-satunya cara untuk memperbaikinya .. baik aktifkan matematika ketat jadi semua matematika hanya diselesaikan jika itu adalah tanda kurung ATAU

border-radius:0 0 100% 100% ~"/" 0 0 24px 24px;