CSS'i Less'e Dönüştürücü
CSS kodunu iç içe geçirmeli Less'e dönüştürün
CSS Girişi
Dönüştürülmüş Less
CSS'den LESS'e Dönüştürme Nedir?
Aynı CSS seçicilerini tekrar tekrar yazmaktan sıkıldınız mı? Bu araç düz CSS'inizi düzgün iç içe geçirme ile LESS (Leaner Style Sheets) formatına dönüştürür. Üst seçicileri stil sayfanızda tekrarlamak yerine LESS, alt seçicileri üst seçiciler içinde iç içe geçirmenize olanak tanır.
LESS, CSS'i değişkenler, mixin'ler, fonksiyonlar ve en önemlisi iç içe geçirme ile genişleten bir CSS ön işlemcisidir. Dönüştürücümüz düz CSS kurallarınızı otomatik olarak iç içe geçmiş LESS sözdizimine yeniden düzenler.
Dönüştürme işlemi akıllıdır: ilgili seçicileri gruplar, medya sorgularını ve :hover, ::before gibi sözde seçicileri korur ve tüm CSS özelliklerinizi olduğu gibi muhafaza eder. Her şey tarayıcınızda anında gerçekleşir – yükleme yok, sunucu işlemesi yok, tamamen özel.
CSS'i Less'e Dönüştürücü Nasıl Kullanılır
CSS'i iç içe geçirmeli Less'e dönüştürmek için bu adımları izleyin.
Yapıştır, Yükle veya Örnek Yükle
Sol CSS Girişi paneline CSS yapıştırın veya Yükle'ye tıklayarak .css dosyası yükleyin. Örnek stiller görmek için Örnek'e tıklayın. Örnek sıkıştırılmış giriş:
.subscriber-card{border:1px solid #e0e0e0;padding:16px;border-radius:8px}.subscriber-card .plan-badge{display:inline-block;padding:4px 8px;background:#e3f2fd;border-radius:4px}.subscriber-card .plan-badge:hover{background:#bbdefb}Dönüştürülmüş Less'i Görüntüle
Sağ Dönüştürülmüş Less paneli anında iç içe geçmiş LESS'i gösterir. Üst seçiciler tanımlanır, alt seçiciler bunların altında iç içe geçirilir. Medya sorguları ve :hover gibi sözde seçiciler korunur.
Kopyala veya İndir
Kopyala'ya tıklayarak panoya kopyalayın veya İndir'e tıklayarak .less olarak kaydedin. Yeniden başlamak için Temizle'yi kullanın.
Gerçekten Ne Zaman Kullanırsınız
LESS'e Geçiş
Projenizi düz CSS'den LESS'e taşımayı mı planlıyorsunuz? Bu araç yapısal dönüşümü otomatik olarak gerçekleştirir. Dönüştürmeden sonra değişkenler, mixin'ler ve LESS'e özgü özellikler ekleyebilirsiniz.
Takım Standardizasyonu
Farklı ekip üyeleri CSS'i farklı şekillerde yazmış olabilir. LESS'e dönüştürmek tutarlı iç içe geçirme kalıplarını zorlar ve projedeki stil sayfası yapısını standartlaştırır.
Kod Tekrarını Azaltma
LESS iç içe geçirme tekrarlanan üst seçicileri ortadan kaldırarak kodunuzu daha DRY (Don't Repeat Yourself) yapar.
Sık Sorulan Sorular
Dönüştürmeden sonra CSS'im tam olarak aynı kalacak mı?
Evet. LESS iç içe geçirme tamamen sözdizimseldir – aynı CSS'e derlenir. İç içe geçmiş LESS kodu, bir LESS işlemcisi tarafından derlendiğinde orijinal CSS'inizle birebir aynı çıktıyı üretir.
Medya sorgularını işliyor mu?
Kesinlikle. Medya sorguları korunur ve doğru şekilde iç içe geçirilir. Medya sorguları içindeki kurallar düzenli kalır ve LESS dosyalarınızda duyarlı tasarımı korumayı kolaylaştırır.
:hover gibi sözde seçiciler ne olur?
Tam destek. Sözde seçiciler tanınır ve doğru şekilde iç içe geçirilir. :hover, :focus ve diğer sözde sınıflarınız işlevsel kalır ve üst seçicileri içinde düzgün organize edilir.
Dönüştürülmüş LESS'i hemen kullanabilir miyim?
Evet. Çıktı hemen çalışan geçerli LESS sözdizimidir. Projenizde LESS kullanıyorsanız çıktı dosyasını derleyin ve başladığınız CSS'i geri alırsınız.
Dönüştürmeden sonra değişkenler nasıl eklerim?
Geçerli LESS koduna sahip olduğunuzda, tekrarlanan değerleri (renkler, yazı tipi boyutları vb.) bulun ve bunları LESS değişkenleriyle değiştirin. Örneğin dosyanız boyunca #333333'ü @dark-color ile değiştirin. Değişken sözdizimi için LESS belgelerine bakın.
CSS verilerim bir yerde saklanıyor mu?
Hayır. Tüm dönüştürme JavaScript kullanılarak tarayıcınızda gerçekleşir. CSS'iniz bilgisayarınızdan hiçbir zaman çıkmaz ve verilerinizi saklamaz veya analiz etmeyiz. Tam gizlilik.