SASS Placeholders for Grid and Column Mixins to Avoid Code Bloat

[ghost]

SASS Mixins are known to increase code bloat. Wherever a mixin is defined it is replaced with actual CSS code. This isn't so much problematic but when using SASS to create a grid system - as opposed to using class names in the HTML - the compiled CSS can get exponentially large.

May I offer an alternative solution to this by introducing SASS placeholders? When placeholders are defined, the CSS is never compiled unless the placeholder is extended. When they are extended, the compiled CSS for each placeholder is only defined once in CSS and any element that extends the placeholder is added as a selector.

Let me provide an example:

Here I define a placeholder for 5 grid columns.

%columns-5 {
    @include grid-column(5);
}

Here I extend it.

header {
    @extend %columns-5;
}

navigation {
    @extend %columns-5;
}

The resulting CSS then becomes

header, navigation {
    // Code from the grid-column(5) mixin
 }

This makes much more sense in OOCSS, and avoids bloated CSS files produced by SASS.

Documentation on SASS placeholders can be found here: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#placeholders

Thanks

[ghost]

I was going to make a PR then I realized the difficulty in doing this because the actual mixin for creating columns can have a number of optional parameters.

[hatefulcrawdad]

Yep, this is why we did it as a mixin. If you can think of a great way to do it with placeholder, we'd love to see a PR!

[vinayraghu]

Actually, doing it with extend only placeholders would cause confusion in the CSS that is being output. Refer https://github.com/zurb/foundation/issues/3049?source=c#issuecomment-22888917

We can track this issue there