How can one import only variables and mixins from Sass stylesheets?

Question

I'm using the Zurb Foundation 4 (S)CSS framework, and I'm running into an issue of massively duplicated styles. This is because in every file that I @import 'foundation' in, all styles from Foundation are also imported (rules for body, .row, .button and friends). This leads to long SCSS compile times and a hard to navigate web developer console in Chrome, as all of Zurb's styles are declared four or five times.

To mitigate this, I've created a globals scss file, which contains the overrideable variables that Foundation uses (it's copy-pasted from foundation_and_overrides.scss, then foundation_and_overrides import globals). Importing just the globals.scss file gets rid of duplication only in files that don't make use of Foundation mixins.

It's in the files which make use of Foundation mixins: Can I import only the mixins from an SCSS file, without importing the concrete Foundation styles?

Solution

Imports are an all or nothing thing. Everything that's in the file is what you get. If you look through the source of Foundation, though, there are variables you can modify that will suppress emitting styles (eg. in buttons, setting $include-html-button-classes to false will disable the styles). This design pattern is Foundation specific, you cannot expect other libraries to be authored this way.

When you import foundation via @import "foundation", you're importing this file: https://github.com/zurb/foundation/blob/master/scss/foundation.scss. As you can see, it imports other files. You don't have to import this file if you don't need everything: just import the specific file you want (eg. @import 'foundation/components/side-nav' for only the side-nav file).

Comments

[dymk]

Thanks, I wasn't aware of the suppression variables that Foundation provides. Those should help quite a bit.

[Neil]

Is there anyway to focus on downloading the bullet nav scss/css rather than the whole block of styles?

[cimmanon]

@NeilLittle See the "Imports are an all or nothing thing" part of the answer. You can't pick and choose portions of a file unless the author has written it in a way that allows you to do so.

[Adrian Föder]

a supplement: just found the line, for example, $include-html-button-classes: $include-html-classes !default; Looks like setting $include-html-classes to false will make Foundation emit no styles at all!