Chuyển SCSS sang CSS — Biên dịch Sass online

Trình biên dịch xử lý những gì

Đây là Dart Sass, bản triển khai tham chiếu của Sass, chạy trực tiếp trong trình duyệt của bạn. Mọi tính năng của ngôn ngữ đều hoạt động: biến, lồng nhau với &, mixin và @include, @extend, hàm, map, vòng lặp, điều kiện @if, cùng hệ thống module với @use cho các module tích hợp như sass:math và sass:color.

SCSS và Sass thụt lề

SCSS là phần mở rộng của CSS với dấu ngoặc nhọn và dấu chấm phẩy. Mọi CSS hợp lệ đều là SCSS hợp lệ. Cú pháp thụt lề (tệp .sass) cũ hơn, dùng thụt đầu dòng thay cho dấu ngoặc và xuống dòng thay cho dấu chấm phẩy. Cả hai đều biên dịch ra cùng một kết quả CSS, bạn chỉ cần chọn cú pháp mà tệp của mình đang dùng.

Import từ các tệp khác

Trình duyệt không thể đọc các tệp khác trong dự án của bạn, nên @use "variables" hoặc @import "mixins" trỏ tới các partial của bạn sẽ không được giải quyết ở đây. Hãy dán nội dung của các partial lên phía trên đoạn mã sử dụng chúng. Các cảnh báo deprecation từ Sass, ví dụ với darken(), sẽ hiển thị bên dưới kết quả cùng gợi ý thay thế.

Riêng tư theo thiết kế

Việc biên dịch hoàn toàn diễn ra trong trình duyệt. Mã của bạn không bao giờ được tải lên máy chủ, nên an toàn cho các dự án độc quyền.

Cũng được tìm dưới tên: scss sang css, sass sang css, trình biên dịch scss, biên dịch sass online, công cụ chuyển scss, scss to css online.

Các công cụ dùng kèm tốt với Chuyển SCSS sang CSS

• Trình biên dịch LESS sang CSS — Dán mã Less và nhận ngay CSS thuần, được biên dịch bởi công cụ Less.js chính thức ngay trên trình duyệt của bạ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].