Cara Mengonversi CSS Lama Menjadi KURANG
Kami telah membahas banyak dasar untuk KURANG di posting kami sebelumnya. Jika Anda telah mengikuti seri KURANG kami, kami percaya bahwa pada titik ini Anda sudah memiliki ide bagus tentang cara menggunakan Variabel, Mixin dan Operasi Minimal.
Kami juga telah menyebutkan bagaimana mengkonversi KURANG menjadi CSS biasa, dengan aplikasi atau dengan kompiler. Tetapi, bagaimana kita melakukan yang sebaliknya; untuk mengubah CSS menjadi KURANG? Nah, tip ini untuk Anda.
Menggunakan Alat
Dengan meningkatnya popularitas Preprosesor CSS, beberapa alat dan aplikasi baru yang pada dasarnya bertujuan untuk membuat hidup perancang atau pengembang web lebih mudah, seperti alat ini: CSS2Less.
Alat ini memungkinkan kita untuk mengubah CSS biasa menjadi KURANG. Jadi, mari kita coba. Saya memiliki aturan CSS berikut dari file lama saya untuk dikonversi.
nav tinggi: 40px; lebar: 100%; latar belakang: # 000; border-bottom: 2px solid #fff; nav ul padding: 0; margin: 0 otomatis; nav li display: inline; mengapung: kiri; nav a color: #fff; display: inline-block; lebar: 100px; text-shadow: 1px 1px 0px # 000; nav li a border-right: 1px solid #fff; ukuran kotak: kotak batas; nav li: last-child a border-right: 0; nav a: hover, nav a: aktif background-color: #fff;
Inilah hasilnya.
nav a: hover, nav a: aktif background-color: #fff; nav tinggi: 40px; lebar: 100%; latar belakang: # 000; border-bottom: 2px solid #fff; a color: #fff; display: inline-block; lebar: 100px; text-shadow: 1px 1px 0px # 000; ul padding: 0; margin: 0 otomatis; li: anak terakhir a border-right: 0; li display: inline; mengapung: kiri; a border-right: 1px solid #fff; ukuran kotak: kotak batas;
Seperti yang bisa kita lihat di atas, CSS lama kita sekarang bersarang seperti di KURANG.
Batasan
Namun kita juga dapat melihat beberapa batasan dalam hasil konversi. Di CSS lama, kami memiliki beberapa warna yang sama, seperti dalam dua deklarasi ini border-bottom: 2px solid #fff; dan border-right: 1px solid #fff; kami memiliki batas putih. Dalam KURANG kita benar-benar dapat menyimpan nilai konstan ini dalam a Variabel.
Itu juga tidak bersarang dan memisahkan semu-* dengan simbol ampersand (&), seperti dalam aturan berikut li: anak terakhir dan nav a: hover, nav a: aktif. Mereka tetap seperti apa adanya, di mana kita dapat menyederhanakan aturan dengan cara ini;
li &: first-child a &: hover &: active
Kesimpulan
Terlepas dari keterbatasan yang masih dimiliki saat ini, alat ini dapat sangat membantu dalam menghemat waktu kita untuk mengatur CSS. Kita hanya perlu melakukan sisanya secara manual; mungkin sampai batasan di atas terselesaikan.
