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

Question

I need to have special scss file that is different for every installation of the project, so I don't want to include it in git archive. But everything should work even if this file doesn't exist.

Is there any way to @import scss file only if it exists, ignoring file not found error?

Answer 1

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/

Answer 2

Maybe with sass-globbing and a naming convention for optional files follow a specific order of loading.

Consider the following tree:

stackoverflow-14975341/
├── .gitignore
├── config.rb
├── css/
│   └── screen.css
└── sass/
    ├── optionals/
    │   ├── .gitkeep
    │   ├── _01_style.scss
    │   └── _03_style.scss
    └── screen.scss

with these files:

# config.rb
require 'sass-globbing'

sass_dir   = 'sass'
css_dir    = 'css'
relative_assets = true

and

// sass/screen.scss
@import "optionals/*";

and

// sass/optionals/_01_style.scss
.optional1 {
  background-color: red;
}

and

// sass/optionals/_03_style.scss
.optional3 {
  background-color: green;
}

and, for in the .gitignore:

sass/optional/*

Finally, to keep the optional folder, create an empty file named .gitkeep (the file name is not important).

When you compile the stylesheet, Compass generates the screen.css even if the file _02_style.scss is missing.

// css/screen.css
/* line 1, ../sass/optionals/_01_style.scss */
.optional1 {
  background-color: red;
}

/* line 1, ../sass/optionals/_03_style.scss */
.optional3 {
  background-color: green;
}

It is certainly possible to improve the system based on import additional paths.