Có mã định dạng Sass nào không?

Question

Có mã định dạng làm đẹp mã nào cho mã Sass (SCSS) không? Tôi biết làm thế nào để định dạng mã CSS đầu ra được tạo ra bởi trình biên dịch SCSS nhưng làm thế nào để cung cấp cho định dạng tự động tốt đẹp để mã SCSS chính nó?

Tôi đã thử một số trình định dạng CSS trực tuyến nhưng chúng không hoạt động với mã SCSS.

Nếu tôi đưa cái này cho chúng

.list5 { 
    border-bottom: 1px solid #f2f2f1; 
    padding: 0 0 20px 0; 
    margin: 0 0 20px 0; 
ul li { 
    margin: 0 0 5px 25px !important; 
    height: auto !important; 
    background: none !important; 
    font-size: 14px; 
    padding: 18px 3px 5px !important; 
    width: 169px !important; } 
} 

họ cung cấp cho sản lượng này

.list5 { 
    border-bottom: 1px solid #f2f2f1; 
    padding: 0 0 20px 0; 
    margin: 0 0 20px 0; 
    margin: 0 0 5px 25px !important; 
    height: auto !important; 
    background: none !important; 
    font-size: 14px; 
    padding: 18px 3px 5px !important; 
    width: 169px !important; 
} 

mà loại bỏ phần này ul li {}

Answer 1

online

Dán bạn CSS/SCSS/LESS trong để dirtystylesheet.com và nhấn sạch

Via Command Line

Via dòng lệnh, bạn có thể định dạng lại CSS/SCSS/Sass sử dụng sass-convert kịch bản:

$ sass-convert messy.scss clean.scss 

hoặc CSS để SCSS:

$ sass-convert messy.css clean.scss 

hoặc SCSS để Sass:

$ sass-convert messy.scss clean.sass 

Tập lệnh sass-convert được cài đặt khi bạn cài đặt Sass. Nó có thể chuyển đổi bất kỳ hướng nào giữa: css, scss và sass.

Tìm hiểu thêm về sass-convert:

• Truy cập built-in giúp đỡ: $ sass-convert --help
• http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#syntax
• http://sass-lang.com/docs/yardoc/#executables

nâng cao sử dụng tip: Bởi vì cú pháp sass là khắt khe hơn nhiều (chỉ cho phép property: value cặp trên mỗi dòng) bạn ít có khả năng gặp phải sự cố với mã lộn xộn.

Answer 2

Tôi chạy mã qua Pretty Diff và tôi đã nhận ra điều này:

.list5 { 
    border-bottom:1px solid #f2f2f1; 
    padding:0 0px 20px 0px; 
    margin:0 0px 20px 0px; 
    ul li { 
     background: none !important; 
     font-size: 14px; 
     height: auto !important; 
     margin: 0px 0px 5px 25px !important; 
     padding: 18px 3px 5px !important; 
     width: 169px !important; 
    } 
} 

Là những gì bạn đang tìm kiếm? Có vẻ lạ đối với CSS.

Answer 3

Khá khác sẽ bỏ "$" khỏi các biến của bạn.

Bạn có thể thử: http://www.prettyprinter.de/

Đó không phải là hoàn hảo nhưng ít nhất nó indents một cấp thêm cho các quy tắc lồng nhau và từ những gì tôi đã nhìn thấy giữ tất cả những thứ SCSS hoang sơ (.ie không cởi nó ra).

Trân

Answer 4

http://hilite.me/ - hỗ trợ Sass và SCSS

JSFiddle sẽ làm các trick là tốt. Chỉ cần nhấn nút TidyUp

Answer 5

Nếu bạn sử dụng văn bản tuyệt vời tôi có thể khuyên SassBeautify để nhanh chóng định dạng bất kỳ sass/SCSS https://packagecontrol.io/packages/SassBeautify