Does @import 'compass' includes the whole framework?

compass-sass

Solution

According to the docs `@import 'compass'` will import CSS3, Typography and Utilities modules. These modules won't inject anything into your output CSS, they contain only mixins.

By limiting import to a specific module or submodule (i.e. `@import 'compass/css3/image'`) you will reduce the time required to compile your SASS files into CSS.

For example, lets create two files.

// all.scss

@import "compass";

.candy {
  @include background(linear-gradient(top left, #333, #0c0));
}

// module.scss

@import "compass/css3/images";

.candy {
  @include background(linear-gradient(top left, #333, #0c0));
}

If we compile them (`compass compile sass/FILENAME.scss`), result CSS will be identical:

.candy {
  background: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #333333), color-stop(100%, #00cc00));
  background: -webkit-linear-gradient(top left, #333333, #00cc00);
  background: -moz-linear-gradient(top left, #333333, #00cc00);
  background: -o-linear-gradient(top left, #333333, #00cc00);
  background: linear-gradient(top left, #333333, #00cc00);
}

Now lets add `--time` argument to the compilation command and compare the results. For my machine, it took 1.516 s to compile `all.css` vs only 0.108 s for `module.css`.

Problem

I started to importing shared things like variables and mixins in one place - css manifest file. Now I'm importing some Compass mixins using direct path to the files. My question is if using `@import 'compass'` injects the whole framework into application.css or is it done by looking by references in sass files and then importing only needed mixins? I don't want to include everything.

Original source