Cách dùng Trình biên dịch LESS sang CSS
- Dán mã Less của bạn vào.
- CSS sẽ được biên dịch ngay khi bạn gõ; nếu có lỗi, hệ thống sẽ chỉ ra dòng và giải thích.
- Chọn “Minify” khi dùng cho production, rồi sao chép hoặc tải CSS về.
Trình biên dịch xử lý những gì
Đây là Less.js, trình biên dịch Less chính thức, chạy trực tiếp trên trình duyệt của bạn: @variables, lồng nhau với &, mixin (có tham số và guard), phép toán như @base * 2, các hàm màu như darken() và fade(), @media bubbling, escaping và e().
Less so với Sass
Cả hai đều bổ sung biến, lồng nhau và mixin cho CSS. Less được viết bằng JavaScript và từng được Bootstrap 3 cùng nhiều theme admin sử dụng; Sass (SCSS) hiện phổ biến hơn cho dự án mới. CSS thuần ngày nay cũng đã bù đắp một phần khoảng cách nhờ custom properties và lồng nhau, được các trình duyệt hiện đại hỗ trợ.
Import
Trình duyệt không thể đọc các file @import "variables.less" của riêng bạn, vì vậy hãy dán nội dung của chúng lên phía trên đoạn mã sử dụng chúng.
Riêng tư theo thiết kế
Quá trình biên dịch diễn ra hoàn toàn trên trình duyệt của bạn, mã không bao giờ được tải lên, nên an toàn cho các dự án độc quyền.
Cũng được tìm dưới tên: less sang css, trình biên dịch less, chuyển less sang css, biên dịch less online, lesscss compiler, convert less to css.
Các công cụ dùng kèm tốt với Trình biên dịch LESS sang CSS
- Chuyển SCSS sang CSS — Dán mã SCSS hoặc Sass thụt lề để nhận CSS thuần.
- Định dạng CSS — Chuyển stylesheet đã nén thành CSS dễ đọc, mỗi thuộc tính một dòng và các khối @media được lồng đúng cấu trúc.
- Nén CSS — Dán stylesheet vào để thu nhỏ ngay lập tức.
- Chuyển CSS sang Tailwind — Dán các quy tắc hoặc khai báo CSS và nhận ngay danh sách class Tailwind tương ứng cho từng selector, bao gồm trạng thái hover: và giá trị tùy chỉnh như p-[13px].