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?

Ourself

You shouldn't need to create a variables file by hand if you're using it as a Compass extension. The command compass install foundation should have generated a _settings.scss file for you. – Bespeak

@cimmanon, I'm not using compass; I'm letting Rails' asset pipeline take care of compilation, and bundler for dependency management. – Ourself

Answer 1

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).

Bespeak

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

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

@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. – Bespeak

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! – Joab

Answer 2

I had similar issue, where I wanted to simply use a variable from another file, without import of all CSS.

The @use keyword of newer Sass-versions can be used to ensure CSS is not emitted more than once.

The down-sides are:

• Only "Dart Sass" supports compiling it (at least, at time of writting).
• @use rules must be written before any other rules.
• Last but not least, we can not simply replace @import with @use, and need to prefix scope, like:

  @use '../my-module';
  
  body {
      background-color: my-module.$my-variable;
  }
  

Warning: @extends keyword(s) can not have my-module. prefix, because extensions are not scoped at all (at least, at time of writting).

Testudo