Bekerja Efektif dengan KURANG Kiat dan Alat

Dalam tutorial kami sebelumnya, kami telah belajar cara menggunakan KURANG secara praktis dengan menggunakan aplikasi seperti ChrunchApp untuk mengkompilasi kode. Kali ini kita akan membahas beberapa tips praktis yang akan dapat meningkatkan kinerja dan produktivitas kita ketika menyusun sintaks KURANG. Kita akan mengatur desktop / lingkungan kerja kita dengan mengaktifkan penyorotan sintaks untuk editor kita saat ini, menggunakan alat kompiler otomatis dan memanfaatkan Mixins yang telah ditetapkan, kemudian menyinkronkan semuanya bersama-sama.

Nah, jika Anda siap, mari kita mulai.

Penolakan: Kiat yang dijelaskan di bawah ini berasal dari pengalaman saya sehari-hari sebagai perancang web. Jadi, sebelum kita membahasnya lebih jauh, saya ingin menguraikan bahwa tipsnya mungkin cocok untuk beberapa desainer dan bukan yang lain; sama seperti tip lain yang Anda temukan di Web. Meskipun demikian, saya harap Anda dapat menuai sesuatu yang berguna dari tips berikut.

1. Penyorot Kode

Seperti yang kami sebutkan sebelumnya, kami telah memperkenalkan Anda ke ChrunchApp. Namun, aplikasi ini mungkin bukan preferensi setiap perancang web; karena setiap desainer memiliki lingkungan kerja mereka sendiri, termasuk editor kode pilihan mereka.

Daripada menginstal editor kode lain, Anda sebenarnya masih bisa menggunakan kode Anda saat ini dan mengaktifkan penyorotan sintaksis di dalamnya. Jadi, dalam posting ini, saya akan membagikan beberapa tips untuk menambahkan sorotan kode KURANG menjadi 2 editor teks terkenal: Teks Luhur 2 dan Notes++.

Teks Luhur 2

Editor ini adalah pilihan saya saat ini untuk membantu saya menulis kode. Aplikasi ini tersedia untuk Windows, Linux dan OSX, jadi apa pun OS Anda, Anda masih bisa mengikuti tip ini.

Sekarang, mari kita unduh dari situs resminya dan coba editor ini. Kemudian, baca instruksi berikut untuk mengaktifkan penyorotan warna KURANG di dalamnya.

catatan: Pastikan Anda telah membaca lisensi sebelum mengunduh, karena versi gratis hanya dimaksudkan untuk evaluasi.

Instal Paket Konsol

Pertama, buka Sublime Text 2 Anda, dan tampilkan Konsol dari menu ini Lihat> Tampilkan Konsol

Kemudian, salin dan tempel baris perintah berikut ke Konsol, lalu tekan Enter untuk menginstal kontrol paket dari wBond.net:

