Does @import 'compass' includes the whole framework?

Question

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.

Answer 1

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.