Eski CSS’yi LESS’e Dönüştürme
Daha önceki yayınlarımızda LESS ile ilgili temel bilgilerin çoğunu ele aldık. Eğer LESS serimizi takip ediyorsanız, bu noktada nasıl kullanacağınız hakkında iyi bir fikriniz olduğuna inanıyoruz. Değişkenler, Katmalar ve Operasyon daha az.
Ayrıca, bir uygulamayı veya bir derleyiciyi kullanarak LESS'i normal CSS'ye nasıl dönüştürebileceğimizi de belirttik. Fakat tam tersini nasıl yaparız; CSS'yi LESS'e nasıl dönüştürebilirim? Peki, bu ipucu senin için.
Bir Araç Kullanma
Artan popülaritesi ile CSS önişlemcisi, web tasarımcısı veya geliştiricisinin hayatını kolaylaştırmayı amaçlayan bazı yeni araçlar ve uygulamalar, örneğin: CSS2Less.
Bu araç normal CSS'yi LESS'e dönüştürmemizi sağlar. Öyleyse bir deneyelim. Dönüştürülecek eski dosyamdan aşağıdaki CSS kurallarına sahibim.
nav yükseklik: 40 piksel; genişlik:% 100; arkaplan: # 000; sınır-alt: 2px katı #fff; nav ul doldurma: 0; marj: 0 otomatik; nav li görüntüleme: satır içi; şamandıra: sol; nav a color: #fff; ekran: satır içi blok; genişlik: 100px; metin-gölge: 1 piksel 1 piksel 0 piksel # 000; nav li a sınır-sağ: 1 piksel katı #fff; kutu boyutlandırma: border-box; nav li: son çocuk bir border-right: 0; nav a: vurgulu, nav a: active background-color: #fff;
İşte sonuç.
nav a: vurgulu, nav a: active background-color: #fff; nav yükseklik: 40 piksel; genişlik:% 100; arkaplan: # 000; sınır-alt: 2px katı #fff; bir renk: #fff; ekran: satır içi blok; genişlik: 100px; metin-gölge: 1 piksel 1 piksel 0 piksel # 000; ul doldurma: 0; marj: 0 otomatik; li: son çocuk a sınır-sağ: 0; li görüntüleme: satır içi; şamandıra: sol; bir border-right: 1px katı #fff; kutu boyutlandırma: border-box;
Yukarıda gördüğümüz gibi, eski CSS'lerimiz şimdi LESS'deki gibi iç içe geçmiş durumda.
sınırlama
Ancak dönüşüm sonuçlarında bazı sınırlamalar da görebiliriz. Eski CSS’de, bu iki beyanda olduğu gibi aynı renklere sahibiz. sınır-alt: 2px katı #fff; ve sınır-sağ: 1 piksel katı #fff; beyazın her ikisinde de sınır var. LESS'te aslında bu sabit değeri bir değerde saklayabiliriz. Değişken.
Ayrıca yuva yapmaz ve ayırmaz. yalancı * Aşağıdaki kurallarda olduğu gibi ve işareti (&) sembolü olan li: Geçen çocuk ve nav a: gezdir, nav a: etkin. Sadece onlar olduğu gibi kalıyorlar, burada kural kümelerini bu şekilde basitleştirebiliriz;
li &: birinci çocuk a &: hover &: aktif
Sonuç
Halen sahip olduğu sınırlamalara rağmen, bu araç CSS kural kümelerini yuvalamak için zaman kazanmamıza oldukça yardımcı olabilir. Gerisini sadece elle yapmamız gerekiyor; Muhtemelen yukarıdaki sınırlamalar kararlı.
