Có một công cụ chuyển đổi css thành less.css không?

Tôi có một tệp CSS khá lớn, mà tôi muốn chuyển đổi thành ít hơn. Khi tôi viết CSS tôi không biết ít.css, nhưng bây giờ tôi vẫn muốn sử dụng CSS cũ của mình.

Có một công cụ có thể giúp tôi chuyển đổi nó tự động không?

Tôi thực sự đã tìm thấy một cái gì đó ngay bây giờ: http://leafo.net/lessphp/lessify/

Nó thực hiện một công thức cơ bản, ví dụ:

#header {
/* ... */
}

#header p {
/* ... */
}

đến

#header {
/* ... */
p {
/* ... */
}
}

Thực tế, bạn không cần bất kỳ công cụ chuyển đổi nào để bắt đầu làm việc với LESS. Cú pháp LESS tương thích ngược với CSS . Nó có nghĩa là bất kỳ tệp CSS nào cũng là tệp LESS hợp lệ.

Chỉ cần lấy CSS của bạn và đổi tên nó thành tệp LESS. Sau đó sử dụng các tính năng dành riêng cho LESS cùng với các thay đổi của bạn. Bạn càng cập nhật tệp, bạn càng có thể sử dụng các tính năng LESS.

Tôi đã làm tương tự cho SCSS và một dự án rất lớn với 10 tệp CSS. Gần như không thể (và rất lãng phí thời gian) để viết lại tất cả CSS bằng SCSS. Tôi chỉ đơn giản đổi tên nó, sau đó mỗi khi tôi làm việc với tệp CSS, tôi đã thực hiện tái cấu trúc nhỏ trên mã để tận dụng lợi thế của mixins, các biến, v.v.

Bạn đã xem ít nhất? Chuyển đổi CSS tốt hơn nhiều so với Lessify. Cụ thể, Lessify không tối ưu hóa các lớp học của bạn rất tốt. Nó sao chép trình duyệt đặt lại vào tất cả các mixin được tạo của nó, tạo các thuộc tính dự phòng. Rõ ràng là nó vẫn ở giai đoạn thử nghiệm. Không tiện ích nào có thể xác định ngữ nghĩa, vì vậy chúng không thể chuyển đổi giá trị thành biểu thức, vars hoặc mixin tham số.

Ít nhất là một công việc tối ưu hóa tốt hơn và dường như có nhiều chức năng hơn. Nó thậm chí còn xử lý giả cho bạn:

http://toki-woki.net/p/least/

Các công cụ này rất lý tưởng để làm việc với các tệp CSS có sẵn từ trước. Dưới đây là các bước tôi khuyên để chuyển đổi CSS sang LESS (Đảm bảo bạn giữ một bản sao của các tệp CSS gốc):

1. Nếu bạn đang làm việc với một số tệp CSS phụ gia, hãy hợp nhất chúng vào một tệp CSS. Điều này đảm bảo mọi thứ đều được BÀI và tối ưu hóa cùng nhau.

2. Chạy mã CSS kết quả thông qua tiện ích làm sạch CSS trực tuyến. Tôi đã có kết quả tốt với Cleancss: http://www.cleancss.com/ . Điều này sẽ loại bỏ bất kỳ đánh dấu ngoại lai và dự phòng nào có thể không bị bắt bởi trình chuyển đổi LESS.

3. Xóa @Media và mọi kiểu đặt lại mà bạn có trong tệp CSS. Họ có thể tạo ra vấn đề hoặc giới thiệu dự phòng có thể. Có lẽ là một ý tưởng tốt để giữ lại các tập tin trong một tập tin riêng biệt.

4. Dán tệp CSS kết quả vào Least và xem con thú.

5. Giới thiệu lại thiết lập lại của bạn và @screen.

6. Bây giờ bạn đã hoàn thành, đi qua từng thuộc tính và tìm các ứng cử viên tốt để tái cấu trúc và biến chúng thành các biến và biểu thức LESS. Các thuộc tính phông chữ và màu CSS là những yếu tố dễ nhất để tìm ra, tìm kiếm toàn cầu đơn giản và thay thế hoạt động tốt. Cuối cùng, bạn có thể quyết định xem bạn có muốn chia nhỏ tệp đơn thành các tệp logic nhỏ hơn không. Bạn có thể thấy rằng quá trình này khiến bạn sắp xếp lại các tệp của mình theo một cách khác.

Tôi không phải là tác giả của Least, chỉ là một người đang tìm kiếm một công cụ tương tự và quyết định nói với thế giới về nó.

Tôi không nghĩ có bất kỳ cách nào để trình chuyển đổi biết bạn muốn làm gì với phần lớn mã.

Chẳng hạn, nó không nhất thiết phải biết những biến bạn muốn sử dụng. Hoặc làm thế nào để tạo mixin hoặc chức năng.

Tôi nghĩ với cái này bạn sẽ cần phải làm nó bằng tay.

Làm thế nào về tìm kiếm và thay thế.

nếu bạn có color:#ffffffvà bạn muốn thay đổi nó thành@color

chỉ cần tìm kiếm color:#ffffffhoặc color : #ffffffvà thay thế bằng @color.

Tôi thường không tin tưởng những công cụ này.

hoặc bạn có thể viết một tập lệnh PHP thực sự đơn giản để xử lý nó.

Cập nhật 1 :
Hoặc bạn có thể sử dụng http://nex-3.com/posts/96-scss-sass-is-a-css-extension tương tự như ít hơn và nó có một công cụ chuyển đổi.

Hãy thử trang web này: css2less.cc

Nó chuyển đổi CSS của bạn thành LESS khi bạn nhập.