Bourbon + Neat SCSS-библиотека создает раздутый вывод CSS

Question

Я работаю с Bourbon Neat, чтобы построить мой файл css, но я смотрю на избыточный css, который заполняется.

СКС файл имеет следующее:

.col-9 { 
    @include span-columns(9); 
} 
.col-3 { 
    @include span-columns(3); 
    @include omega(); 
} 

вывод CSS для следующих действий:

.col-9 { 
    float: left; 
    display: block; 
    margin-right: 1.69492%; 
    width: 74.57627%; 
} 

.col-9:last-child { 
    margin-right: 0; 
} 

.col-3 { 
    float: left; 
    display: block; 
    margin-right: 1.69492%; 
    width: 23.72881%; 
    margin-right: 0; 
} 

.col-3:last-child { 
    margin-right: 0; 
} 

Следующий вывод КСС раздутый как следующий CSS подпирать

float: left; 
display: block; 

и col-3: last-child и col-9: last-child также могут быть сгруппированы

Я делаю что-то неправильно? Как я могу структурировать scss для получения желаемого результата.

.col-9, 
.col-3 { 
    float: left; 
    display: block; 
} 

.col-9 { 
    margin-right: 1.69492%; 
    width: 74.57627%; 
} 
.col-3 { 
    margin-right: 1.69492%; 
    width: 23.72881%; 
    margin-right: 0; 
} 

.col-9:last-child, .col-3:last-child { 
    margin-right: 0; 
} 

Answer 1

Это именно то, что вы должны ожидать от использования библиотеки Neat mixin. Если вы посмотрите here, вы увидите, что каждое использование @span-columns() даст display: block; и float. Как отметил @Rob, это нормально и, как вы указываете, потенциальное препятствие для использования этой библиотеки.

Вы правы в том, что более оптимизированный вывод CSS должен состоять в объединении подобных свойств вместе. Хотя в вашем случае это должно быть обработано с помощью задачи пост-обработки, а не внутри самой библиотеки Neat mixin. Я считаю, что если вы используете что-то вроде clean-css, вы должны объединить схожие свойства и получить результат, который вы ищете. Вы также можете использовать модуль Gulp minify-css.