Bourbon+Neat SCSS library produces bloated CSS output

Question

I am working with Bourbon Neat to build my css file but I looking at redundant css being populated.

scss file has the following:

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

CSS output for the following:

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

The following css output is bloated as the following css prop

float: left;
display: block;

and the col-3:last-child and col-9:last-child can also be grouped

Am I doing something wrong? How can I structure the scss to get the desired output.

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

Possible duplicate: http://stackoverflow.com/questions/19451296/merging-selectors-from-mixins — cimmanon, Oct 13 '15 at 23:50
@cimmanon, I don't think it's the same question. My question is specifically related to the 2 libraries (bourbon and neat) and if anyone has any suggestion to write the scss in a better way which would group selectors with common properties. — Vish, Oct 14 '15 at 00:13
So look at the source of the mixins you're using. Just because someone else wrote the mixins doesn't mean they play by different rules. — cimmanon, Oct 14 '15 at 00:14
@Rob, I understand but I am not sure if this is the library or it's the way I've written my scss. I don't believe the authors would ignore crucial details while writing the program. I am looking to get a second opinion while I investigate the source files. — Vish, Oct 14 '15 at 00:20
@cimmanon, I did and I've raised this question so someone with more experience with the library can suggest if they've faced similar problem and if they can suggest something or a better alternative. — Vish, Oct 14 '15 at 00:22

score 0 · Answer 1 · answered Oct 14 '15 at 00:40

0

This is exactly the output you should expect from using the Neat mixin library. If you look here you'll see that each use of @span-columns() will give a display: block; and float property. As @Rob mentioned, this is normal and as you're pointing out, a potential hindrance to using this library.

You are correct in that a more optimized CSS output should be to group similar properties together. Though, in your case this should be handled with a post processing task and not within the Neat mixin library itself. I believe if you use something like clean-css you should be able to merge similar properties together and get the output that you're looking for. You could also use the Gulp module minify-css.

answered Oct 14 '15 at 00:40

kretzm

762
1
7
14

I saw the source files and I'm aware of the library defaults. I do use clean-css with grunt, I wanted to know if there was some custom changes who can suggest some input on how to improve this functionality. – Vish Oct 14 '15 at 14:29
There's nothing you can do on your end to change the way the Neat framework functions. You either use a post-processing tool to do the optimizations that you suggested or you create your own Sass mixins to do what you want. Something like `@include col() { display: block; float: left; } @include columns(width) { width: percentage(width / $container-columns); }` – kretzm Oct 14 '15 at 14:57

Bourbon+Neat SCSS library produces bloated CSS output

1 Answers1