Xem trước trực tiếp với LESS hoặc SCSS?

Question

Tôi đang cố gắng tìm hiểu xem có cách nào để sử dụng LESS hoặc SCSS mà không phải lưu tài liệu hoặc làm mới trình duyệt. Tại thời điểm này tôi sử dụng CSS Chỉnh sửa rất tuyệt vời để xem trước trực tiếp nhưng tôi không thể tìm thấy cách để xem trước trực tiếp hoạt động với LESS hoặc SCSS. Tình huống lý tưởng của tôi là để có được một thiết lập trực tiếp thực sự (hoặc gần với) làm việc với Textmate và broswer của tôi. Tôi đã xem xét một vài lựa chọn, WebPutty là tuyệt vời nhưng nó trong bản Beta và dựa trên web vì vậy tôi rất thích một giải pháp có thể phù hợp với công việc hiện tại của tôi.

Rất cám ơn

Answer 1

Đây có thể là những gì bạn đang tìm kiếm: livereload.com

tôi chỉ mới tìm thấy này bản thân mình trong khi Googling cho cùng một vấn đề, Haa!

Hiện chỉ dành cho máy Mac 64 bit. Nó cũng trong phiên bản beta .. Phiên bản Windows dưới dev.

Dường như không tìm thấy liên kết đến v1 được đề cập trên trang web?

Answer 2

live.js là giải pháp của bạn :)

Nó không không chỉ làm việc với html, js, css nhưng cũng ít hơn. Bạn cần phải đánh lừa nó với filetype của css:

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

Answer 3

Nếu bạn đang sử dụng tập tin tĩnh bạn có thể sử dụng mã này lấy từ 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 --> 

Tuy nhiên, nếu bạn đang sử dụng localhost, tôi đã không tìm ra cách để có được điều này để làm việc được nêu ra.

Answer 4

Đã thử phiên bản dấu trang trên đường ray máy chủ cục bộ. Làm việc một cách dễ dàng! CssRefresh

Answer 5

Kiểm tra EDGE. http://getedge.io - nó cho phép bạn chỉnh sửa các tệp Sass và LESS từ Sublime Text hoặc Textmate. Không cần lưu tệp - nó sẽ cập nhật khi bạn nhập. Bạn có thể đăng ký bản beta riêng tư ngay bây giờ.

Answer 6

Đồng nghiệp của tôi và tôi đã bỏ qua http://less2css.org ngày khác. Cho phép bạn chọn phiên bản và xem ít chuyển đổi hơn trong thời gian thực.

Hy vọng nó sẽ giúp ai đó.

Answer 7

Tôi nghĩ hiện không có tiện ích bổ sung như vậy, nhưng tôi cũng là người hâm mộ của Live CSS Editor (nếu đó là ý của bạn bằng CSS Edit).

Tôi nghĩ sẽ rất hữu ích khi có thứ gì đó tương tự với hỗ trợ SASS hoặc LESS, vì vậy tôi đã tạo mẫu thử nghiệm nhanh cho tiện ích bổ sung của Chrome (tương tự như Live CSS Editor). Nó bao gồm đánh dấu cú pháp và hỗ trợ LESS khi sử dụng client-side LESS library. Ứng dụng này không thân thiện với người dùng nên không phải là ứng cử viên cho Cửa hàng Chrome nhưng đây là số Google Code Project nơi có thể tải xuống và tải xuống Chrome dưới dạng tiện ích mở rộng chưa được giải nén. Tôi sẽ cố gắng cải thiện nó theo thời gian, nhưng bất kỳ ai cũng có thể thử;)

Ảnh chụp màn hình và nhiều hơn một chút là in this blog post.

Answer 8

Không có giải pháp hoàn chỉnh cho những gì bạn đang tìm kiếm. công cụ dev Chrome (với bản đồ nguồn sass kích hoạt) là đặt cược tốt nhất của bạn, nhưng tôi không nghĩ rằng bạn có thể làm mixins

http://livestyle.emmet.io/ là một tùy chọn mà bạn có thể muốn thử

Chân đế hoạt động tốt với những thay đổi trực tiếp nhưng áp dụng chỉ cho chrome

Dưới đây là những gì tôi làm và nó phục vụ mục đích và hoạt động giống như một nét duyên dáng trong Mac/PC và linux có một mở thiết bị đầu cuối mà không sass --watch có một thiết bị đầu cuối/ứng dụng cho phép bạn chạy live- tải lại

Sass của bạn sẽ biên dịch và ngay khi bảng định kiểu của bạn thay đổi tất cả các trình duyệt của bạn, hãy làm mới Nhưng bạn không thể thực hiện thao tác với kiểu này, nghĩa là trang S refresh làm mới (nếu bạn muốn hộp thoại chủ đề, bạn sẽ phải mở lại) Nhưng có các công cụ khác có sẵn để tiêm kiểu cũng như

Hy vọng điều này sẽ hữu ích!