CSS Tasarımlarınızı CSS George ile Tarayıcıda Düzenleyin

Hiç istedin mi doğrudan düzenlemeler yapmak tarayıcınızda CSS dosyalarınıza geri dönmeden mi? Çözümlerden biri Chrome Geliştirici Araçları, ancak bazı geliştiricilerdir daha basit bir iş akışı tercih et.

Bu nerede CSS George içeri gelir. Bu ücretsiz tarayıcı içi düzenleme aracı Eserleri LESS'in tepesinde ve tarafından başlatılır basit JavaScript dosyası.

Çoğu geliştirici tarayıcı tabanlı editör çünkü herkes LESS ön derleyicisini kullanmaz. Fakat CSS George LESS ortamında çalışır hangi hızla kurulabilir npm ile.

Npm kurulu ise, bu basit kodu çalıştırabilirsin. kaynak dosyaları ekle şu anki projenize:

 npm kurulum - save-dev css-george 

Ya da yapabilirsin çekin George.js dosya GitHub'dan diğer tüm kaynak dosyalarının yanında barındırılıyor. Tüm proje ücretsiz ve açık kaynaktır, böylece tam kopya indir npm kullanmak istemiyorsanız GitHub’dan.

İle .js site başlığınıza eklenen dosyadan başlayabilirsiniz George fonksiyonlarını yürütmek Tarayıcıdan için editör penceresini aç, çoğu klavyenin sol üst köşesinde bulunan Shift + 'ile erişilebilir tilde tuşuna tıklayın. bir yeni Pencere Bunun gibi bir şeye benzeyen görünmelidir:

Bu ekrandan yapabilirsiniz LESS değişkenlerini düzenleme renklerden font boyutlarına veya font ailesine kadar her şey için kullanılır.

LESS eklentisinin bulunduğu yer burasıdır bir zorunluluk haline gelir çünkü CSS George’a söylemelisin. eklenecek değişkenler. Bir kere ayarlandıktan sonra, sadece CSS George tarayıcı editörünü aç ve şehre git.

Umarım bu araç bellidir yapmamalı çalışma zamanında dahil edilmek. Özellikle ziyaretçilere izin vermek istemiyorsan sayfa rengini ve stilini düzenleme, Bu genellikle iyi bir fikir değildir. Ama için yerel test, CSS George, tüm ön uç geliştiriciler için faydalı olan nadir bir araçtır.

Yapabilirsin canlı gör CSS George demo sayfasında veya tam kopya indir npm veya GitHub deposundan.