¿Puede el minificador de SASS eliminar estilos duplicados?

Question

Sé que las reglas de css son bastante complejas; sin embargo, el optimizador no pudo reducir de manera sencilla los siguientes css de varias maneras. Y si es así, ¿hay alguna opción en la gema 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; 
} 

Contexto adicional:

Para ayudar a aclarar, yo propondría lo siguiente, así ...

Fuente:

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

Y, me gustaría que un compilador para generar lo siguiente:

span { 
    background: blue; 
    color: green; 
} 

Sé que hay estilos redundantes, pero esto sucede muchas veces al revisar continuamente las hojas de estilo, y quiero eliminar el código muerto.

Answer 1

No, que yo sepa, SASS será único formato de su código de manera diferente, pero no optimizarlo para que http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#output_style

Ampliando el comentario de Whymarrh, CSSTidy tiene una utilidad de línea de comandos que pudiera integrarse en un proceso de construcción o similares, http://packages.ubuntu.com/hardy/csstidy

Answer 2

Para optimizar el código, utilice siempre la opción '--style comprimida' en su línea commend

Por ejemplo:

sass --watch screen.sass --style compressed 

SASS hace su vida mucho más fácil, pero en el estado actual no es posible tener optimizaciones perfectas a menos que pueda escribir el código Ruby y lo escriba usted mismo. Hay algunas soluciones que pueden parecer torpes en su ejemplo, pero la idea subyacente es que ahorre tiempo y no tenga que escribirlo usted mismo.

por ejemplo, su probablemente podría optimizar su código utilizando (espacios también deben ser eliminados) éstos enfoque:

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

en lugar de:

span { 
    background: red; 
    color: green; 
} 

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

en puro CSS, ya que es compatible con la sintaxis SASS más nueva en SASS puede hacerlo por:

%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 
} 

incluso si no usamos el estilo separada por comas, como lo haría en su CSS llanura que produciría código optimizado:

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

y no repetir mismo atributo y valores:

span { 
    background: red; 
    color: green; 
} 

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

¿Ha notado utilicé '% theme-' en vez de '.theme-' que hace la diferencia en su salida. El selector de clase se incluiría en su archivo de salida

y dos propiedades innecesarias de 'color' con valores 'heredar' no se eliminarían incluso en el modo comprimido.

Answer 3

creo que puedo haber encontrado la forma de, al menos, encontrar los estilos duplicados en tanto css y Sass/menos plantillas:

El código abierto csscss joya http://zmoazeni.github.io/csscss/

Parece ser capaz de detectar duplicados, aunque estoy teniendo un parche de mono alrededor de los css de la gema bootstrap-sass que no están en la misma carpeta que mis activos de css.

De la documentación, puede ejecutar:

$ csscss -v path/to/styles.css 

o

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