Trình biên dịch Less sang CSS trực tuyến
Biên dịch Less sang CSS trong trình duyệt. Biến, cấu trúc lồng nhau, mixin và phép toán được trình biên dịch less.js chính thức chuyển thành CSS thuần, giúp bạn kiểm tra đầu ra mà không cần cài lessc.
Kiểm tra CSS được tạo từ biến, cấu trúc lồng nhau và mixin của Less.
Less
CSS
Khi nào nên sử dụng
- Kiểm tra CSS được tạo từ biến, cấu trúc lồng nhau và mixin của Less.
- Chuyển đổi một tệp Less nhỏ cho dự án dùng CSS thuần.
Cách sử dụng
- Dán mã Less hoặc mở tệp .less.
- Chọn thiết lập tiền tố nhà cung cấp cho các trình duyệt mục tiêu.
- Kiểm tra CSS được tạo rồi sao chép.
Less đầu vào
@primary: #2563eb;
.button {
color: @primary;
&:hover { text-decoration: underline; }
}CSS đầu ra
.button {
color: #2563eb;
}
.button:hover {
text-decoration: underline;
}Chi tiết và giới hạn
Biến chưa được định nghĩa hoặc dấu ngoặc chưa đóng sẽ khiến quá trình biên dịch dừng lại. Hãy bắt đầu bằng một đoạn mã ngắn khi tìm nguyên nhân lỗi.
Việc biên dịch diễn ra trong trình duyệt. Lệnh @import trỏ đến URL bên ngoài có thể khiến trình duyệt tải tài nguyên đó, vì vậy nên dùng mã không phụ thuộc tài nguyên bên ngoài.
Công cụ không hỗ trợ nhập các tệp cục bộ khác, trình cắm Less hoặc tùy chọn biên dịch riêng của dự án. Tiền tố nhà cung cấp phụ thuộc vào thiết lập trình duyệt mục tiêu.
FAQ
Công cụ này có giống biên dịch bằng lessc không?
Công cụ dùng less.js, cùng trình biên dịch mà lessc sử dụng, nên tệp không phụ thuộc tài nguyên bên ngoài sẽ tạo ra CSS giống nhau với tùy chọn mặc định. Các tính năng của dự án như nhập tệp cục bộ và trình cắm không được hỗ trợ ở đây.
Tôi có thể biên dịch tệp dùng @import không?
Trình duyệt không thể phân giải các lệnh nhập trỏ đến tệp khác trên máy tính của bạn. Hãy dán trực tiếp mã cần nhập hoặc biên dịch toàn bộ dự án bằng lessc.
Less khác CSS như thế nào?
Less là bộ tiền xử lý CSS. Nó bổ sung biến, cấu trúc lồng nhau, mixin và hàm, và cần được biên dịch thành CSS trước khi trình duyệt có thể sử dụng.