Menu icon Foundation
Reference variables without including all of Foundation?

My SCSS is structured sort of like this:

foundation.scss - just includes foundation and normalize CSS.
page1.scss - just styles for page1
page2.scss - just styles for page2

I do it this way to keep things clean, separate. I don't need one giant CSS file being generated, and since I'm bundling them anyway..

So, my question is.. let's say in "page2.scss" I want to use a function that Foundation defines, like "$small-only" -- but I obviously don't want to include all of Foundation's CSS again inside my page2.css. So.. what can I do?

I tried just @import'ing "foundation/components/global" (which contains the function) but it still spits out some of it's own CSS.

Any help would be appreciated!

scss foundation import functions

My SCSS is structured sort of like this:

foundation.scss - just includes foundation and normalize CSS.
page1.scss - just styles for page1
page2.scss - just styles for page2

I do it this way to keep things clean, separate. I don't need one giant CSS file being generated, and since I'm bundling them anyway..

So, my question is.. let's say in "page2.scss" I want to use a function that Foundation defines, like "$small-only" -- but I obviously don't want to include all of Foundation's CSS again inside my page2.css. So.. what can I do?

I tried just @import'ing "foundation/components/global" (which contains the function) but it still spits out some of it's own CSS.

Any help would be appreciated!

James Stone over 5 years ago

Have you tried setting these variables? You will need to do this before your import.

This should prevent Foundation from generating any of the html presentational classes.

$include-html-classes: false;
$include-print-styles: false;

sudbis over 1 year ago