Bekerja dengan Berkesan dengan Tips dan Alat yang KURANG

Dalam tutorial terdahulu kami, kami telah belajar cara menggunakan KURANG secara praktikal dengan menggunakan aplikasi seperti ChrunchApp untuk menyusun kod. Kali ini kami akan meneruskan beberapa petua berguna yang akan dapat meningkatkan prestasi dan produktiviti kami semasa menyusun sintaks LESS. Kami akan menubuhkan persekitaran desktop / kerja kami dengan membolehkan penonjolan sintaks untuk editor semasa kami, menggunakan alat pengompilasi automatik dan menggunakan Mixet pratetap, kemudian menyegerakkan semuanya bersama-sama.

Nah, jika anda sudah bersedia, mari bermula.

Penafian: Petua yang dijelaskan di bawah ini berasal dari pengalaman hari ke hari sebagai pereka web. Jadi, sebelum kita melangkah lebih lanjut, saya ingin menggariskan bahawa tip mungkin sesuai dengan beberapa pereka dan bukan orang lain; sama seperti tip lain yang anda temukan di Web. Walau bagaimanapun, saya harap anda boleh menuai sesuatu yang berguna daripada petua berikut.

1. Penyusun Kod

Seperti yang telah disebutkan sebelumnya, kami telah memperkenalkan anda kepada ChrunchApp. Walau bagaimanapun, aplikasi ini mungkin bukan keutamaan pereka web; kerana setiap pereka mempunyai persekitaran kerja mereka sendiri, termasuk editor kod pilihan mereka.

Daripada memasang editor kod lain, anda sebenarnya boleh menggunakan salah satu semasa anda dan membolehkan sintaks yang menonjolkannya. Oleh itu, dalam jawatan ini, saya akan berkongsi beberapa petua untuk menambah kod LES yang menonjolkan kepada 2 editor teks terkenal: Teks Sublime 2 dan Notepad++.

Teks Sublime 2

Editor ini pada masa ini merupakan pilihan saya untuk membantu saya menulis kod. Aplikasi ini boleh didapati untuk Windows, Linux dan OSX, jadi apa sahaja OS anda, anda masih boleh mengikuti tip ini.

Sekarang, mari muat turun dari laman web rasminya dan cuba editor ini. Kemudian, baca arahan berikut untuk mendayakan warna LES yang menonjol di dalamnya.

Catatan: Sila pastikan anda telah membaca lesen sebelum memuat turun, kerana versi percuma hanya bertujuan untuk penilaian.

Pasang Console Pakej

Pertama, buka Teks Sublime 2 anda, dan paparkan Konsol dari menu ini Lihat> Tunjukkan Konsol

Kemudian, salin dan tampal baris arahan berikut ke dalam Konsol, kemudian tekan Enter untuk memasang kawalan pakej dari wBond.net:

