Trình tối ưu hóa SASS có thể xóa các kiểu trùng lặp không?

Question

Tôi biết rằng các quy tắc css khá phức tạp; Tuy nhiên, css sau đây có thể được khá đơn giản giảm trong một số cách của trình tối ưu hóa? Và nếu vậy, có một lựa chọn cho nó trong đá quý rails-sass?

span { 
    background: red; 
    color: green; 
} 

.test2 { 
    background: red; 
    color: green; 
} 

span { 
    background: green; 
    color: inherit; 
} 

.test2 { 
    background: inherit !important; 
    color: inherit; 
    color: inherit; 
    color: inherit; 
} 

bối cảnh khác:

Để giúp làm rõ, tôi sẽ đề nghị sau đây cũng ...

Nguồn:

span { 
    background: red; 
} 
span { 
    background: orange; 
    color: green; 
} 
span { 
    background: yellow; 
} 
span { 
    background: blue; 
    color: green; 
} 

Và, tôi sẽ muốn có một trình biên dịch để tạo các thông tin sau:

span { 
    background: blue; 
    color: green; 
} 

Tôi biết có phong cách thừa, nhưng điều này xảy ra nhiều lần khi liên tục sửa đổi bảng định kiểu và tôi muốn loại bỏ mã chết.

Answer 1

Không mà tôi biết, Sass sẽ chỉ định dạng mã của bạn khác nhau nhưng không tối ưu hóa nó cho bạn http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#output_style

Mở rộng trên bình luận Whymarrh của, CSSTidy có một tiện ích dòng lệnh có thể được tích hợp trong một quá trình xây dựng hoặc tương tự, http://packages.ubuntu.com/hardy/csstidy

Answer 2

Để tối ưu hóa mã của bạn luôn luôn sử dụng tùy chọn '--style nén' phù khen của bạn

Ví dụ:

sass --watch screen.sass --style compressed 

SASS giúp cuộc sống của bạn trở nên dễ dàng hơn nhiều nhưng ở trạng thái hiện tại, bạn không thể tối ưu hóa hoàn hảo trừ khi bạn có thể viết mã ruby ​​và tự viết nó. Có một số cách giải quyết có thể trông khó xử được sử dụng trong ví dụ của bạn nhưng ý tưởng đằng sau nó để tiết kiệm thời gian của bạn và không phải tự mình nhập.

ví dụ bạn có thể có thể tối ưu hóa mã của bạn bằng cách sử dụng (số lượng cũng cần được loại bỏ) những cách tiếp cận:

span, .test2 { 
    background: red; 
    color: green; 
} 

thay vì:

span { 
    background: red; 
    color: green; 
} 

.test2 { 
    background: red; 
    color: green; 
} 

trong CSS tinh khiết vì nó là tương thích với cú pháp SASS mới hơn trong SASS bạn có thể thực hiện theo:

%theme-red-green { // i couldn't came up with better naming :) 
    background: red; 
    color: red; 
} 

span { 
    @extend %theme-red-green 
} 
.test2 { 
    @extend %theme-red-green 
} 

ngay cả khi chúng ta không dùng dấu phẩy để tách phong cách giống như bạn làm trong CSS đơn giản của bạn nó sẽ tạo ra mã tối ưu:

span, .test2 { 
    background: red; 
    color: green; 
} 

và không lặp lại cùng một thuộc tính và các giá trị:

span { 
    background: red; 
    color: green; 
} 

.test2 { 
    background: red; 
    color: green; 
} 

có bạn để ý tôi đã sử dụng '% theme-' thay vì '.theme-' tạo nên sự khác biệt trong đầu ra của bạn. Bộ chọn lớp sẽ được bao gồm trong tệp xuất của bạn

và hai thuộc tính 'màu' không cần thiết với giá trị 'kế thừa' sẽ không bị xóa ngay cả ở chế độ nén.

Answer 3

Tôi nghĩ rằng tôi có thể đã tìm ra cách để ít nhất tìm ra phong cách trùng lặp trong cả css và sass/templates ít:

Các mã nguồn mở csscss đá quý http://zmoazeni.github.io/csscss/

Nó xuất hiện để có thể phát hiện bản sao, mặc dù tôi đang có để khỉ vá xung quanh css bootstrap-sass đá quý không được trong cùng một thư mục như tài sản css của tôi.

Từ các tài liệu, bạn có thể chạy:

$ csscss -v path/to/styles.css 

hoặc

$ csscss -v path/to/styles.css.scss