Sang CSS từ Sass
Biên dịch Sass và SCSS sang CSS trực tuyến. Chuyển đổi thời gian thực với đầu ra mở rộng hoặc nén, báo lỗi theo dòng và hỗ trợ đầy đủ biến, mixin, lồng nhau.
Sass và SCSS khác nhau thế nào?
SCSS là cú pháp mới hơn giống CSS, dùng ngoặc nhọn và dấu chấm phẩy. Sass (cú pháp thụt lề) dùng thụt lề và xuống dòng. Công cụ này biên dịch cả hai - chỉ cần chọn cú pháp trong danh sách.
Những tính năng Sass nào được hỗ trợ?
Bộ biên dịch dùng engine Dart Sass chính thức nên hỗ trợ biến, lồng nhau, mixin, @include, hàm, @use, @extend, các chỉ thị điều khiển như @if và @each, cùng kiểu đầu ra nén.
Làm sao để có CSS nén (minified)?
Đổi danh sách kiểu đầu ra sang Nén trước khi biên dịch. Khoảng trắng và dấu chấm phẩy cuối bị loại bỏ, tạo ra bảng kiểu nhỏ nhất có thể.
Vì sao lỗi hiển thị số dòng?
Khi mã có lỗi cú pháp, engine Sass báo chính xác dòng và cột bị lỗi phân tích, và công cụ hiển thị ngay trên phần đầu ra để bạn sửa nhanh.
Mã Sass của tôi có bị tải lên máy chủ không?
Không. Toàn bộ engine Dart Sass được đóng gói cùng trang và biên dịch cục bộ trong trình duyệt. Bảng kiểu của bạn không bao giờ rời khỏi thiết bị, an toàn kể cả với dự án riêng tư.
Có biên dịch được @import tệp cục bộ không?
Không. Bộ biên dịch chỉ xử lý một đoạn mã trong bộ nhớ và không truy cập hệ thống tệp của bạn, nên import dựa trên tệp và @use các partial bên ngoài không thể phân giải.
Có hoạt động ngoại tuyến không?
Có. Sau khi trang và gói biên dịch được tải một lần, việc biên dịch diễn ra hoàn toàn trên máy của bạn, không cần kết nối.
Dùng kết quả thế nào?
Sao chép CSS đã biên dịch hoặc tải về dưới dạng style.css bằng các nút dưới phần đầu ra, rồi liên kết trong HTML hoặc dán vào bảng kiểu của dự án.
Cách sử dụng Sang CSS từ Sass
Trình biên dịch này chạy chính engine Dart Sass hoàn toàn trong trình duyệt của bạn. Dán SCSS hoặc Sass thụt lề và nhận CSS sạch ngay lập tức — hỗ trợ biến, mixin, lồng nhau và hàm, không tải lên bất cứ đâu.
- Dán mã Sass hoặc SCSS vào ô nhập liệu, hoặc nhấn Ví dụ để tải bản demo hoạt động có biến và mixin.
- Chọn cú pháp (SCSS hoặc Sass thụt lề) và kiểu đầu ra (Expanded hoặc Compressed) trong các menu thả xuống.
- Khi Biên dịch trực tiếp đang bật, CSS xuất hiện ngay khi bạn gõ; nếu không, nhấn Biên dịch để chạy thủ công.
- Nếu có lỗi cú pháp, số dòng chính xác cùng thông báo sẽ hiện phía trên kết quả để bạn sửa nhanh.
- Dùng Sao chép hoặc Tải xuống bên dưới kết quả để lấy stylesheet đã biên dịch thành style.css.
Chọn kiểu đầu ra Compressed để minify stylesheet — rất tiện cho bản build production trực tiếp từ mã nguồn.
Công cụ liên quan
- Làm đẹp CSS Định dạng và làm đẹp mã CSS ngay lập tức. Chuyển đổi CSS đã nén thành mã dễ đọc với các tùy chọn tùy chỉnh.
- Trình nén CSS Trình nén CSS trực tuyến miễn phí. Nén và tối ưu hóa mã CSS ngay lập tức bằng cách loại bỏ khoảng trắng, nhận xét và ký tự không cần thiết. Giảm kích thước tệp để tăng hiệu suất web.
- Trình tạo Gradient CSS Tạo gradient CSS tuyệt đẹp trực quan. Tạo gradient tuyến tính, hướng tâm và hình nón với nhiều điểm dừng màu, góc và vị trí tùy chỉnh. Sao chép mã CSS sẵn sàng sản xuất ngay lập tức.
- Trình tạo CSS Flexbox Trình tạo CSS Flexbox trực quan với xem trước trực tiếp. Điều chỉnh thuộc tính flex và nhận mã CSS sẵn sàng sử dụng.
- Máy tính Chmod Máy tính chmod trực tuyến miễn phí để trực quan hóa và tính toán quyền tệp Linux với hộp kiểm. Chuyển đổi ngay lập tức giữa ký hiệu số (755, 644) và tượng trưng (rwxr-xr-x). Hỗ trợ quyền đặc biệt như setuid, setgid, sticky bit.
- Bảng ASCII Tham khảo mã hóa ký tự ASCII đầy đủ với mã thập phân, thập lục phân, bát phân, nhị phân, thực thể HTML và mô tả ký tự. Tìm kiếm và lọc tức thì.
- Trình kiểm tra yêu cầu HTTP Kiểm tra API REST trực tiếp trong trình duyệt. Gửi yêu cầu GET, POST, PUT, DELETE với header, body và tham số tùy chỉnh. Xem trạng thái, header và body JSON phản hồi ngay lập tức.
- Trình tạo .htaccess Tạo quy tắc .htaccess Apache cho chuyển hướng, viết lại, tiêu đề bảo mật, bộ nhớ đệm và hơn thế nữa.