Loading Global SASS Files in Multiple Compass Projects

Loading global SASS files in multiple Compass projects

Chris Eppstein, the creator of Compass, has a video describing exactly how to do that here:
https://vimeo.com/13804978

Essentially, you'll create a framework in one of your projects, and then build any future other projects (or retroactively add a line to older projects' configurations) to include that framework.

Use multiple SASS files

What Rich Bradshaw mentions is correct, however here is another approach that you could take.

Create 1 scss file called combined.scss (for example) then inside of this file @import all your scss files, then simply run sass --style compressed --watch combined.scss:combined.css and it will detect changes to the imported scss files and recompile as needed.

Combined.scss example:

@import "reset";
@import "layout";
@import "styles";
@import "ie";

So when you make a change to the layout.scss file combined.scss will recompile and all your actual html pages will need to reference is combined.css.

But like I said, Rich Bradshaw's solution will work just as well and depending on the project you're working on might be better to use.

When using SASS how can I import a file from a different directory?

UPDATE: Please consider Mikka's answer first - it should work without flaw if you're only interested in including subdirectories. My answer is specific to including directories other than subdirectories, but works for those, too. But: It's not the idiomatic way to do it.

---

Looks like some changes to SASS have made possible what you've initially tried doing:

@import "../subdir/common";

We even got this to work for some totally unrelated folder located in c:\projects\sass:

@import "../../../../../../../../../../projects/sass/common";

Just add enough ../ to be sure you'll end up at the drive root and you're good to go.

Of course, this solution is far from pretty, but I couldn't get an import from a totally different folder to work, neither using I c:\projects\sass nor setting the environment variable SASS_PATH (from: :load_paths reference) to that same value.

Several CSS output with grunt-contrib-compass

I think you should try grunt-contrib-sass that have internal support for compass:

https://npmjs.org/package/grunt-contrib-sass

from documentation:

compass 
Type: Boolean
Default: false

Make Compass imports available and load project configuration 
(config.rb located close to the Gruntfile.js).

And you can use global patterns of gruntjs:

http://gruntjs.com/configuring-tasks#globbing-patterns

sass: {
 dist: {
  files: [
    {
      src: 'app/styles/specific/**/*.scss', 
      dest:'.tmp/styles/specific.css'
    },
    {
      src: ['app/styles/**/*.scss', '!app/styles/specific/**/*.scss'],    
      dest:'.tmp/styles/main.css'
    }
  ]
 }
}

Importing Compass CSS3 mixins with Foundation

If you are using the sass/compass version of foundation 4 and created a project by using

compass create myproject -r zurb-foundation --using foundation

Then you would add @import "compass/css3" to the stylesheets/app.scss at the top of the file.

This allows you to use any of the css3 mixins in your file, such as:

.myclass {
  @include border-radius(12);
}

You must run compass watch or run compass compile in your project directory after you make the changes to have the new css generated.

@import is loading the libary and @include is the method that generates css within your class.

UPDATE:

I am showing a modified app.scss file (truncated) so you can see how I made the modifications:

// Global Foundation Settings
@import "settings";

// Comment out this import if you don't want to use normalize
@import "normalize";

// Comment out this import if you are customizing you imports below
@import "foundation";

// Import Compass CSS3 Stuff
@import "compass/css3";

// Import specific parts of Foundation by commenting the import "foundation"
// and uncommenting what you want below. You must uncomment the following if customizing

// @import "foundation/components/global"; // *always required
// ...
// @import "foundation/components/dropdown";

.myclass {
  @include border-radius(12);
}

which generates the following in stylesheets/app.css:

/* line 52, ../sass/app.scss */
.myclass {
  -webkit-border-radius: 12;
  -moz-border-radius: 12;
  -ms-border-radius: 12;
  -o-border-radius: 12;
  border-radius: 12;
}

How to import scss file in compass only if it exists?

You'll need to make use of the "import-path" option to do this, where the path you're importing contains the fallback files you want to import (in our case, we want an empty file).

Option 1: Vanilla Sass

File structure

├── fallback
    ├── _example.scss // <-- our blank file
├── _example.scss // <-- the file for the user to customize (optional)
├── style.scss

In style.scss:

@import "example";
/* the rest of our styles */

When you run your sass command, you would write it like this:

sass --watch ./css:./sass --load-path ./sass/fallback

Note that the fallback directory does not have to be inside your sass directory, it be anywhere on the filesystem you like.

See also: How does SCSS locate partials?

Option 2: Compass Extension

You may find that creating a Compass extension is a little more convenient if you're using this technique in multiple projects. It will automatically setup the load-path for you. You can learn more about creating extensions here: http://compass-style.org/help/tutorials/extensions/

---

Related Topics