Conditionally import partials - Compass [duplicate]

Question

I'm trying to conditionally import a sass partial if it exists to override a set of default styling variables. I'm looking for a means to accomplish the following, given that @import directives cannot be nested:

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

Import directives may not be used within control directives or mixins, so what is the proper approach for referencing a partial that may or may not exist?

Answer 1

You can't explicitly use the import directive inside control directives.

"It’s not possible to nest @import within 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 this there are sort of ways of getting around it with the @content directive. But it really depends on what your task really boils down to.

One example which would produce multiple .css file outputs for each theme, you might approach 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";

In another case, to produce multiple theme options in a single .css output you might have to rely on complex looping like this:

//
// 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);