CODEWITHSUNDEEP
sasszurb-foundationcompass-sass
Hernan Rajchert
Hernan Rajchert

Reputation: 936

Can I avoid duplicated css with Zurb Foundation 4?

Im using ZF4 and I recently noted how big my css files are. On one page in particular I have 10 lines of sass, that uses the grid mixins, so I "optimized" my imports, and got to this

@import "settings";
@import "foundation/components/global"; // *always required
@import "foundation/components/grid";

.tag-list-filter {
    @include grid-row('nest-collapse');

    .sub-nav {
        @include grid-column(6);
        margin: 0;
    }
    .date-in-filter {
        @include grid-column(4,true);
        label {
            display: inline;
        }
        input[type="text"] {
            display: inline;
            width: 50%;
        }
    }
}

The two imports gives me an overhead of 700 lines of CSS!!!. And Im more than glad to add those 700 lines in my app.css, given that I have lots of pages that uses the grid system, but why should I have that much duplicated css in all my pages?

Is there a way I can avoid that?

Upvotes: 0

Views: 376

Answers (1)

Hernan Rajchert
Hernan Rajchert

Reputation: 936

@Cimmanon advice was right, and adding this solved my problem:

@import "settings";
$include-html-grid-classes: false;
$include-html-classes: false;
$include-print-styles: false;

@import "foundation/components/global"; // *always required
@import "foundation/components/grid";

Every component probably haves it's own variable to control whether to print styles or not.

By the way, Zurbs documentation could use a "Performance tips" section and include this tip in it. And also the don't include foundation as a whole in each page.

Upvotes: 1

Related Questions