Cara Menukar CSS Lama Untuk KURANG
Kami telah membincangkan banyak perkara asas untuk KURANG dalam jawatan kami yang terdahulu. Sekiranya anda mengikuti siri KURANG, kami percaya bahawa pada masa ini anda sudah mempunyai idea yang baik tentang cara menggunakannya Pembolehubah, Mixin dan Operasi dalam kurang.
Kami juga telah menyebut bagaimana untuk menukar KURANG ke CSS tetap, dengan aplikasinya atau dengan pengkompil. Tetapi, bagaimana kita melakukan yang sebaliknya; untuk menukar CSS ke KURANG? Nah, tip ini adalah untuk anda.
Menggunakan Alat
Dengan peningkatan populariti Preprocessor CSS, beberapa alat dan aplikasi baru yang pada dasarnya bertujuan untuk membuat hidup pereka web atau pemaju lebih mudah, seperti alat ini: CSS2Less.
Alat ini membolehkan kami menukar CSS tetap ke KURANG. Jadi, mari kita cuba. Saya mempunyai peraturan CSS berikut dari fail lama saya untuk ditukar.
nav ketinggian: 40px; lebar: 100%; latar belakang: # 000; border-bottom: 2px solid #fff; nav ul padding: 0; margin: 0 auto; nav li display: inline; terapung: kiri; nav a color: #fff; paparan: blok dalam talian; lebar: 100px; teks-bayangan: 1px 1px 0px # 000; nav li a border-right: 1px solid #fff; box-sizing: border-box; nav li: last-child a border-right: 0; nav a: hover, nav a: active background-color: #fff;
Inilah hasilnya.
nav a: hover, nav a: active background-color: #fff; nav ketinggian: 40px; lebar: 100%; latar belakang: # 000; border-bottom: 2px solid #fff; a color: #fff; paparan: blok dalam talian; lebar: 100px; teks-bayangan: 1px 1px 0px # 000; ul padding: 0; margin: 0 auto; li: kanak-kanak lepas a border-right: 0; li display: inline; terapung: kiri; a border-right: 1px solid #fff; box-sizing: border-box;
Seperti yang dapat kita lihat di atas, CSS lama kita sekarang bersarang seperti dalam KURANG.
Had
Bagaimanapun, kita juga dapat melihat beberapa batasan dalam hasil penukaran. Dalam CSS lama, kami mempunyai beberapa warna yang sama, seperti dalam dua deklarasi ini border-bottom: 2px solid #fff; dan sempadan kanan: 1px padat #fff; kita mempunyai kedua-dua sempadan berwarna putih. Dalam KURANG kita sebenarnya boleh menyimpan nilai malar ini dalam a Pembolehubah.
Ia juga tidak bersarang dan memisahkannya pseudo- * dengan simbol ampersand (&), seperti dalam peraturan berikut li: kanak-kanak lepas dan nav a: hover, nav a: active. Mereka hanya kekal seperti mereka, di mana kita sebenarnya boleh menyederhanakan kaedah-kaedah dengan cara ini;
li &: first-child a &: hover &: active
Kesimpulannya
Walaupun batasan yang kini masih ada, alat ini boleh membantu dalam menjimatkan masa kami untuk menyusun peraturan CSS. Kami hanya perlu melakukan rehat secara manual; mungkin sehingga batasan-batasan di atas adalah diselesaikan.
