Может ли SASS minifier удалить повторяющиеся стили?

Я знаю, что правила css довольно сложны; однако, не мог ли следующий css быть достаточно просто уменьшен оптимизатором несколькими способами? И если это так, есть ли возможность для этого в жемчужине рельсов?

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

Дополнительный контекст:

Чтобы помочь уточнить, я бы предложил следующее...

Источник:

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

И я бы хотел, чтобы компилятор сгенерировал следующее:

span {
    background: blue;
    color: green;
}

Я знаю, что существуют избыточные стили, но это происходит много раз, когда постоянно пересматривает стили, и я хочу удалить мертвый код.

Ответы

Ответ 1

Я думаю, что я, возможно, нашел способ, по крайней мере, найти дубликаты стилей в обоих CSS и sass/less шаблонах:

Исходный код csscss gem http://zmoazeni.github.io/csscss/

Похоже, что он способен обнаруживать дубликаты, хотя у меня есть патч обезьяны вокруг самоцвета самоцвета, который не находится в той же папке, что и мои ресурсы css.

Из документации вы можете запустить:

$ csscss -v path/to/styles.css

или

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

Ответ 2

Не то, что я знаю, SASS будет только форматировать ваш код по-другому, но не оптимизировать его для вас http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#output_style

Расширяя комментарий Whymarrh, CSSTidy имеет утилиту командной строки, которая может быть интегрирована в процесс сборки или аналогичную, http://packages.ubuntu.com/hardy/csstidy

Ответ 3

Чтобы оптимизировать ваш код, всегда используйте параметр "-style compression" в вашей коммандной строке

Например:

sass --watch screen.sass --style compressed

SASS делает вашу жизнь намного проще, но в текущем состоянии невозможно добиться идеальной оптимизации, если вы не можете написать код ruby и напишите его самостоятельно. Есть некоторые обходные пути, которые могут выглядеть неудобно в вашем примере, но идея позади этого, чтобы сэкономить ваше время и не нужно вводить его самостоятельно.

например, возможно, вы можете оптимизировать свой код с помощью (пробелы также следует удалить) этот подход:

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

вместо:

span {
    background: red;
    color: green;
}

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

в чистом CSS, поскольку он совместим с новым синтаксисом SASS в SASS вы можете сделать это:

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

даже если мы не использовали стиль, разделенный запятыми, как в вашем простом CSS, он создавал бы оптимизированный код:

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

и не повторяйте один и тот же атрибут и значения:

span {
    background: red;
    color: green;
}

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

Вы заметили, что я использовал "% theme-" вместо ".theme-", что делает разницу в вашем выходе. Селектор классов будет включен в ваш выходной файл

и два ненужных свойства "цвета" со значениями "наследовать" не будут удалены даже в сжатом режиме.