Công cụ CSS

Bộ công cụ CSS tất cả trong một: định dạng/làm đẹp, thu gọn/nén, kiểm tra cú pháp, biên dịch SCSS/Sass & LESS thành CSS, và chuyển ngược CSS về SCSS hoặc LESS.
Mọi xử lý diễn ra cục bộ trong trình duyệt của bạn — dữ liệu của bạn không bao giờ được tải lên máy chủ nào.
Chế độ:
CSS / SCSS / LESS / SASS đầu vào
Đầu ra
Cách dùng: Dán CSS/SCSS/LESS/SASS vào ô bên trái, chọn chế độ, rồi nhấn Xử lý (hoặc chỉ cần gõ — tự xử lý khi nhập).
Cách mỗi chế độ hoạt động
Định dạng CSS: Định dạng CSS với thụt lề nhất quán (2/4 khoảng trắng hoặc tab), mỗi thuộc tính một dòng. Xử lý các at-rule lồng như @media, @keyframes, @supports. Giữ nguyên chú thích (cả /* */ và một dòng). Đổi bộ chọn Thụt lề để chuyển giữa 2 khoảng trắng, 4 khoảng trắng hoặc tab.
Thu gọn: Bỏ mọi khoảng trắng không cần thiết, chú thích và ký tự thừa để tạo CSS gọn nhất. Lý tưởng để triển khai production nhằm giảm kích thước tệp và băng thông. Xem thanh thống kê để thấy tỷ lệ nén.
Kiểm tra: Phân tích CSS và kiểm tra lỗi cú pháp. Báo lỗi phân tích với số dòng và cột chính xác. Cũng hiển thị thống kê: số quy tắc, bộ chọn, khai báo và at-rule.
Định dạng SCSS: Định dạng lại bảng kiểu SCSS/Sass với thụt lề nhất quán. Xử lý toàn bộ cú pháp riêng của SCSS: $biến, @mixin/@include, @extend, luồng điều khiển @if/@for/@each, nội suy #{$var}, và chú thích một dòng //. Giữ cấu trúc bộ chọn lồng và thụt lề đúng các khối lồng. Đổi bộ chọn Thụt lề để chuyển giữa 2 khoảng trắng, 4 khoảng trắng hoặc tab.
Định dạng LESS: Định dạng lại bảng kiểu LESS với thụt lề nhất quán. Xử lý toàn bộ cú pháp riêng của LESS: @biến, mixin tham số, guard (when), nội suy @{var}, gộp và chú thích một dòng //. Giữ cấu trúc bộ chọn lồng và thụt lề đúng các khối lồng. Đổi bộ chọn Thụt lề để chuyển giữa 2 khoảng trắng, 4 khoảng trắng hoặc tab.
SCSS → CSS: Biên dịch bảng kiểu SCSS/Sass thành CSS thuần bằng bộ biên dịch chính thức Dart Sass (v1.102). Hỗ trợ biến ($var), lồng nhau, mixin (@mixin, @include), hàm, @extend, luồng điều khiển @if/@for/@each, và các module Sass hiện đại (@use, @forward). Bộ biên dịch Sass (~5.4 MB) được tải lười khi bạn dùng chế độ này lần đầu.
LESS → CSS: Biên dịch bảng kiểu LESS thành CSS thuần. Hỗ trợ biến (@var), lồng nhau, mixin, mixin tham số, phép toán, hàm, guard và import (@import). Bộ biên dịch (~150 KB) được tải lười khi bạn dùng chế độ này lần đầu.
SASS → CSS: Biên dịch cú pháp SASS thụt lề (tệp .sass, không có dấu ngoặc nhọn, không có dấu chấm phẩy) thành CSS thuần bằng Dart Sass. SASS thụt lề dùng khoảng trắng có nghĩa thay cho dấu ngoặc nhọn, nên gọn hơn. Cùng bộ biên dịch Dart Sass (~5.4 MB) xử lý cả cú pháp SCSS và SASS thụt lề.
CSS → SCSS: Chuyển CSS chuẩn sang cú pháp SCSS với tái cấu trúc lồng nhau tự động. Nhận diện các mẫu kiểu BEM và chuyển bộ chọn .parent-child thành khối lồng &-child. Chuyển bộ chọn hậu duệ thành quy tắc lồng, bộ chọn pseudo-class thành &:state, và trích các thuộc tính tùy chỉnh CSS lặp lại thành $biến SCSS. Nếu CSS của bạn có cấu trúc phẳng và lặp lại, công cụ này sẽ giúp bạn tái cấu trúc thành SCSS lồng gọn hơn.
CSS → LESS: Chuyển CSS chuẩn sang cú pháp LESS với tái cấu trúc lồng nhau tự động. Cùng kiểu lồng nhau như CSS→SCSS: nhận diện mẫu cha lặp lại, bộ chọn hậu duệ và pseudo-class. Trích các thuộc tính tùy chỉnh CSS lặp lại thành @biến LESS. Đầu ra là mã LESS lồng nhau gọn gàng.
Cascade, độ đặc hiệu và vì sao các kiểu xung đột

Khi nhiều quy tắc nhắm vào cùng một phần tử, độ đặc hiệu quyết định người thắng: kiểu nội tuyến thắng id, id thắng lớp, lớp thắng bộ chọn phần tử, và thứ tự nguồn phá thế hòa. Cờ !important ghi đè phép tính này — và làm cho lần ghi đè kế tiếp khó hơn nhiều.

Độ đặc hiệu được chấm theo từng bộ chọn, không cộng dồn từ ngữ cảnh — một quy tắc cụ thể hơn thắng bất kể nó nằm ở đâu trong bảng kiểu.