Czy miniligator SASS może usunąć powielone style?

Question

Wiem, że zasady CSS są dość skomplikowane; jednak, czy następujące parametry nie mogą być po prostu zredukowane na wiele sposobów przez optymalizator? A jeśli tak, czy istnieje opcja dla niego w klejnocie szyn?

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

dodatkowy kontekst:

Aby pomóc wyjaśnić, chciałbym zaproponować następujące, jak również ...

Źródło:

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

I chciałbym kompilatora wygenerować następujące:

span { 
    background: blue; 
    color: green; 
} 

Wiem, że istnieją zbędne style, ale zdarza się to wielokrotnie podczas ciągłego sprawdzania arkuszy stylów i chcę wyeliminować martwy kod.

Answer 1

Nie dlatego, że wiem, SASS sformatuje tylko kod inaczej, ale nie zoptymalizować go dla Ciebie http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#output_style

poszerzając komentarzu Whymarrh, w CSSTidy ma linię narzędzie polecenia, które mogą być zintegrowane w procesie budowania lub podobne, http://packages.ubuntu.com/hardy/csstidy

Answer 2

Aby zoptymalizować kod zawsze używać sprężonego --style '' opcji w linii pochwalić

na przykład:

sass --watch screen.sass --style compressed 

SASS ułatwia Ci życie, ale w obecnym stanie nie można uzyskać idealnych optymalizacji, chyba że możesz napisać kod ruby ​​i napisać go samemu. Istnieje kilka obejść, które mogą wyglądać na niezręczne w twoim przykładzie, ale idea, która za tym stoi, aby zaoszczędzić czas i nie trzeba go wpisywać samodzielnie.

na przykład mógłby swój prawdopodobnie optymalizacji kodu przy użyciu (przestrzenie powinny być usunięte) nich podejście:

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

zamiast:

span { 
    background: red; 
    color: green; 
} 

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

w czystym CSS, ponieważ jest on zgodny z nowsza składnia SASS w SASS można to zrobić przez:

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

nawet jeśli nie używaliśmy oddzielonych przecinkami stylu jak chcesz w swoim zwykłym CSS byłoby produkować zoptymalizowany kod:

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

i nie powtarzać tego samego atrybutu i wartości:

span { 
    background: red; 
    color: green; 
} 

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

Zauważyłeś Użyłem '% theme-' zamiast '.theme-', co powoduje różnicę w wynikach. Selektor klasy byłby zawarty w pliku wyjściowym

, a dwie niepotrzebne właściwości "koloru" z wartościami "dziedziczącymi" nie zostałyby usunięte nawet w trybie skompresowanym.

Answer 3

myślę, że mogę się znaleźć sposób, aby przynajmniej znaleźć duplikaty style zarówno CSS Sass/mniej szablonów:

open source csscss kosztownych http://zmoazeni.github.io/csscss/

To wydaje się być w stanie wykryć duplikaty, mimo że mam do poprawki małpy wokół bootstrap-sass gem css nie jest w tym samym folderze co moje zasoby css.

z dokumentacji, można uruchomić:

$ csscss -v path/to/styles.css 

lub

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