Hari ini, CSS LESS telah mencapai versi 1.5, dan telah berkembang dengan fitur baru yang membuatnya lebih kuat sebagai CSS Pra-prosesor.
Ada banyak tambahan baru di dalamnya, dan dalam posting ini kita akan memandu Anda melalui 3 fitur favorit saya baru, Mengacu Eksternal File, Memperpanjang, Penggabungan Properti, yang dapat membantu kita menulis CSS yang lebih baik. Mari kita lihat .
Impor file
Pertama-tama, mari kita lihat bagaimana CSS LESS menangani file eksternal dengan @import aturan.
Beberapa orang mungkin membagi stylesheet mereka menjadi beberapa file, bukan memasukkannya ke dalam satu panci. Kemudian mereka impor mereka dengan @import untuk stylesheet lain, sehingga mixin (serta Variabel ) dari file-file dapat digunakan kembali dalam file lain.
| 1 | @import “external.less” ; |
Masalahnya adalah bahwa LESS akan mengkompilasi semua mixin dari file-file eksternal, sehingga kita akan berakhir dengan beberapa aturan gaya yang mendefinisikan hal yang sama.
Kita lihat contoh berikut: Kami memiliki dua file LESS disebut style.less danexternal.less . Kami mengimpor external.less ke style.less . Kemudian, kami memiliki .square mixin di external.less untuk menentukan gaya untuk kotak persegi. Dalam style.less, kami menggunakan mixin yang seperti begitu.
| 1
2 3 4 5 |
@import “eksternal” ;
.box { . Persegi ; } |
Ini akan menghasilkan hasil sebagai berikut di CSS. Gaya-aturan dari .squaremixin dihasilkan juga – yang tidak baik.
| 1
2 3 4 5 6 7 8 9 10 11 12 |
. Persegi {
width : 100px ; height : 100px ; Margin : 0 auto ; background-color : red ; } .box { width : 100px ; height : 100px ; Margin : 0 auto ; background-color : red ; } |
Dalam versi 1.5, LESS diperkenalkan (referensi) , yang dapat digunakan untuk menginstruksikan LESS menggunakan file impor hanya untuk referensi, dan tidak output konten.
Menempatkan (referensi) instruksi cara ini:
| 1 | @import (referensi) “eksternal” ; |
Mengkompilasi stylesheet LESS, dan sekarang .square tidak output.
| 1
2 3 4 5 6 |
.box {
width : 100px ; height : 100px ; Margin : 0 auto ; background-color : red ; } |
Memperpanjang
Memperluas metode adalah keangkeran murni. Secara teknis, itu kelompok penyeleksi yang berbagi sama gaya-aturan , yang mengakibatkan lebih bersih dan lebih terorganisir CSS . Ketika kita membangun sebuah website, di beberapa Poins, kita bisa berakhir memiliki beberapa selektor dengan gaya-aturan erat serupa, seperti di bawah ini:
| 1
2 3 4 5 6 7 8 9 10 11 12 13 14 |
.box {
width : 100px ; height : 100px ; Margin : 0 auto ; border : 1px padat hitam ; background-color : transparent ; } .box 2 { width : 100px ; height : 100px ; Margin : 0 auto ; border : 1px padat hitam ; background-color : red ; } |
Hal ini berlebihan, dan tidak mengikuti praktik terbaik, yang menyarankan menempatkan gaya yang sama bersama-sama. Sass, dalam hal ini, dikenal dengan nya @extend direktif untuk melakukan pekerjaan ini, di LESS kita dapat melakukan hal yang sama dengan &: memperpanjang () , diperkenalkan pada versi 1.4.
Mengingat contoh di atas dapat kita lakukan:
@import (referensi) “eksternal”;
.box {
&: memperpanjang (.square);
background-color: transparent;
}
.box2 {
&: memperpanjang (.square);
background-color: red;
}
Ketika dikompilasi untuk CSS biasa, kode di atas akan menghasilkan:
| 1
2 3 4 5 6 7 8 9 10 11 12 |
. Persegi , .box, .box 2 {
width : 100px ; height : 100px ; Margin : 0 auto ; border : 1px padat hitam ; } .box { background-color : transparent ; } .box 2 { background-color : red ; } |
Properti penggabungan
Fitur baru lain yang keren adalah Penggabungan Properti . Fitur ini berlaku untuk properti CSS yang menerima beberapa nilai, seperti mengubah, transisi, dan kotak-bayangan . Dan seperti namanya, itu akan menggabungkan nilai-nilai yang dimiliki properti yang sama. Mari kita lihat contoh di bawah ini.
Seperti yang Anda mungkin sudah tahu, CSS3 Box Bayangan properti menerima beberapa nilai shadow. Dengan menggunakan properti Penggabungan ini, Anda dapat membangun efek bayangan dengan mudah dan membuat mereka lebih mudah dikelola.
Di sini kita membuat dua mixin .inner-shadow dan .outer-shadow – saya kira nama-nama yang cukup jelas.
| 1
2 3 4 5 6 |
.inner-shadow {
box-shadow +: inset 10px 10px 5px # ccc ; } .outer-shadow { box-shadow +: inset 10px 10px 5px # ccc ; } |
Perhatikan bahwa kita menambahkan + tanda pada akhir nama properti. Ini +tanda diperlukan untuk fitur ini untuk bekerja. Kemudian, kita dapat menggunakan mixin ini, sebagai berikut:
| 1
2 3 4 5 6 7 8 9 10 |
.box {
.inner-shadow; .outer-shadow; } .box 2 { .inner-shadow; } .box 3 { .outer-shadow; } |
Kode ini akan memberi kita hasil berikut.
| 1
2 3 4 5 6 7 8 9 |
.box {
box-shadow: inset 10px 10px 5px # ccc , 10px 10px 5px # ccc ; } .box 2 { box-shadow: inset 10px 10px 5px # ccc ; } .box 3 { box-shadow: 10px 10px 5px # ccc ; } |
Pemikiran akhir
Ini 3 fitur baru – Mengacu Eksternal File, Memperpanjang, Penggabungan Properti – memotivasi saya untuk menggunakan KURANG lebih. Dengan mereka kita bisa menulis lebih baik, dan lebih mudah dikelola CSS. Saya tak sabar untuk kemampuan baru lebih keren yang LESS akan menawarkan pada versi.
