Css'i less.css dosyasına çeviren bir araç var mı?

Daha azına dönüştürmek istediğim oldukça büyük bir CSS dosyam var. CSS'yi yazarken less.css bilmiyordum, ama şimdi hala eski CSS'imi kullanmak istiyorum.

Otomatik olarak dönüştürmeme yardımcı olabilecek bir araç var mı?

Aslında şimdi bir şey buldum: http://leafo.net/lessphp/lessify/

Temel bir biçimlendirme yapar, örneğin:

#header {
/* ... */
}

#header p {
/* ... */
}

için

#header {
/* ... */
p {
/* ... */
}
}

Aslında, LESS ile çalışmaya başlamak için herhangi bir dönüştürme aracına ihtiyacınız yoktur. LESS sözdizimi, CSS ile geriye doğru uyumludur . Herhangi bir CSS dosyasının geçerli LESS dosyası olduğu anlamına gelir.

Basitçe CSS'inizi alın ve LESS dosyasına yeniden adlandırın. Ardından, değişikliklerinizle birlikte LESS'e özgü özellikleri kullanın. Dosyayı ne kadar çok güncellerseniz, LESS özelliklerini o kadar fazla kullanabilirsiniz.

Aynısını SCSS ve 10 CSS dosyası ile çok büyük bir proje için yaptım. Tüm CSS'leri SCSS ile yeniden yazmak neredeyse imkansızdı (ve çok fazla zaman kaybı). Basitçe yeniden adlandırdım, sonra her seferinde CSS dosyası üzerinde çalışırken, karışımlardan, değişkenlerden vb. Faydalanmak için kod üzerinde küçük yeniden düzenlemeler yaptım.

Least'a baktın mı? CSS'yi dönüştürmede Lessify'dan daha iyidir. Özellikle, Lessify sınıflarınızı çok iyi optimize etmiyor. Tarayıcı sıfırlandı, tüm oluşturulan mixin'leri kopyalayarak gereksiz özellikler yarattı. Hala deney aşamasında olduğu açık. Her iki yardımcı program da semantiği belirleyemez, bu nedenle değerleri ifadelere, değişkenlere veya parametrik karışımlara dönüştüremezler.

Least daha iyi bir optimizasyon işi yapar ve daha işlevsel görünmektedir. Hatta sizin için sahte gözlükleri bile kullanıyor:

http://toki-woki.net/p/least/

Bu araçlar önceden var olan büyük CSS dosyalarıyla çalışmak için idealdir. CSS'yi LESS'e dönüştürmeyi önerdiğim adımlar: (Orijinal CSS dosyalarının bir kopyasını sakladığınızdan emin olun):

1. Birkaç ek CSS dosyasıyla çalışıyorsanız, bunları tek bir CSS dosyasına birleştirin. Bu, her şeyin LESSied ve birlikte optimize edilmesini sağlar.

2. Elde edilen CSS kodunu çevrimiçi bir CSS temizleme yardımcı programı ile çalıştırın. Cleancss ile iyi sonuçlar aldım: http://www.cleancss.com/ . Bu, LESS dönüştürücü tarafından yakalanmayan yabancı ve gereksiz işaretlemeleri kaldıracaktır.

3. @Media'yı ve CSS dosyasındaki tüm stil sıfırlamalarını kaldırın. Sorun yaratabilir veya olası fazlalıklar getirebilir. Sıfırlamaları ayrı bir dosyada tutmak muhtemelen iyi bir fikirdir.

4. Elde edilen CSS dosyasını Least'e yapıştırın ve canavarı izleyin.

5. Sıfırlamalarınızı ve @ ekranınızı yeniden tanıtın.

6. Artık işiniz bitti, niteliklerin her birini inceleyin ve yeniden düzenleme için iyi adaylar bulun ve bunları LESS değişkenlerine ve ifadelerine dönüştürün. CSS color ve font nitelikleri, hesaba katılması en kolay olanlarıdır, basit genel arama ve değiştirme işleri iyidir. Sonunda, tek dosyayı daha küçük mantıksal dosyalara bölmek isteyip istemediğinize karar verebilirsiniz. İşlemin, dosyalarınızı farklı bir şekilde yeniden düzenlemenize neden olduğunu görebilirsiniz.

Ben Least'ın yazarı değilim, sadece benzer bir araç arayan biri ve dünyaya anlatmaya karar verdim.

Bir dönüştürücünün, kodun çoğuyla ne yapmak istediğinizi bilmesinin bir yolu olduğunu sanmıyorum.

Örneğin, hangi değişkenleri kullanmak istediğinizi bilmeniz gerekmez. Veya karışımların veya fonksiyonların nasıl üretileceği.

Sanırım bununla manuel olarak yapmanız gerekecek.

Ara ve değiştir.

varsa color:#ffffffve değiştirmek istiyorsanız@color

sadece arayın color:#ffffffveya color : #ffffffile değiştirin @color.

Genelde bu araçlara güvenmiyorum.

ya da onu ele gerçekten basit bir PHP betiği yazabilirsiniz.

Güncelleme 1 :
Veya daha azına benzeyen ve dönüştürücü aracı olan http://nex-3.com/posts/96-scss-sass-is-a-css-extension kullanıcılarını kullanabilirsiniz .

Bu siteyi deneyin: css2less.cc

Siz yazarken CSS’inizi LESS’e dönüştürür.