Apakah ada alat yang mengubah css menjadi less.css?

21

Saya memiliki file CSS yang cukup besar, yang ingin saya konversi menjadi kurang. Ketika saya menulis CSS, saya tidak tahu less.css, tapi sekarang saya masih ingin menggunakan CSS lama saya.

Apakah ada alat yang dapat membantu saya untuk mengubahnya secara otomatis?

css js-coder
sumber
lihat hasil edit saya di bawah.
fatnjazzy
Anda harus memeriksa respons @Simone Carletti dan mungkin memperluas apa yang sebenarnya Anda tanyakan. Mungkin tidak ada "konversi" yang sebenarnya diperlukan, di luar penggantian nama file Anda.
Su '
Menarik, tapi saya ingin tahu apakah ada baiknya menambahkan 33KB kode JS (less.js) untuk mengurangi ukuran file CSS.
Marco Demaio
1
Saya tidak menggunakan kompiler JavaScipt jelas. Dan ukuran CSS bukan alasan mengapa saya menggunakannya. Maintabilitas adalah alasannya. :)
js-coder

Jawaban:

17

Saya sebenarnya menemukan sesuatu sekarang: http://leafo.net/lessphp/lessify/

Itu formasi dasar, misalnya:

#header {
/* ... */
}

#header p {
/* ... */
}

untuk

#header {
/* ... */
p {
/* ... */
}
}
js-coder
sumber
15

Sebenarnya, Anda tidak memerlukan alat konversi apa pun untuk mulai bekerja dengan KURANG. Sintaks KURANG kompatibel dengan CSS . Ini berarti setiap file CSS juga file KURANG yang valid.

Cukup ambil CSS Anda dan ganti namanya menjadi file KURANG. Kemudian gunakan fitur-fitur khusus KURANG bersama dengan perubahan Anda. Semakin banyak Anda memperbarui file, semakin banyak Anda dapat menggunakan fitur KURANG.

Saya melakukan hal yang sama untuk SCSS dan proyek yang sangat besar dengan 10 file CSS. Hampir tidak mungkin (dan sangat membuang waktu) untuk menulis ulang semua CSS dengan SCSS. Saya cukup menamainya, lalu setiap kali saya mengerjakan file CSS, saya menjalankan refactoring kecil pada kode untuk mengambil keuntungan dari mixin, variabel dan sebagainya.

Simone Carletti
sumber
Ini memunculkan poin yang sangat bagus. Jawaban sejauh ini tampaknya difokuskan pada bagian "konversi" dari pertanyaan, melakukan mixin, dll. Dan bukan hanya apakah file saat ini dapat digunakan dalam beralih ke alur kerja KURANG.
Su '
6

Pernahkah Anda melihat Least? Jauh lebih baik dalam mengkonversi CSS daripada Lessify. Secara khusus, Lessify tidak mengoptimalkan kelas Anda dengan sangat baik. Ini menyalin ulang browser ke semua mixin yang dihasilkan, menciptakan atribut yang berlebihan. Jelas masih dalam tahap percobaan. Utilitas tidak dapat menentukan semantik, sehingga mereka tidak dapat mengonversi nilai menjadi ekspresi, vars, atau campuran parametrik.

Least melakukan pekerjaan optimasi yang lebih baik dan tampaknya lebih fungsional. Bahkan menangani pseudoclasses untuk Anda:

http://toki-woki.net/p/least/

Alat-alat ini ideal untuk bekerja dengan file CSS yang sudah ada sebelumnya. Berikut adalah langkah-langkah yang saya rekomendasikan untuk mengonversi CSS menjadi KURANG (Pastikan Anda menyimpan salinan file CSS asli):

  1. Jika Anda bekerja dengan beberapa file CSS tambahan, gabungkan menjadi satu file CSS. Ini memastikan semuanya KURANGI dan dioptimalkan bersama.

  2. Jalankan kode CSS yang dihasilkan melalui utilitas pembersihan CSS online. Saya mendapatkan hasil yang baik dengan cleancss: http://www.cleancss.com/ . Ini akan menghapus markup asing dan berlebihan yang mungkin tidak ditangkap oleh konverter KURANG.

  3. Hapus @Media dan setel ulang gaya apa pun yang Anda miliki di file CSS. Mereka dapat menciptakan masalah atau memperkenalkan kemungkinan redudansi. Mungkin ide yang baik untuk menyimpan ulang dalam file terpisah.

  4. Rekatkan file CSS yang dihasilkan ke Least dan tonton the beast.

  5. Perkenalkan kembali layar dan @screen Anda.

  6. Sekarang setelah Anda selesai, buka masing-masing atribut dan temukan kandidat yang baik untuk refactoring dan mengubahnya menjadi variabel dan ekspresi KURANG. Atribut warna dan font CSS adalah yang paling mudah untuk diperhitungkan, pencarian global sederhana dan penggantian berfungsi dengan baik. Pada akhirnya, Anda dapat memutuskan apakah Anda ingin memecah satu file menjadi file logis yang lebih kecil. Anda mungkin menemukan bahwa proses tersebut menyebabkan Anda mengatur ulang file Anda dengan cara yang berbeda.

