Trình chuyển đổi CSS Preprocessor

Cách dùng

1. 1 Chọn ngôn ngữ nguồn và ngôn ngữ đích.
2. 2 Dán stylesheet của bạn vào.
3. 3 Kết quả hiển thị ngay khi bạn gõ. Các thư viện nặng chỉ được tải khi cần, ở lần chuyển đổi đầu tiên.
4. 4 Sao chép hoặc tải kết quả về.

Vì sao dùng công cụ này

• Hỗ trợ đủ 5 định dạng: LESS, SCSS, SASS (indented), Stylus và CSS thuần.
• Dùng trình biên dịch thật khi có thể: <code class="rounded bg-slate-100 px-1 text-xs dark:bg-slate-800">less</code>, <code class="rounded bg-slate-100 px-1 text-xs dark:bg-slate-800">sass</code>, <code class="rounded bg-slate-100 px-1 text-xs dark:bg-slate-800">stylus</code> cho các hướng "sang CSS".
• Các hướng còn lại dùng phép biến đổi heuristic (đổi ký hiệu biến, định dạng lại dấu ngoặc/thụt lề) — nhanh nhưng không phải transpile đầy đủ.
• Hoàn toàn xử lý phía client — stylesheet của bạn không bao giờ rời khỏi trình duyệt.

Câu hỏi thường gặp

Trình chuyển đổi CSS Preprocessor là gì?

Trình chuyển đổi CSS Preprocessor là công cụ chuyển đổi stylesheet giữa LESS, SCSS, SASS, Stylus và CSS thuần ngay trên trình duyệt. Công cụ dùng trình biên dịch thật cho các hướng biên dịch về CSS, và dùng phép biến đổi heuristic cho các hướng chuyển đổi còn lại, chuyển cú pháp giữa các định dạng preprocessor hoàn toàn phía client.

Tính năng

Ví dụ

.a { .b { color: red; } }   (SCSS)

.a .b {
  color: red;
}

Trường hợp sử dụng

1. 1

   Compile SCSS to CSS

   Flatten nested SCSS into plain CSS for a quick paste or a build-free page.

2. 2

   Migrate between preprocessors

   Move a stylesheet from LESS to SCSS (or vice versa) when switching toolchains.

3. 3

   Understand compiled output

   See exactly what CSS your SCSS nesting and variables produce.

References

• Sass Documentation — Sass
• Less Documentation — Less
• CSS — MDN — MDN

Công cụ liên quan