Edit Design CSS Anda dalam Browser dengan CSS George
Pernahkah anda mahu buat pengeditan langsung dalam pelayar anda tanpa beralih ke fail CSS anda? Satu penyelesaian ialah Alat Pembangun Chrome tetapi beberapa pemaju lebih suka aliran kerja yang lebih mudah.
Di sinilah CSS George masuk. Ini percuma alat pengeditan dalam pelayar kerja-kerja di atas KURANG dan ia dimulakan oleh a fail JavaScript mudah.
Kebanyakan pemaju lebih suka a editor berasaskan pelayar kerana tidak semua orang menggunakan precompiler kurang. Tetapi CSS George tidak berjalan di persekitaran yang kurang yang boleh dipasang dengan pantas melalui npm.
Jika anda telah memasang npm maka anda boleh menjalankan kod mudah ini tambah fail sumber kepada projek semasa anda:
npm install --save-dev css-george
Atau anda boleh tarik George.js fail dari GitHub di mana ia dihoskan bersama semua fail sumber lain. Seluruh projek adalah percuma dan sumber terbuka supaya anda boleh muat turun salinan lengkap dari GitHub jika anda tidak mahu menggunakan npm.
Dengan .js fail yang ditambahkan ke pengepala laman anda, anda boleh mula melaksanakan fungsi George betul dari penyemak imbas. Untuk buka tetingkap editor, klik kekunci tilde yang boleh diakses dari Shift + 'yang terletak di sudut kiri atas kebanyakan papan kekunci. A tetingkap baru sepatutnya kelihatan seperti ini:
Dari skrin ini, anda boleh edit pembolehubah kurang digunakan untuk segala-galanya dari warna ke saiz fon atau keluarga font.
Di sinilah plugin KURANG menjadi keperluan kerana anda perlu memberitahu CSS George pembolehubah yang termasuk. Sebaik sahaja mereka ditubuhkan, anda boleh saja buka editor pelayar CSS George dan pergi ke bandar.
Saya harap jelas bahawa alat ini tidak patut disertakan pada masa runtuh. Kecuali anda secara khusus mahu membiarkan pelawat edit warna halaman dan gaya, yang pada amnya bukan idea yang baik. Tetapi untuk ujian tempatan, CSS George adalah alat yang jarang berlaku yang menawarkan utiliti untuk semua pemaju frontend.
Awak boleh melihatnya secara langsung pada halaman demo CSS George, atau muat turun salinan lengkap melalui npm atau dari repo GitHub.
