CSS Kurang - Panduan Permulaan
CSS Pra-pemproses kini telah menjadi ruji dalam pembangunan web. Ia menghantar CSS biasa dengan ciri-ciri pengaturcaraan seperti Pemboleh ubah, Fungsi atau Mixin, dan Operasi yang membolehkan pembangun web untuk membina modular, berskala, dan gaya CSS yang lebih mudah diurus.
Dalam siaran ini, kita akan melihat ke KURANG yang menjadi salah satu pemproses CSS CSS yang paling popular di sekitar, dan juga telah digunakan secara meluas dalam banyak kerangka front-end seperti Bootstrap. Kami juga akan berjalan melalui utiliti asas, alat dan setup untuk membantu mendapatkan dan menjalankan dengan KURANG.
The Compiler
Untuk bermula, kita perlu menyediakan pengkompil. Sintaks kurang adalah tidak standard, setiap spesifikasi W3C. Penyemak imbas tidak akan dapat memproses dan menghasilkan output, walaupun sifat warisan yang serupa dengan CSS.
Berikut adalah sekilas pada kod TIDAK:
@ color-base: # 2d5e8b; .class1 background-color: @ color-base; .class2 background-color: #fff; warna: @ warna asas;
Pengkompil akan memproses kod dan mengubah sintaks LESS ke format CSS yang mematuhi pelayar:
.class1 background-color: # 2d5e8b; .class1 .class2 background-color: #fff; warna: # 2d5e8b;
Terdapat beberapa alat untuk menyusun CSS:
Menggunakan JavaScript
KURANG datang dengan a kurang.js fail yang sangat mudah digunakan di laman web anda. Buat stylesheet dengan .kurang lanjutan dan sambungkannya dalam dokumen anda menggunakan rel = "stylesheet / less" atribut.
Anda boleh mendapatkan fail JS di sini, muat turun melalui pengurus pakej Bower, lain-lain secara langsung ke CDN, seperti:
Anda semua ditetapkan dan boleh mengarang gaya dalam .kurang. Sintaks KURANG akan dikumpulkan secara lalai sebagai beban halaman. Perlu diingat bahawa menggunakan JavaScript tidak digalakkan pada peringkat pengeluaran kerana ia akan menjejaskan prestasi laman web.
Anda harus sentiasa menyusun sintaks LESS terlebih dahulu dan hanya berkhidmat CSS tetap sebaliknya. Anda boleh gunakan Terminal, Pelari Tugas seperti Grunt atau Gulp, atau aplikasi grafik untuk melakukannya.
Menggunakan CLI
KURANG menyediakan antara muka baris arahan asli (CLI), kurang, yang mengendalikan beberapa tugas di luar hanya menyusun sintaks KURANG. Menggunakan CLI, kita boleh memasukkan kod, memampatkan fail, dan membuat peta sumber. Perintah ini didasarkan pada Node.js yang berkesan membolehkan arahan untuk berfungsi di seluruh Windows, OS X, dan Linux.
Pastikan Node.js telah dipasang (sebaliknya ambil pemasang di sini), kemudian pasang CLESS LESS melalui NPM (Pengurus Pakej Node) menggunakan baris arahan berikut.
npm pasang -g kurang
Sekarang anda mempunyai kurang arahan pada pelupusan anda untuk menyusun KURANG ke CSS:
gaya style.css kurang
Menggunakan Pelari Petugas
Pelari tugas adalah alat yang mengautomasikan tugas pembangunan dan aliran kerja. Daripada menjalankan kurang Perintah setiap kali kami ingin mengkompilasi kod kami, kami boleh setup memasang pelari tugas, dan tetapkannya untuk melihat perubahan dalam fail KURANG kami, dan segera menyusun KURANG ke CSS.
Dua alat popular dalam kategori ini hari ini adalah Grunt dan Gulp. Kami mempunyai satu siri jawatan yang meliputi alat-alat ini. Tandai jawatan untuk mengetahui cara menggunakan alat ini dalam aliran kerja anda.
- Bagaimana Menggunakan Genggaman Untuk Mengautomasikan Aliran Kerja Anda
- Bermula Dengan Gulp.js
- Battle Of Build Scripts: Gulp Vs Grunt
Menggunakan Aplikasi Grafik
Bagi mereka yang mungkin tidak biasa menggunakan Terminal dan baris arahan, mereka boleh memilih antara muka grafik. Terdapat banyak aplikasi untuk menyusun KURANG hari ini untuk semua platform - beberapa percuma, ada yang dibayar
Berikut adalah senarai lengkap:
| Aplikasi | Platform | Kos |
| Campuran | OS X / Windows | Percuma |
| Koala | OS X / Windows / Linux | Percuma |
| Prepros | OS X / Windows | Freemium (USD29) |
| WinLESS | Windows | Percuma |
| CodeKit | OS X | USD32 |
Pengkompil yang anda pilih (selain dari JavaScript) tidak begitu penting, terus terang, selagi alat berfungsi dan melengkapkan aliran kerja anda, pergi ke sana.
Editor Kod
Anda boleh menggunakan mana-mana editor kod. Hanya pasang plugin atau lanjutan untuk menyerlahkan sintaks LESS dengan warna yang sesuai, ciri yang kini tersedia untuk hampir semua editor kod dan IDE termasuk SublimeText, Notepad ++, VisualStudio, TextMate, dan Eclipse untuk menamakan beberapa.
Sekarang bahawa kami mempunyai pengkompil dan editor kod yang ditetapkan, kami boleh mula menulis gaya CSS dengan sintaks KURANG.
Sintaks yang kurang
Tidak seperti CSS biasa seperti yang kita ketahui, KURANG berfungsi lebih seperti bahasa pengaturcaraan. Ia dinamik, jadi harapkan untuk mencari beberapa istilah seperti Pembolehubah, Operasi dan Skop sepanjang jalan.
Pembolehubah
Pertama sekali, mari kita lihat Pembolehubah.
Jika anda telah bekerja agak lama dengan CSS, anda mungkin telah menulis sesuatu seperti ini, di mana kita mempunyai nilai berulang yang diberikan dalam blok perisytiharan dalam keseluruhan lembaran gaya.
.class1 background-color: # 2d5e8b; .class2 background-color: #fff; warna: # 2d5e8b; .class3 border: 1px solid # 2d5e8b;
Amalan ini sebenarnya baik - sehingga kita mendapati diri kita perlu menyaring lebih daripada seribu atau lebih coretan serupa sepanjang lembaran gaya. Ini boleh berlaku apabila membina sebuah laman web berskala besar. Kerja akan menjadi membosankan.
Jika kami menggunakan pre-procesor CSS seperti KURANG, contoh di atas tidak akan menjadi masalah - kita boleh gunakan Pembolehubah. Pembolehubah akan membolehkan kami menyimpan tetap nilai yang kemudiannya boleh digunakan semula dalam keseluruhan lembaran gaya.
@ color-base: # 2d5e8b; .class1 background-color: @ color-base; .class2 background-color: #fff; warna: @ warna asas; .class3 border: 1px solid @ color-base;
Dalam contoh di atas, kami menyimpan warna # 2d5e8b di dalam @ warna asas pembolehubah. Apabila anda mahu menukar warna, kita hanya perlu menukar nilai dalam pembolehubah ini.
Selain daripada warna, anda juga boleh meletakkan nilai-nilai lain dalam pembolehubah seperti contohnya:
@ font-family: Georgia @ dot-border: dotted @transition: linear @opacity: 0.5
Mixin
Dalam KURANG, kita boleh gunakan Mixin untuk menggunakan semula pengisytiharan keseluruhan dalam peraturan CSS yang ditetapkan dalam set peraturan yang lain. Inilah contohnya:
.kecerunan latar belakang: #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 coretan di atas, kami telah menetapkan pratetap kecerunan warna di dalam .kecerunan kelas. Setiap kali kami mahu menambahkan gradien, kami hanya masukkan .kecerunan dengan cara ini:
div .gradients; sempadan: 1px pepejal # 555; jejari sempadan: 3px;
The .kotak akan mewarisi semua blok pengisytiharan di dalam .kecerunan. Oleh itu, peraturan CSS di atas bersamaan 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); sempadan: 1px pepejal # 555; jejari sempadan: 3px;
Selain itu, jika anda menggunakan CSS3 banyak di laman web anda, anda boleh menggunakan Elemen Rendah untuk menjadikan pekerjaan anda lebih mudah. Elemen kurang adalah kumpulan yang biasa Mix3 CSS3 bahawa kita mungkin sering menggunakan stylesheets, seperti jejari sempadan, kecerunan, drop-shadow dan sebagainya.
Untuk menggunakan Unsur KURANG, tambah sahaja @import aturan dalam lembaran gaya kurang Anda, tetapi jangan lupa untuk mengunduhnya terlebih dahulu dan tambahkannya ke direktori kerja Anda.
@import "elements.less";
Kita boleh menggunakan semula semua itu kelas disediakan dari elements.less, sebagai contoh, untuk menambah 3px jejari sempadan kepada a div, kita boleh menulis:
div .rounded (3px);
Untuk kegunaan lanjut, sila rujuk dokumentasi rasmi.
Peraturan Bersarang
Apabila anda menulis gaya dalam CSS biasa, anda mungkin juga telah melalui struktur kod tipikal ini.
nav ketinggian: 40px; lebar: 100%; latar belakang: # 455868; sempadan bawah: pepejal 2px # 283744; nav li width: 600px; ketinggian: 40px; nav li a color: #fff; garis ketinggian: 40px; teks-bayangan: 1px 1px 0px # 283744;
Dalam CSS biasa, kami memilih elemen kanak-kanak dengan menargetkan ibu bapa pertama dalam setiap set peraturan, yang sangat berlebihan sekiranya kita mengikuti “amalan terbaik” prinsip.
Dalam CSS KURANG, kita boleh menyederhanakan peraturan yang ditetapkan oleh bersarang unsur-unsur kanak-kanak di dalam ibu bapa, seperti berikut;
nav ketinggian: 40px; lebar: 100%; latar belakang: # 455868; sempadan bawah: pepejal 2px # 283744; li width: 600px; ketinggian: 40px; a color: #fff; garis ketinggian: 40px; teks-bayangan: 1px 1px 0px # 283744;
Anda juga boleh menetapkan pseudo-classes, seperti : berlegar, kepada pemilih menggunakan simbol ampersand (&).
Katakan kita mahu tambah : berlegar kepada tegasan utama di atas, kita dapat menulisnya dengan cara ini:
a color: #fff; garis ketinggian: 40px; teks-bayangan: 1px 1px 0px # 283744; &: hover background-color: # 000; warna: #fff;
Operasi
Kami juga boleh melakukan operasi dalam KURANG, seperti penambahan, penolakan, pendaraban dan pembahagian kepada nombor, warna dan pembolehubah dalam lembaran gaya.
Katakan kita mahu unsur B menjadi dua kali lebih tinggi daripada elemen A. Dalam kes itu, kita boleh menulisnya dengan cara ini:
@height: 100px .element-A height: @height; .element-B tinggi: @height * 2;
Seperti yang dapat anda lihat di atas, kita mula-mula menyimpan nilai dalam @height pemboleh ubah, kemudian tentukan nilai kepada elemen A.
Dalam elemen B, daripada mengira ketinggian diri kita, kita boleh melipatgandakan ketinggian dengan 2 menggunakan operator asterisk (*). Sekarang, setiap kali kita menukar nilai dalam @height pembolehubah, elemen B akan sentiasa mempunyai dua kali ganda ketinggian.
Semak contoh operasi yang lebih maju dalam tutorial kami sebelumnya: Merekabentuk Bar Navigasi Menu Slaip.
Skop
KURANG memohon Skop konsep, di mana pembolehubah akan diwarisi terlebih dahulu dari skop tempatan, dan apabila ia tidak tersedia di dalam negara, ia akan mencari melalui skop yang lebih luas.
pengepala @color: hitam; warna latar belakang: @ color; nav @ color: blue; warna latar belakang: @ color; a color: @color;
Dalam contoh di atas, kepala mempunyai a hitam warna latar belakang, tetapi navwarna latar belakang akan menjadi biru kerana ia mempunyai pemboleh ubah @kolor dalam skop setempatnya, sementara a juga akan mempunyai biru yang diwarisi dari ibu bapa yang lebih dekat, nav.
Pemikiran Akhir
Pada akhirnya, kami berharap jawatan ini dapat memberikan anda pemahaman asas tentang bagaimana kami boleh menulis CSS dengan cara yang lebih baik menggunakan KURANG. Anda mungkin berasa sedikit canggung pada mulanya, tetapi ketika anda mencuba lebih kerap, pasti akan menjadi lebih mudah.
Berikut adalah beberapa tutorial yang saya menggalakkan anda untuk melihat petua dan amalan lanjut, yang boleh membantu menolak kemahiran KURANG anda hingga tahap seterusnya.
- Tutorial CSS Kurang: Merekabentuk Bar Navigasi Menu Slaip
- Memahami Fungsi Warna KURANG
- 3 Ciri CSS KURANG Kurang Yang Harus Anda Ketahui
