Conditionally import scores - Compass

Question

I am trying to conditionally import a partial sass, if one exists, to override the set of standard styles. I am looking for a means to achieve the following, given that @import directives cannot be nested:

@if 'partials/theme'{ @import 'partials/theme'; } 

Import directives cannot be used in management directives or mixins, so what is the right approach to refer to a partial that may or may not exist?

Answer 1

In retrospect, the best solution that you probably use to conditionally load JavaScript in thematic assets or modules.

Answer 2

You cannot explicitly use the import directive inside control directives.

"Cannot embed @import in mixins or control directives." - Sass Reference

  error sass/screen.scss (Line 9: Import directives may not be used within control directives or mixins.) 

If you really need it, there are ways to get around it using the @content directive. But it really depends on what your task really comes down to.

One example that would produce multiple .css files for each topic can be done like this:

_config.scss

 $theme-a: false !default; // add content only to the IE stylesheet @mixin theme-a { @if ($theme-a == true) { @content; } } 

_module.scss

 .widget { @include theme-a { background: red; } } 

all.theme-a.scss

 @charset "UTF-8"; $theme-a: true; @import "all"; 

Otherwise, you may have to rely on a complex loop to create multiple theme options in a single .css output file:

 // // Category theme settings // ------------------------------------------ // store config in an associated array so we can loop through // and correctly assign values // // Use this like this: // Note - The repeated loop cannot be abstracted to a mixin becuase // sass wont yet allow us to pass arguments to the @content directive // Place the loop inside a selector // // .el { // @each $theme in $category-config { // $class: nth($theme, 1); // $color-prop: nth($theme, 2); // // .#{$class} & { // border: 1px solid $color-prop; // } // } // } // $category-config: 'page-news-opinion' $color-quaternary, 'page-advertising' #e54028, 'page-newspaper-media' $color-secondary, 'page-audience-insights' $color-tertiary, ; $news-opinion-args: nth($category-config, 1); $news-opinion-class: nth($news-opinion-args, 1); $news-opinion-color: nth($news-opinion-args, 2); $advertising-args: nth($category-config, 2); $advertising-class: nth($advertising-args, 1); $advertising-color: nth($advertising-args, 2); $news-media-args: nth($category-config, 3); $news-media-class: nth($news-media-args, 1); $news-media-color: nth($news-media-args, 2); $audience-args: nth($category-config, 4); $audience-class: nth($audience-args, 1); $audience-color: nth($audience-args, 2);