Allow optional @imports

I believe it would be helpful to framework design and stylesheet modularity if there were a way to declare an @import which would fail gracefully if a file was not found.

Jumpt to the TL;DR

Syntax

To make it’s behavior obvious this could be a flag !optional borrowing from the style of !default and !important. It might look like this:

@import "path/to/partial" !optional;

Use case

In Octopress I’m trying to make it easy for people to easily install themes and plugins (with their Sass assets) and I want it to be easy for users to customize these theme and plugin stylesheets. At the same time I want it to be possible for users to enjoy Octopress without installing any themes or plugins. As a result I have come up with this method for managing Sass.

Let’s look at an Octopress stylesheet directory

/* A standard installation contains these two stylesheets */

site.scss         # Site import index (no not touch)
_style.scss       # Users add styles, import styles here

/* Created when a theme or plugin is installed */

plugins/
  widget-a/       # Plugins stylesheets are dir name spaced
    _style.scss   # Plugin Sass assets (imported automatically)

theme/
  _index.scss     # Theme import index (imported automatically)
  _settings.scss  # Sets Theme variables ($var: true !default;)
  core/           # Core styles (normalize, layout, color, etc)
  modules/        # Styles for components (article, sidebar, etc)

The root stylesheets site.scss uses optional imports and globbing to automatically import stylesheets from a theme or plugins.

@import "theme/index" !optional;
@import "plugins/*/style" !optional;

@import "style";             // Auto import user stylesheets

Here !optional imports would allow me to create a zero configuration install experience for end users. Users can install themes or plugins (or not) and they will automatically be imported. Also if I can reasonably expect them not to have any reason to change the site.scss file, making it easier for me to make changes to that file if needed.

Additionally if I wanted to allow users to easily override theme or plugin settings, I could change the site.scss like this:

@import "theme-settings" !optional;
@import "theme/index" !optional;
@import "plugin-settings" !optional;
@import "plugins/*/style" !optional;

@import "style";             // Auto import user stylesheets

This will allow a user to create a specific file to set default settings for a theme or plugin before it is imported. Without optional imports, a user must make changes to core files.

TL;DR

If imports can respect an !optional flag, frameworks like Octopress can create a framework which allows users to install new stylesheets without having to manage imports. Essentially this would allow zero-configuration installation for Sass stylesheets.

[migaber]

Optional @import is really important

[jslegers]

Any update on this?

I’ve literally been waiting for optional imports to be implemented for >2 years now…