LESS veya SCSS ile canlı önizleme?

Question

Belgeyi kaydetmeye veya tarayıcıyı yenilemeye gerek kalmadan LESS veya SCSS kullanmanın bir yolu olup olmadığını anlamaya çalışıyorum. Şu anda canlı önizleme için harika olan CSS Edit'i kullanıyorum ancak LESS veya SCSS ile çalışmak için canlı önizleme yapmanın bir yolunu bulamıyorum. İdeal durumum, Textmate ve broşürüm ile çalışarak gerçek bir canlı (veya yakınına) kurulumunu elde etmekti. Birkaç seçeneğe baktım, WebPutty harika ama Beta ve web tabanlı, bu yüzden mevcut iş akışımma sığabilecek bir çözümü çok isterim.

çok teşekkürler

Answer 1

Bu aradığınızı olabilir: Aynı sorun, Haa Googling ederken sadece bu kendimi buldum livereload.com

!

Şu anda yalnızca 64 bit Mac'ler içindir. Ayrıca beta .. Windows sürümü dev altında.

Sitedeki v1 ile ilgili bir bağlantı bulamıyor gibi görünüyor mu?

Answer 2

live.js çözüm :)

O html, js, css değil, aynı zamanda daha az çalışmak etmez ibaret değildir. Sen css ait filetype ile kandırmak zorunda: Eğer statik dosyaları kullanıyorsanız

<link rel="stylesheet/less" type="text/css" href="stylesheets/main.less.css"> 

Answer 3

localhost kullanıyorsanız, ben, Ancak http://f.cl.ly/items/0y2G351r3O3T3j1b401u/Live-LESS-previewing-in-Espresso.html

<!-- Link directly to LESS stylesheet first --> 
<link rel="stylesheet/less" href="style.less" type="text/css" media="screen" /> 

<!-- Then link to LESS, and enable development watch mode --> 
<script src="less-1.2.1.min.js" type="text/javascript"></script> 
<script type="text/javascript" charset="utf-8"> 
    less.env = "development"; 
    less.watch(); 
</script> 
<!-- Voilà! Instant LESS previews in Espresso --> 

alınan bu kodu kullanabilirsiniz ve henüz bunu nasıl çalıştıracağını anlayamadım.

Answer 4

Yer işareti sürümünü, rayların yerel sunucusunda denedi. Bir esinti çalışıyor! CssRefresh

Answer 5

EDGE'ye bakın. http://getedge.io - Sublime Text veya Textmate'den Sass and LESS dosyalarını düzenlemenize izin verin. Dosyayı kaydetmenize gerek yok - yazdıkça güncellenir. Şu anda özel beta için kayıt olabilirsiniz.

Answer 6

İş arkadaşım ve diğer bir gün http://less2css.org'u çırpıyordum. Sürümü seçmenize ve gerçek zamanlı olarak daha az dönüştürülmüş halini görmenize izin verir.

Birilerine yardım edeceğini umarız.

Answer 7

Şu anda böyle bir eklenti yok, ama aynı zamanda Live CSS Editor hayranıyım (eğer CSS Edit tarafından kastettiyseniz buysa).

Sanırım SASS veya LESS desteğiyle benzer bir şeye sahip olmak yararlı olur, bu yüzden Chrome eklentisi için hızlı bir prototip hazırladım (Live CSS Editor'e analog). Sözdizimi vurgulama ve client-side LESS library kullanımı ile LESS desteği içerir. Bu kullanıcı dostu değil, Chrome Mağazası'na aday değil, ancak burada Chrome'a ​​indirilip paketlenmemiş uzantı olarak yüklenebilecekleri Google Code Project. Zaman içinde bunu geliştirmeye çalışacağım, ama başka biri de deneyebilir;)

Ekran resimleri ve biraz daha fazlası in this blog post.

Answer 8

Aradığınızı tam bir çözüm yok.(Küstahlık kaynak haritaları etkin) Krom dev araçları en iyi bahis ama Katmalar

http://livestyle.emmet.io/ yapabilirsiniz sanmıyorum Eğer

Desteklerini denemek isteyebilirsiniz başka bir seçenek canlı değişikliklerle zaman işe yarıyor ama uygular sadece krom için

İşte

benim yaptığım ve o amaca hizmet eder ve çalıştırmanıza olanak sağlar başka bir terminal/app var --watch küstahlığı işlevlerinden biri terminali açık olan mac/pc ve linux bir cazibe canlı çekim gibi çalışır yeniden yükle

Sassınız derlenecek ve stil sayfanız değiştiğinde tüm tarayıcılarınız yenilenir Ancak bununla stil enjeksiyonu yapamazsınız, yani sayfa yenilenir (tema diyalogları yapmak isterseniz, tekrar açmanız gerekir) Ancak stil enjeksiyonu için kullanılabilir başka araçlar da vardır.

Bu yardımcı olur!