impor urllib2, os; pf = "Package Control.sublime-package"; ipp = sublime.installed_packages_path (); os.makedirs (ipp) jika tidak os.path.exists (ipp) lain Tidak ada; urllib2.install_opener (urllib2.build_opener (urllib2.ProxyHandler ())); buka (os.path.join (ipp, pf), 'wb') .write (urllib2.urlopen ('http://sublime.wbond.net/'+pf.replace (",'% 20 ')). baca ()); cetak 'Silakan restart Teks Sublime untuk menyelesaikan instalasi'

Ini Paket Konsol akan membantu kami untuk menginstal paket sorot.

Menginstal Paket Penyorotan KURANG

Nyalakan kembali Sublime Text 2 dan perlihatkan Command Palette dari menu ini Alat> Palet Perintah. Tunggu hingga daftar paket sudah dimuat. Lalu, ketik Instal Paket untuk mencari dan memuat repositori paket.

Kemudian, cari paket KURANG dari daftar repositori dan tekan Enter.

Tunggu sebentar Sublime Text 2 untuk mengunduh dan menginstal paket sampai pemberitahuan berikut muncul di bilah status.

Pergi ke menu Lihat> Sintaks, Anda akan melihat KURANG dalam daftar. Ini berarti bahwa Sublime Text 2 mendukung .kurang dan sintaks KURANG Anda juga harus memiliki highlight warna yang tepat sekarang.

Notes++

Notepad ++ adalah editor kode Open Source yang Gratis, dan memiliki banyak plugin yang berguna untuk memperluas fungsinya. Itu juga banyak digunakan oleh banyak desainer web / pengembang terutama mereka yang bekerja dengan sistem operasi Windows. Jadi, saya memutuskan untuk memasukkan tip untuk menambahkan highlight teks KURANG untuk itu.

Instal KURANG-sorot di Notepad++

Mengaktifkan highlight warna KURANG di Notepad ++ cukup mudah.

Pertama unduh paket KURANG untuk Notepad ++ dari tautan ini (userDefineLang_LESS.xml). Lalu, Pergi ke Lihat> Dialog yang Ditentukan Pengguna.

Kotak sembulan berikut di bawah ini akan muncul. Klik tautan Impor… tombol dan cari lokasi unduhan Anda .xml mengajukan. Kemudian, restart Notepad++.

Buka file .less Anda dan buka menu Bahasa. Anda sekarang harus melihat KURANG disertakan. Pilih itu untuk menerapkan penyorotan warna pada sintaks KURANG Anda.

Sumber Daya Lebih Banyak

Ada banyak editor lain di pasaran. Jadi, di sini kami menyertakan beberapa tautan yang berguna untuk Anda jika Anda tidak menggunakan salah satu editor di atas.

Adobe DreamWeaver

Tidak diragukan lagi, Dreamweaver memiliki basis pengguna yang besar. Ini tersedia untuk Mac dan Windows. Jadi, jika Anda menggunakan editor ini, ini adalah salah satu sumber yang bagus untuk menginstal highlight KURANG dalam Adobe DreamWeaver.

Coda

Jika Anda menggunakan Mac Anda mungkin tahu Coda, editor ini adalah salah satu yang paling populer di kalangan pengguna Mac. Dan, di sini adalah bagaimana Anda dapat menginstal KURANG di Coda.

Geany

Ini adalah salah satu editor kode yang lebih populer di kalangan pengguna Linux. Beberapa komputer di kantor saya yang berjalan di Linux juga menggunakan Geany. Jadi, jika Anda menggunakannya juga, Anda dapat memasukkan highlight KURANG dengan mengikuti instruksi ini di SuperUser.com

2. KURANG Kompiler

Berbeda dengan ChrunchApp yang memiliki kompiler KURANG bawaan, editor lain tidak akan memilikinya secara default. Meskipun ada beberapa cara untuk memasukkannya, tetapi itu agak teknis untuk pengguna umum. Jadi solusi terbaik yang saya punya adalah melakukan kompilasi menggunakan alat berikut: Tanpa winner atau KURANG.app. WinLESS adalah kompiler yang dirancang untuk Windows, sedangkan LESS.app dibuat untuk OSX.

Alat-alat ini dapat mengkonversi kode KURANG kami menjadi CSS statis secara otomatis saat kami menyimpan file dan melaporkan secara langsung jika ada kesalahan dalam kode. Baiklah, saya tunjukkan betapa sedikit alat ini:

Pertama, saya ingin mengunduh WinLESS dan menginstalnya.

Klik tombol Tambah folder dan temukan direktori tempat Anda meletakkan .kurang file (saya menganggap Anda sudah membuat setidaknya satu). Setelah Anda menambahkan satu; WinLESS akan memindai dan menemukan semuanya .kurang file dan menunjukkan Anda pada daftar.

Pergi ke menu File> Pengaturan, dan pastikan opsi ini dicentang;

• Kompilasi file secara otomatis saat disimpan
• Tampilkan pesan pada kompilasi yang berhasil

Kami juga dapat mengatur folder keluaran, jika kami ingin menyimpannya di tempat lain. Tetapi, dalam contoh ini kita akan membiarkan opsi ini apa adanya; yang berarti file output akan disimpan dalam direktori yang sama dengan .kurang mengajukan.

Bukalah .kurang file dari direktori yang ditambahkan, buat beberapa perubahan dan Simpan.

WinLESS akan memberi tahu Anda ketika file telah berhasil dikompilasi .css atau jika ada kesalahan dalam kode. Dengan cara ini Anda dapat memeriksa output .css secara langsung, daripada harus menunggu kode untuk menyelesaikannya.

Jika Anda menggunakan Mac, Anda dapat menggunakan LESS.app yang memiliki fungsi yang sama dengan WinLESS.

Campuran Preset

Dalam praktik desain web modern saat ini, kami akan menggunakan properti CSS3 seperti Gradient, Shadow atau Border Radius yang terlihat seperti ini:

-webkit-border-radius: 3px; -moz-border-radius: 3px; batas-jari-jari: 3px;

atau

latar belakang: -moz-linear-gradient (atas, # f0f9ff 0%, # a1dbff 100%); latar belakang: -webkit-linear-gradient (atas, # f0f9ff 0%, # a1dbff 100%); latar belakang: -o-linear-gradient (atas, # f0f9ff 0%, # a1dbff 100%); latar belakang: -ms-linear-gradient (atas, # f0f9ff 0%, # a1dbff 100%); latar belakang: linear-gradient (atas, # f0f9ff 0%, # a1dbff 100%);

Dalam tutorial kami sebelumnya, kami telah membuat beberapa Mixin untuk menyederhanakan sintaks ini. Untungnya, beberapa orang di komunitas desain web benar-benar cukup murah hati untuk meluangkan waktu mereka untuk mengkompilasi Mixin yang berguna ini, sehingga kita tidak perlu mengkompilasinya sendiri dari awal..

Dan, salah satu favorit saya adalah Elemen Kurang yang berisi banyak aturan preset CSS3 yang berguna. Dengan demikian, kami sekarang menulis lebih sedikit baris kode dari awalan vendor yang membosankan.

Baiklah, sekarang, mari kita lihat bagaimana semua tips di atas dapat sangat membantu.

Menyatukan Mereka

Dalam contoh ini saya akan membuat tombol tautan sederhana. Pertama saya ingin membuat dokumen HTML baru dan meletakkan mark-up berikut:

     Klik saya 

Membuat tanpa style sebagai stylesheet KURANG utama kami, simpan di folder yang sama dengan dokumen HTML kami dan tambahkan folder ke WinLESS.

Impor tanpa elemen kami telah mengunduh sebelum menggunakan sintaks ini:

@ impor "elements.less";

Sekarang, kita bisa menggunakan semua Mixin yang disediakan dari elements.less like .gradien, .bulat, dan .berbatasan. Saya yakin nama Mixins cukup jelas.

Selanjutnya, tuliskan aturan KURANG di bawah ini, di lembar gaya Anda. Dan, simpan sekali lagi

 a display: inline-block; padding: 10px 20px; warna: # 555; teks-dekorasi: tidak ada; .bw-gradient (#eee, 240, 255); .bulat; .bordered; &: hover .bw-gradient (#eee, 255, 240);  

Sejak kami .kurang file telah ditambahkan ke WinLESS, maka secara otomatis akan dikompilasi menjadi .css. Sekarang mari kita lihat hasilnya.

Yah, itu tidak terlalu buruk, mengingat tombol ini dibuat dengan garis lebih sedikit daripada yang dibutuhkan. Dan, inilah CSS statis aktual yang dihasilkan:

 a display: inline-block; padding: 10px 20px; warna: # 555; teks-dekorasi: tidak ada; latar belakang: #eeeeee; latar belakang: -webkit-gradient (linear, kiri bawah, kiri atas, color-stop (0, # f0f0f0), color-stop (1, #ffffff)); latar belakang: -ms-linear-gradient (bawah, # f0f0f0 0%, # f0f0f0 100%); latar belakang: -moz-linear-gradient (tengah bawah, # f0f0f0 0%, #ffffff 100%); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: kotak-padding; border-top: 1px #eeeeee solid; border-left: 1px #eeeeee solid; border-right: 1px #eeeeee solid; border-bottom: 1px #eeeeee solid;  a: hover background: #eeeeee; latar belakang: -webkit-gradient (linear, kiri bawah, kiri atas, color-stop (0, #ffffff), color-stop (1, # f0f0f0)); latar belakang: -ms-linear-gradient (bawah, #ffffff 0%, #ffffff 100%); latar belakang: -moz-linear-gradient (tengah bawah, #ffffff 0%, # f0f0f0 100%); 

Singkatnya

Berikut ini ringkasan singkat dari apa yang telah kita bahas dalam posting ini:

• Dengan mengaktifkan highlight sintaks di editor kami saat ini, kami tidak perlu menginstal editor tambahan hanya untuk membuat sintaks KURANG; ini dapat menghemat ruang / memori pada disk Anda.
• Kami juga tidak perlu lagi mengunduh dan menautkan Perpustakaan LESS.js ke bagian kepala HTML kami seperti yang kami lakukan di tutorial terakhir kami. Dengan cara ini, dokumen HTML kami tetap bersih dan rapi.
• Menggunakan alat kompiler seperti WinLESS dan LESS.app dapat menghasilkan output CSS statis secara instan. Jadi, jika ada sesuatu yang salah dengan sintaksisnya, kita bisa segera memeriksanya.
• Preset Mixins seperti LESS Elements adalah sahabat kami. Ini benar-benar dapat menghemat waktu kita ketika mengkompilasi properti CSS3 yang membosankan.

.