KURANG CSS - Panduan Pemula
CSS Pra-prosesor kini telah menjadi pokok dalam pengembangan web. Ini mengirimkan CSS biasa dengan sifat-sifat pemrograman seperti Variabel, Fungsi atau Mixin, dan Operasi yang memungkinkan pengembang web untuk membangun gaya CSS modular, skalabel, dan lebih mudah dikelola.
Dalam posting ini, kita akan melihat ke KURANG yang telah menjadi salah satu pra-prosesor CSS paling populer di sekitar, dan juga telah banyak digunakan dalam berbagai kerangka kerja front-end seperti Bootstrap. Kami juga akan berjalan melalui utilitas dasar, alat, dan pengaturan untuk membantu Anda menjalankan dan menjalankan dengan KURANG.
Kompiler
Untuk memulainya, kita perlu mengatur kompiler. Sintaks KURANG adalah non-standar, per spesifikasi W3C. Peramban tidak akan dapat memproses dan membuat output, meskipun mewarisi sifat-sifat yang mirip dengan CSS.
Berikut ini sekilas kode KURANG:
@ color-base: # 2d5e8b; .class1 background-color: @ color-base; .class2 warna latar: #fff; warna: @ color-base;
Kompiler akan memproses kode dan mengubah sintaks KURANG menjadi format CSS yang sesuai dengan browser:
.class1 background-color: # 2d5e8b; .class1 .class2 background-color: #fff; warna: # 2d5e8b;
Ada sejumlah alat untuk menyusun CSS:
Menggunakan JavaScript
KURANG datang dengan kurang file yang sangat mudah digunakan di situs web Anda. Buat stylesheet dengan .kurang ekstensi dan tautkan dalam dokumen Anda menggunakan rel = "stylesheet / kurang" atribut.
Anda dapat memperoleh file JS di sini, mengunduhnya melalui manajer paket Bower, jika tidak langsung tautkan ke CDN, seperti:
Anda sudah siap dan dapat membuat gaya di dalam .kurang. Sintaks KURANG akan dikompilasi dengan cepat saat halaman memuat. Ingat itu menggunakan JavaScript tidak disarankan pada tahap produksi karena akan sangat mempengaruhi kinerja situs web.
Anda harus selalu mengkompilasi sintaks KURANG sebelumnya dan hanya melayani CSS biasa sebagai gantinya. Kamu bisa memakai Terminal, seperti Task Runner Mendengus atau Teguk, atau aplikasi grafis untuk melakukannya.
Menggunakan CLI
KURANG menyediakan antarmuka baris perintah asli (CLI), lessc, yang menangani beberapa tugas di luar hanya menyusun sintaks KURANG. Menggunakan CLI kita dapat menyisir kode, mengompres file, dan membuat peta sumber. Perintah ini didasarkan pada Node.js yang secara efektif memungkinkan perintah untuk bekerja di Windows, OS X, dan Linux.
Pastikan Node.js telah diinstal (jika tidak ambil installer di sini), kemudian instal KURANGI CLI melalui NPM (Node Package Manager) menggunakan baris perintah berikut.
npm instal -g kurang
Sekarang kamu punya lessc perintah yang Anda inginkan untuk mengkompilasi KURANG ke dalam CSS:
lessc style.less style.css
Menggunakan Task Runner
Pelari tugas adalah alat yang mengotomatiskan tugas pengembangan dan alur kerja. Daripada menjalankan lessc perintah setiap kali kami ingin mengkompilasi kode kami, kami dapat mengatur menginstal task runner, dan mengaturnya untuk melihat perubahan dalam file KURANG kami, dan segera mengkompilasi KURANG ke dalam CSS.
Dua alat populer dalam kategori ini hari ini adalah Grunt dan Gulp. Kami memiliki serangkaian pos yang mencakup alat-alat ini. Periksa pos untuk mempelajari cara menggunakan alat ini dalam alur kerja Anda.
- Cara Menggunakan Grunt Untuk Mengotomatiskan Alur Kerja Anda
- Memulai Dengan Gulp.js
- Pertempuran Script Build: Gulp Vs Grunt
Menggunakan Aplikasi Grafis
Bagi mereka yang mungkin tidak terbiasa menggunakan Terminal dan baris perintah, mereka dapat memilih antarmuka grafis sebagai gantinya. Ada banyak aplikasi untuk mengkompilasi KURANG hari ini untuk semua platform - beberapa gratis, beberapa berbayar
Berikut daftar lengkapnya:
| Aplikasi | Peron | Biaya |
| Campuran | OS X / Windows | Bebas |
| Koala | OS X / Windows / Linux | Bebas |
| Prepros | OS X / Windows | Freemium (USD29) |
| Tanpa winner | Windows | Bebas |
| CodeKit | OS X | USD32 |
Kompiler mana yang Anda pilih (selain dari JavaScript) tidak terlalu penting, terus terang, selama alat ini bekerja dan melengkapi alur kerja Anda, lakukan saja.
Editor Kode
Anda dapat menggunakan editor kode apa saja. Cukup instal plugin atau ekstensi untuk menyoroti sintaks KURANG dengan warna yang tepat, fitur yang sekarang tersedia untuk hampir semua editor kode dan IDE termasuk SublimeText, Notepad ++, VisualStudio, TextMate, dan Eclipse untuk menyebutkan beberapa.
Sekarang kita sudah memiliki kompiler dan editor kode yang sudah siap, kita dapat mulai menulis gaya CSS dengan sintaks KURANG.
Sintaks KURANG
Tidak seperti CSS biasa seperti yang kita kenal, KURANG bekerja lebih seperti bahasa pemrograman. Ini dinamis, jadi berharap untuk menemukan beberapa terminologi suka Variabel, Operasi dan Cakupan sepanjang jalan.
Variabel
Pertama-tama, mari kita lihat Variabel.
Jika Anda telah bekerja cukup lama dengan CSS, Anda mungkin telah menulis sesuatu seperti ini, di mana kami memiliki nilai berulang yang ditetapkan dalam blok deklarasi di seluruh stylesheet.
.class1 background-color: # 2d5e8b; .class2 background-color: #fff; warna: # 2d5e8b; .class3 border: 1px solid # 2d5e8b;
Praktek ini sebenarnya baik-baik saja - sampai kita mendapati diri kita harus menyaring lebih dari itu seribu atau lebih cuplikan serupa di seluruh stylesheet. Ini bisa terjadi ketika membangun situs web skala besar. Pekerjaan akan menjadi membosankan.
Jika kita menggunakan pro-prosesor CSS seperti KURANG, contoh di atas tidak akan menjadi masalah - kita dapat menggunakan Variabel. Variabel akan memungkinkan kita untuk menyimpan sebuah konstanta nilai yang nantinya bisa digunakan kembali di seluruh stylesheet.
@ color-base: # 2d5e8b; .class1 background-color: @ color-base; .class2 background-color: #fff; warna: @ color-base; .class3 border: 1px solid @ color-base;
Pada contoh di atas, kami menyimpan warnanya # 2d5e8b dalam @ warna-dasar variabel. Saat Anda ingin mengubah warna, kami hanya perlu mengubah nilai dalam variabel ini.
Selain warna, Anda juga bisa memasukkan nilai lain dalam variabel seperti misalnya:
@ font-family: Georgia @ dot-border: dotted @transition: linear @opacity: 0,5
Mixin
Dalam KURANG, kita bisa menggunakan Mixin untuk menggunakan kembali seluruh deklarasi dalam set aturan CSS di set aturan lain. Berikut ini sebuah contoh:
.gradien background: #eaeaea; latar belakang: linear-gradient (atas, #eaeaea, #cccccc); latar belakang: -o-linear-gradient (atas, #eaeaea, #cccccc); latar belakang: -ms-linear-gradient (atas, #eaeaea, #cccccc); latar belakang: -moz-linear-gradient (atas, #eaeaea, #cccccc); latar belakang: -webkit-linear-gradient (atas, #eaeaea, #cccccc);
Dalam cuplikan di atas, kami telah menetapkan standar gradien warna di dalam .gradien kelas. Setiap kali kita ingin menambahkan gradien kita cukup memasukkan .gradien cara ini:
div .gradients; perbatasan: 1px solid # 555; batas-jari-jari: 3px;
Itu .kotak akan mewarisi semua blok deklarasi di dalam .gradien. Jadi, aturan CSS di atas sama dengan CSS biasa berikut:
div background: #eaeaea; latar belakang: linear-gradient (atas, #eaeaea, #cccccc); latar belakang: -o-linear-gradient (atas, #eaeaea, #cccccc); latar belakang: -ms-linear-gradient (atas, #eaeaea, #cccccc); latar belakang: -moz-linear-gradient (atas, #eaeaea, #cccccc); latar belakang: -webkit-linear-gradient (atas, #eaeaea, #cccccc); perbatasan: 1px solid # 555; batas-jari-jari: 3px;
Selain itu, jika Anda banyak menggunakan CSS3 di situs web Anda, Anda dapat menggunakan Elemen KURANG untuk membuat pekerjaan Anda lebih mudah. KURANG Elemen adalah kumpulan yang umum Campuran CSS3 yang sering kita gunakan dalam stylesheet, seperti batas-jari-jari, gradien, drop-shadow dan seterusnya.
Untuk menggunakan Elemen KURANG, cukup tambahkan @impor aturan dalam stylesheet KURANG Anda, tetapi jangan lupa untuk mengunduhnya terlebih dahulu dan menambahkannya ke direktori kerja Anda.
@ impor "elements.less";
Kita sekarang dapat menggunakan kembali semua kelas disediakan dari tanpa elemen, misalnya, menambahkan 3px radius perbatasan ke a div, kita bisa menulis:
div .rounded (3px);
Untuk penggunaan lebih lanjut, silakan merujuk ke dokumentasi resmi.
Aturan Bersarang
Saat Anda menulis gaya dalam CSS biasa, Anda mungkin juga telah menemukan struktur kode yang khas ini.
nav tinggi: 40px; lebar: 100%; latar belakang: # 455868; border-bottom: 2px solid # 283744; nav li width: 600px; tinggi: 40px; nav li a color: #fff; garis-tinggi: 40px; text-shadow: 1px 1px 0px # 283744;
Dalam CSS biasa, kami memilih elemen anak dengan terlebih dahulu menargetkan induk di setiap set aturan, yang sangat berlebihan jika kita mengikuti “praktik terbaik” prinsip.
Dalam KURANG CSS, kita dapat menyederhanakan set aturan dengan bersarang elemen anak di dalam orang tua, sebagai berikut;
nav tinggi: 40px; lebar: 100%; latar belakang: # 455868; border-bottom: 2px solid # 283744; li width: 600px; tinggi: 40px; a color: #fff; garis-tinggi: 40px; text-shadow: 1px 1px 0px # 283744;
Anda juga dapat menetapkan kelas semu, seperti : melayang, ke pemilih menggunakan simbol ampersand (&).
Katakanlah kita ingin menambahkan : melayang ke tag jangkar di atas, kita dapat menulis dengan cara ini:
a color: #fff; garis-tinggi: 40px; text-shadow: 1px 1px 0px # 283744; &: hover warna latar: # 000; warna: #fff;
Operasi
Kami juga dapat melakukan operasi di KURANG, seperti penambahan, pengurangan, perkalian dan pembagian ke angka, warna, dan variabel dalam stylesheet.
Katakanlah kita ingin elemen B menjadi dua kali lebih tinggi dari elemen A. Dalam hal ini, kita dapat menulis dengan cara ini:
@ height: 100px .element-A height: @height; .element-B height: @height * 2;
Seperti yang Anda lihat di atas, pertama-tama kami menyimpan nilai dalam @tinggi variabel, lalu tetapkan nilai ke elemen A.
Pada elemen B, daripada menghitung sendiri tinggi badan, kita bisa mengalikan tinggi dengan 2 menggunakan operator tanda bintang (*). Sekarang, setiap kali kita mengubah nilai dalam @tinggi variabel, elemen B akan selalu memiliki tinggi dua kali lipat.
Lihat contoh operasi lebih lanjut dalam tutorial kami sebelumnya: Merancang Bilah Navigasi Menu Slick.
Cakupan
KURANG menerapkan Cakupan konsep, di mana variabel akan diwarisi terlebih dahulu dari lingkup lokal, dan ketika tidak tersedia secara lokal, itu akan mencari melalui lingkup yang lebih luas.
header @color: black; warna latar belakang: @color; nav @color: blue; warna latar belakang: @color; a color: @color;
Pada contoh di atas, tajuk mempunyai sebuah hitam warna latar belakang, tapi navWarna latar belakang akan menjadi biru karena memiliki variabel @color dalam lingkup lokalnya, sedangkan Sebuah juga akan memiliki warna biru yang diwarisi dari induk terdekatnya, nav.
Pemikiran Akhir
Pada akhirnya, kami berharap posting ini dapat memberi Anda pemahaman dasar tentang bagaimana kami dapat menulis CSS dengan cara yang lebih baik menggunakan KURANG. Anda mungkin merasa sedikit canggung pada awalnya, tetapi ketika Anda mencobanya lebih sering, itu pasti akan menjadi jauh lebih mudah.
Berikut adalah beberapa tutorial yang saya anjurkan Anda untuk melihat tips dan praktik lebih lanjut, yang dapat membantu mendorong keterampilan KURANG Anda ke tingkat berikutnya.
- KURANG CSS Tutorial: Merancang Bilah Navigasi Menu yang Licin
- Memahami Fungsi Warna KURANG
- 3 Fitur CSS KURANG Baru Yang Harus Anda Ketahui
