Có cách nào để biên dịch các tệp LESS thành CSS (để mọi trình duyệt không phải) không?

Tôi đang xem xét sử dụng LESS nhưng tôi chùn bước khi nghĩ rằng trình duyệt bị JavaScript bị vô hiệu hóa và CSS của tôi không thể đọc được (và trang web trông thật tồi tệ).

Ngoài ra, nó xúc phạm kỹ sư trong tôi để buộc mọi trình duyệt "biên dịch" tệp Ít hơn đó thành .css khi chúng tôi chỉ có thể "biên dịch" nó một lần mỗi khi chúng tôi sửa đổi nó.

Vâng. Bạn có thể sử dụng một ứng dụng tự động biên dịch các tệp LESS thành CSS trên máy phát triển của bạn khi bạn viết mã. Sau đó, chỉ cần tải tệp CSS đã tạo lên máy chủ của bạn khi bạn hoàn tất phát triển.

• Giòn cho Windows và Mac
• WinLess cho Windows
• CodeKit cho Mac

Tôi sử dụng SimpLESS - kéo, thả, thực hiện.

LESS đi kèm với một nhị phân (lessc) cho phép bạn biên dịch trước các tệp .less của bạn. Bạn sử dụng nó như vậy:

 $ lessc styles.less > styles.css

Nhưng tôi nghĩ rằng hầu hết mọi người chỉ sử dụng lệnh lessc -whoặc lessc --watchđể biên dịch lại biểu định kiểu CSS tự động mỗi khi tệp LESS được cập nhật. Bạn cũng có thể giảm bớt CSS, vd lessc -w -x.

Chỉnh sửa: Chỉ cần làm rõ, lessc đi kèm với cài đặt phía máy chủ (nghĩa là khi bạn cài đặt ít hơn thông qua trình quản lý gói node.js). Nhưng bạn có thể tải xuống thủ công từ GitHub .

lessc nằm ở /bin/lessc. Đây là khóa học một nhị phân * nix (cũng nên làm việc cho Mac), nhưng có là một nhị phân Windows ( lessc.exe ) dựa trên dotless, mà là một trình biên dịch của Windows LESS.

Cập nhật: Sử dụng less-watchđể tự động biên dịch.

Ngoài ra, nhiều nhà phát triển ngày nay sử dụng các trình chạy tác vụ như gruntđể xử lý tự động hóa xây dựng (biên dịch, thu nhỏ, kiểm tra, v.v.). Sử dụng grunt-contrib-watch, grunt-contrib-lessvà grunt-contrib-livereload, bạn thực sự có thể sắp xếp công việc phát triển của bạn.

Ví dụ: nếu bạn sử dụng yođể dàn dựng dự án web mới của mình, thì nó sẽ được cấu hình sẵn để xem các tệp LESS / CSS / JS / HTML của bạn để thay đổi và biên dịch lại các phần cần thiết của dự án khi cần. Đơn giản chỉ cần chạy grunt servevà bạn đã sẵn sàng để viết mã mà không phải lo lắng về việc biên dịch thủ công (LESS / SASS / CoffeeScript) / rút gọn / ghép mã của bạn hoặc làm mới trình duyệt của bạn một cách thủ công như ...

Có một số tùy chọn để biên dịch LESS sang CSS trên máy chủ và tùy chọn bạn chọn có thể sẽ phụ thuộc vào những gì bạn sử dụng cho phần còn lại của trang web.

• Nếu bạn sử dụng node.js, lesscss ban đầu sẽ thực hiện công việc.
• Nếu bạn sử dụng PHP, lessphp . Nó có API hơi rác khi chuyển các biến từ PHP, nhưng nó thực hiện công việc.
• Nếu bạn sử dụng Ruby, SASS không phải là LESS, nhưng tương tự như vậy khi tôi chuyển từ sử dụng SASS (dự án cá nhân) sang LESS (một dự án PHP tại nơi làm việc), tôi không nhận thấy bất kỳ sự khác biệt nào ngoài phần mở rộng tệp. Nó cũng có một thư viện hữu ích của mixins - COMPASS . Tôi đã không thử sử dụng chúng với LESS, nhưng tôi hy vọng chúng sẽ hoạt động. (Rõ ràng LESS ban đầu là Ruby, nên có lẽ cũng có một trình biên dịch cũ trôi nổi ở đâu đó).
• Nếu bạn sử dụng ASP.Net, có .less . Tôi chưa sử dụng cái này, vì vậy tôi không biết nó hoạt động tốt như thế nào.
• Nếu bạn sử dụng Java, lesscss4j kết thúc việc biên dịch với môi trường kịch bản Rhino tích hợp sẵn của LESS và Java 6.
• Nếu bạn sử dụng Perl, sẽ có mô-đun LESSp trong CPAN.