Chuyển đổi SCSS / LESS ↔ CSS

Biên dịch SCSS, Sass cú pháp thụt lề và LESS sang CSS thuần, hoặc làm ngược lại: biến một stylesheet phẳng thành SCSS lồng nhau hay CSS nesting gốc. Mọi thứ chạy trong trình duyệt của bạn: trình biên dịch Sass và Less chỉ được tải về ở lần biên dịch đầu tiên, và nội dung bạn gõ không bao giờ được tải lên máy chủ.

Các bước sử dụng

1. Chọn một tab ở phía trên: SCSS / Sass → CSS, LESS → CSS hoặc CSS → SCSS (lồng nhau).
2. Gõ hoặc dán vào ô Đầu vào, hoặc chọn một đoạn mẫu ở Nạp ví dụ. Ô CSS đầu ra cập nhật ngay sau khi bạn ngừng gõ.
3. Với Sass, chọn Cú pháp (SCSS hoặc Sass (thụt lề)) và Kiểu đầu ra (Mở rộng hoặc Nén gọn). Với LESS, đặt Nén, chế độ Phép tính và Đơn vị nghiêm ngặt.
4. Bật Source map để xem JSON của source map bên dưới kết quả.
5. Nhấn Sao chép hoặc Tải xuống để lấy kết quả.

Import và các tệp phụ

@use, @forward và @import không bao giờ đọc ổ đĩa hay mạng. Thay vào đó, nhấn biểu tượng thêm tệp ở cuối hàng tab, nhập Tên tệp rồi dán nội dung tệp. Sau đó tệp chính có thể nạp nó:

• Sass tìm theo quy tắc quen thuộc: @use "tokens" sẽ tìm _tokens.scss, tokens.scss, tokens.sass hoặc tokens/_index.scss — trước hết cạnh tệp đang import, sau đó từ thư mục gốc.
• LESS tự thêm .less khi tên không có phần mở rộng, nên @import "variables" nạp variables.less. Lệnh import tệp .css được giữ nguyên là @import CSS thuần.

Lỗi biên dịch cho biết tệp, dòng và cột, kèm đoạn code gây lỗi được tô sáng giữa vài dòng xung quanh. Cảnh báo tính năng lỗi thời của Sass — ví dụ `@import` hay dùng `/` để chia — được liệt kê riêng với các thông báo `@warn` và `@debug` thông thường, để vấn đề thật sự dễ thấy hơn.

CSS → SCSS (lồng nhau)

Dán CSS thuần rồi chọn Đầu ra: SCSS hoặc CSS lồng nhau gốc.

• .btn:hover trở thành &:hover bên trong .btn, .card .title trở thành .title bên trong .card, còn .a > .b trở thành > .b.
• Các quy tắc có cùng selector được gộp lại, và các quy tắc có chung phần đầu được đặt dưới một cha chung ngay cả khi trước đó chưa có quy tắc nào cho cha đó.
• Quy tắc bên trong @media, @supports, @layer và @container được lồng ngay trong khối của chúng. @keyframes, @font-face và @page được chép nguyên vẹn, và comment được giữ lại.
• Tách màu lặp lại thành biến $ đưa mọi màu dùng từ hai lần trở lên thành $color-1, $color-2, … ở đầu tệp. Tuỳ chọn này chỉ áp dụng cho SCSS và không động vào chuỗi, url() hay custom property.

Việc lồng nhau không bao giờ làm thay đổi ý nghĩa CSS của bạn. Đặt một quy tắc vào trong một cha ở phía trên nghĩa là đưa nó lên cao hơn trong tệp, điều này chỉ quan trọng khi có quy tắc ở giữa đặt cùng thuộc tính. Khi đó quy tắc được giữ nguyên chỗ cũ, và một ghi chú cho biết quy tắc cùng thuộc tính nào đã chặn nó. Thuộc tính viết tắt và viết đầy đủ (`margin` và `margin-top`), tiền tố trình duyệt và `all` được coi là cùng một thuộc tính.

Mẹo

• Để rút gọn hoặc làm đẹp CSS thuần, hãy dùng công cụ Làm Đẹp / Rút Gọn Code — có đường dẫn ở đầu trang.
• Chọn một ví dụ sẽ thay thế đầu vào hiện tại và mọi tệp phụ.
• Ví dụ cú pháp thụt lề chuyển cú pháp sang Sass (thụt lề); các ví dụ SCSS sẽ chuyển lại.
• Lệnh CSS @import "theme"; được viết thành @import url("theme"); trong SCSS đầu ra, để Sass giữ nó là import CSS thay vì đi tìm một tệp Sass.
• CSS lồng nhau gốc luôn bắt đầu selector lồng bằng &, cách viết chạy được trên mọi trình duyệt có hỗ trợ nesting.

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

Code của tôi có bị gửi lên máy chủ không?

Không. Dart Sass và Less.js chạy ngay trong tab trình duyệt. Chúng chỉ được tải về ở lần đầu bạn biên dịch, và stylesheet của bạn không bao giờ rời khỏi thiết bị.

Vì sao công cụ không tìm thấy tệp tôi @import?

Công cụ không truy cập được máy tính của bạn hay Internet, nên chỉ nạp được các tệp bạn thêm dưới dạng tab. Hãy thêm một tab và kiểm tra Tên tệp khớp với tên mà lệnh import yêu cầu: partial của Sass có thể bắt đầu bằng _, tệp LESS cần đuôi .less (hoặc đúng tên bạn import), và thư mục phải nằm trong tên khi lệnh import có dùng, ví dụ partials/_colors.scss.

Vì sao một quy tắc không được lồng trong SCSS đầu ra?

Hoặc có một quy tắc nằm giữa nó và cha của nó đặt cùng thuộc tính — lồng vào sẽ đưa nó lên trước quy tắc đó và làm đổi giá trị thắng — hoặc selector của nó không thể lồng một cách chính xác: cha là danh sách selector, cha có ::before, selector mà công cụ không hiểu, hoặc quy tắc vốn đã chứa quy tắc lồng. Phần ghi chú bên dưới kết quả liệt kê từng trường hợp kèm số dòng.

Công cụ dùng phiên bản Sass và Less nào?

Trình biên dịch Dart Sass chính thức (chính là bản bạn có khi chạy npm install sass) và Less 4, nên các tính năng hiện đại như @use, sass:math, map và each() của Less đều dùng được.

Tôi có dùng được cho cả một dự án không?

Công cụ xử lý được mọi thứ bạn dán vào, kể cả nhiều partial. Với một bản build thật có hàng trăm tệp, hãy chạy trình biên dịch từ công cụ build của bạn.