Sass importing without compiling

Question

In sass, the way one imports is by using the import command. I will use Zurb Foundation as an example:

@import "foundation";

This will then import the whole foundation.scss file and all it's relative imports to the top of the current file. This means that the entire foundation.scss file will be compiled and outputted along with the contents of the file to the final <name here>.css file.

Though this is good for customisation, such as custom colors and spacing, it becomes a pain when creating libraries and distributing these libraries as individual droplets for other people to slot into their existing projects.

Is there a way to import files as "references", so that mixins and other variables become available in the scope of the current file, but other css statements are ignored? The LESS css preprocessor has a newly implemented import tag similar to this (appropriately named a reference).

Answer 1

Taking a look at Foundation demonstrates a good approach to this:

https://github.com/zurb/bower-foundation/blob/master/scss/foundation/components/_breadcrumbs.scss

Here they have one @import "global"; at the top of the file.

That is followed by a bunch of mixins

At the bottom they have:

@include exports("breadcrumbs") {
  @if $include-html-nav-classes {
    .breadcrumbs {
      @include crumb-container;
      @include radius($crumb-radius);

      &>* {
        @include crumbs;
      }
    }
  }
}

The $include-html-nav-classes is set to true by default in the _global.scss file. It can be overridden in any other file by changing it to false. This allows you to both use the mixins and generate html.

If you don't need to generate any css just include mixins only and it will simplify your situation. I believe that they do this to allow for fast customization and optimization of the outputted css.