Saya bukan penulis Least, hanya seseorang yang mencari alat serupa dan memutuskan untuk memberi tahu dunia tentang hal itu.

Joel Rodgers
sumber
Apakah konverter itu tidak mengerti @import? Saya pikir KURANG mampu menguraikan @importpernyataan dan menggabungkan semua lembar gaya Anda ke dalam satu CSS ketika file KURANG Anda dikompilasi. Sepertinya membuang semua CSS Anda yang terorganisir dengan rapi ke dalam stylesheet raksasa tunggal untuk mengubahnya menjadi KURANG akan menjadi langkah mundur untuk pemeliharaan.
Lèse majesté
Mereka melakukannya, tetapi ingatlah bahwa alat ini ada online sehingga Anda harus memotong dan menempelkannya ke dalam bidang teks sehingga tidak akan memiliki akses ke stylesheet eksternal Anda.
Joel Rodgers
Ah, sebenarnya saya tidak mengklik tautannya. Saya berasumsi mereka adalah alat desktop. Itu masuk akal kalau begitu.
Lèse majesté
5

Saya tidak berpikir ada cara bagi konverter untuk mengetahui apa yang ingin Anda lakukan dengan banyak kode.

Misalnya, tidak perlu tahu variabel apa yang ingin Anda gunakan. Atau cara menghasilkan mixin atau fungsi.

Saya pikir dengan yang satu ini Anda harus melakukannya secara manual.

Jason Gennaro
sumber
Sepakat. Ada sejumlah kesimpulan dan pengetahuan tentang niat Anda yang diperlukan di sini bahwa komputer tidak cocok untuk itu. Anda dapat mengotomatisasi beberapa tugas (lihat tautan dari @dotweb) dan mungkin mengonsolidasikan hal-hal seperti nilai warna ke dalam variabel tunggal, tetapi mungkin itu saja.
Su '
Ya, tetapi konversi dari KURANG ke CSS adalah konversi 1 ke 1, jadi secara teoritis ada beberapa algoritma yang dapat membuat kode KURANG dioptimalkan dari CSS ... Seseorang hanya perlu menulisnya.
trusktr
Mixin bisa jalan baik, karena mudah bagi komputer untuk mengumpulkan dan mengelompokkan penyeleksi bersama-sama dan membuat sarang. Untungnya, ini adalah bagian yang paling membosankan dari konversi dan ini dapat dihitung (lihat jawaban saya). Apapun, mengingat sifat cascading CSS, itu dapat membuat berbeda dari CSS asli. Variabel dan ekspresi tidak mungkin. Komputer tidak dapat menentukan niat atau semantik. Bagaimana komputer mengetahui lebar itu: 400 di CSS sebenarnya lebar: pagewidth / 2 di KURANG? Konverter mungkin dapat mengubah warna dan font menjadi variabel.
Joel Rodgers
@ JoelRodgers, mengapa cascading nature dari CSS menyiratkan bahwa "decompiler" akan buggy? (Jelas sebuah decompiler mungkin buggy, tetapi pada prinsipnya tidak sulit untuk mengatakan apakah penataan ulang istilah akan mengubah semantik).
Peter Taylor
Saya sedang berbicara tentang deklarasi kelas dan atribut. Anda harus mendeklarasikannya dalam urutan yang sama persis jika tidak Anda akan mendapatkan hasil yang berbeda. Kesalahan salah, maksudku Nested Rules bukan mixin.
Joel Rodgers
3

Bagaimana dengan pencarian dan penggantian.

jika sudah color:#ffffffdan ingin mengubahnya@color

cukup cari color:#ffffffatau color : #ffffffganti dengan @color.

Saya biasanya tidak mempercayai alat ini.

atau Anda dapat menulis skrip PHP sangat sederhana yang menanganinya.

Pembaruan 1 :
Atau Anda dapat menggunakan http://nex-3.com/posts/96-scss-sass-is-a-css-extension yang mirip dengan lebih sedikit dan memiliki alat konverter.

fatnjazzy
sumber
Yap, saya sudah memikirkannya. Tapi ini file yang cukup besar, jadi saya ingin memastikan, ini akan menjadi cara termudah. ;) Pikirkan tentang mixin dll.
atau Anda dapat menulis skrip PHP sangat sederhana yang menanganinya.
fatnjazzy
1
Anda tidak akan dapat menemukan alat yang andal mengubah CSS murni menjadi menggunakan mixins KURANG.
Alex
Kamu benar. Variabel otomatis dan pencampuran tidak masuk akal.
0

Coba situs ini: css2less.cc

Itu mengubah CSS Anda menjadi KURANG saat Anda mengetik.

Desainer web
sumber