import urllib2, os; pf = "Pakej Kawalan pakej.sublime"; ipp = sublime.installed_packages_path (); os.makedirs (ipp) jika tidak os.path.exists (ipp) lain Tiada; urllib2.install_opener (urllib2.build_opener (urllib2.ProxyHandler ())); terbuka (os.path.join (ipp, pf), 'wb') .write (urllib2.urlopen ('http://sublime.wbond.net/'+pf.replace (",'% 20 ')). baca ()); cetak 'Sila mulakan semula Teks Sublime untuk menyelesaikan pemasangan'

Ini Pakej Console akan membantu kami memasang pakej kemuncak.

Memasang Pakej yang menekankan kurang

Mulakan semula Teks Sublime 2 dan tunjukkan Command Palette dari menu ini Alat> Palet Command. Tunggu sehingga senarai pakej dimuatkan. Kemudian, taipkan Pasang Pakej untuk mencari dan memuatkan repositori pakej.

Kemudian, cari pakej kurang dari senarai repositori dan tekan Enter.

Tunggu sebentar untuk Teks Sublime 2 untuk memuat turun dan memasang pakej sehingga notis berikut muncul pada bar status.

Pergi ke menu Lihat> Sintaks, anda sepatutnya melihat KURANG dalam senarai. Ini bermakna bahawa Teks Sublime 2 menyokong .kurang dan sintaks KURANG anda juga harus mempunyai warna yang betul sekarang.

Notepad++

Notepad ++ adalah editor kod Bebas Sumber Terbuka, dan mempunyai banyak plugin berguna untuk memperluaskan fungsinya. Ia juga digunakan secara meluas oleh banyak pereka / pemaju web terutama mereka yang bekerja dengan sistem operasi Windows. Oleh itu, saya membuat keputusan untuk memasukkan hujung untuk menambah teks yang kurang jelas untuknya.

Pasang notis LESS di Notepad++

Membolehkan penyemakan warna kurang dalam Notepad ++ agak mudah.

Muat turun pakej kurang daripada Notepad ++ dari pautan ini (userDefineLang_LESS.xml). Kemudian, Pergi ke Lihat> Dialog Ditakrifkan Pengguna.

Kotak pop timbul berikut akan muncul. Klik Import ... butang dan cari muat turun anda .xml fail. Kemudian, mulakan semula Notepad++.

Buka fail .less anda dan pergi ke menu Bahasa. Anda kini perlu melihat KURANG dimasukkan. Pilih untuk menerapkan warna yang menonjol pada sintaks KURANG Anda.

Lebih banyak Sumber

Terdapat banyak editor lain di pasaran. Jadi, di sini kami memasukkan beberapa pautan berguna untuk anda jika anda tidak menggunakan mana-mana editor di atas.

Adobe DreamWeaver

Tidak syak lagi, Dreamweaver mempunyai pangkalan pengguna yang besar. Ia tersedia untuk kedua-dua Mac dan Windows. Jadi, jika anda menggunakan editor ini, berikut adalah salah satu sumber yang baik untuk memasang highlight LESS dalam Adobe DreamWeaver.

Coda

Jika anda menggunakan Mac, anda mungkin tahu Coda, editor ini adalah salah satu yang paling popular di kalangan pengguna Mac. Dan, inilah cara anda boleh memasang KURANG di Coda.

Geany

Ia adalah salah satu editor kod yang lebih popular di kalangan pengguna Linux. Beberapa komputer di pejabat saya yang dijalankan di Linux juga menggunakan Geany. Jadi, jika anda menggunakannya juga, anda boleh menyertakan LESAKKAN yang kurang dengan mengikuti arahan ini di SuperUser.com

2. KESALAHAN Kompilator

Tidak seperti ChrunchApp yang mempunyai pengatur KURANG terbina dalam, editor lain tidak akan memilikinya secara lalai. Walaupun terdapat beberapa cara untuk menyertakannya, tetapi agak teknikal untuk pengguna umum. Oleh itu, penyelesaian terbaik yang saya ada ialah melakukan penyusun menggunakan alat-alat berikut: WinLESS atau LESS.app. WinLESS adalah pengkompil yang direka untuk Windows, sementara LESS.app dibina untuk OSX.

Alat ini boleh menukar kod KURANG kami menjadi CSS statik secara automatik kerana kami menyimpan fail dan melaporkan terus jika terdapat ralat dalam kod. Nah, beritahu saya betapa alat ini adalah:

Pertama, saya ingin memuat turun WinLESS dan memasangnya.

Klik butang Tambah folder dan cari direktori yang anda letakkan .kurang fail (saya menganggap anda sudah mencipta sekurang-kurangnya satu). Sebaik sahaja anda menambah satu; WinLESS akan mengimbas dan mencari semua .kurang fail dan tunjukkan anda dalam senarai.

Pergi ke menu Fail> Tetapan, dan pastikan pilihan ini diperiksa;

• Secara automatik menyusun fail apabila disimpan
• Tunjukkan mesej mengenai kompilasi yang berjaya

Kita juga boleh menetapkan folder output, sekiranya kita mahu menyimpannya di tempat lain. Tetapi, dalam contoh ini kita akan meninggalkan pilihan ini kerana ia adalah; yang bermaksud fail output akan disimpan dalam direktori yang sama dengan .kurang fail.

Buka anda .kurang fail dari direktori tambahan, buat beberapa perubahan dan Simpannya.

WinLESS akan memaklumkan anda apabila fail tersebut telah berjaya disusun .css atau jika terdapat ralat di dalam kod. Dengan cara ini anda boleh menyemak output cc secara langsung, dan bukannya perlu menunggu kod untuk diselesaikan untuk menyusunnya.

Jika anda menggunakan Mac, anda boleh menggunakan LESS.app yang mempunyai functinality yang sama seperti WinLESS.

Mixer Pratetap

Dalam amalan reka bentuk web moden semasa, kami akan menggunakan sifat CSS3 seperti Gradien, Shadow atau Radius Sempadan yang kelihatan seperti ini:

-webkit-border-radius: 3px; -moz-border-radius: 3px; jejari sempadan: 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 terdahulu kami, kami telah membuat beberapa Mixin untuk menyederhanakan sintaks ini. Nasib baik, sesetengah orang dalam komuniti reka bentuk web adalah cukup murah hati untuk meluangkan masa mereka untuk menyusun Mixins berguna ini, supaya kita tidak perlu menyusunnya dari awal..

Dan, salah satu kegemaran saya ialah Unsur Kurang yang mengandungi banyak aturan preset CSS3 berguna. Oleh itu, kita kini menulis lebih sedikit baris kod dari awalan vendor yang membosankan.

Baiklah, sekarang, mari kita lihat bagaimana semua tip di atas benar-benar boleh membantu.

Meletakkan Mereka Semua Bersama

Dalam contoh ini saya akan membuat butang pautan ringkas. Mula-mula saya ingin mencipta dokumen HTML baru dan meletakkan markah berikut:

     Klik Me 

Buat a styles.less sebagai stylesheet utama kami, simpan dalam folder yang sama dengan dokumen HTML kami dan tambahkan folder ke WinLESS.

Import elements.less kami telah memuat turun sebelum menggunakan sintaks ini:

@import "elements.less";

Sekarang, kita boleh menggunakan mana-mana Mixins yang disediakan dari unsur.less seperti .kecerunan, .bulat, dan .bersempadan. Saya pasti nama Mixins agak jelas.

Seterusnya, letakkan peraturan LESS di bawah, dalam helaian gaya anda. Dan, simpan sekali lagi

 a display: block-inline; padding: 10px 20px; warna: # 555; teks-hiasan: tiada; .bw-gradient (#eee, 240, 255); .rounded; .bordered; &: hover .bw-gradient (#eee, 255, 240);  

Sejak kita .kurang fail telah ditambah ke WinLESS, ia secara automatik akan disusun ke dalam .css. Sekarang mari lihat hasilnya.

Nah, ia tidak begitu buruk, memandangkan butang ini dicipta dengan garis yang lebih sedikit daripada apa yang diperlukan. Dan, inilah CSS statik yang dijana sebenarnya:

 a display: block-inline; padding: 10px 20px; warna: # 555; teks-hiasan: tiada; latar belakang: #eeeeee; latar belakang: -webkit-gradien (linear, kiri bawah, kiri atas, warna-stop (0, # f0f0f0), warna-stop (1, #ffffff)); latar belakang: -ms-linear-gradient (bawah, # f0f0f0 0%, # f0f0f0 100%); latar belakang: -moz-linear-gradient (bahagian tengah, # f0f0f0 0%, #ffffff 100%); -webkit-border-radius: 2px; -moz-border-radius: 2px; jejari sempadan: 2px; -moz-background-clip: padding; -webkit-background-clip: padding-box; klip latar belakang: padding-box; border-top: solid 1px #eeeeee; border-left: solid 1px #eeeeee; sempadan kanan: pepejal 1px #eeeeee; sempadan bawah: pepejal 1px #eeeeee;  a: hover background: #eeeeee; latar belakang: -webkit-gradien (linear, kiri bawah, kiri atas, warna-stop (0, #ffffff), warna-stop (1, # f0f0f0)); latar belakang: -ms-linear-gradient (bottom, #ffffff 0%, #ffffff 100%); latar belakang: -moz-linear-gradient (bahagian tengah, #ffffff 0%, # f0f0f0 100%); 

Dalam Ringkasan

Berikut adalah ringkasan ringkas mengenai apa yang telah dibincangkan dalam catatan ini:

• Dengan mengaktifkan sorotan sintaks dalam editor semasa kami, kami tidak perlu memasang editor tambahan hanya untuk menyusun sintaks LESS; ini boleh menjimatkan beberapa ruang / ingatan pada cakera anda.
• Kami juga tidak lagi perlu memuat turun dan memaut Perpustakaan LESS.js ke dalam bahagian kepala HTML kami seperti yang telah kami lakukan dalam tutorial terakhir kami. Dengan cara ini, dokumen HTML kami tetap bersih dan kemas.
• Menggunakan alat penyusun seperti WinLESS dan LESS.app boleh menghasilkan output CSS statik dengan serta-merta. Jadi, jika ada sesuatu yang tidak kena dengan sintaks, kita boleh memeriksanya dengan segera.
• Mixer Pratetap seperti Elemen LESS adalah kawan terbaik kami. Ia benar-benar dapat menyelamatkan masa kita ketika menyusun harta CSS3 yang membosankan.

.