Conditionally import partials - Compass

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?

I can add an empty placeholder file to accomplish this, but would prefer something a bit more tidy. — RhinoWalrus, Apr 10 '13 at 16:01
Here you are! ^_^ http://stackoverflow.com/questions/13954330/compass-and-sass-possible-to-auto-import-all-partials — Andrey Mikhaylov - lolmaus, Apr 10 '13 at 20:14

score 5 · Answer 1 · answered Feb 14 '14 at 07:01

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

score 0 · Accepted Answer · answered Feb 15 '14 at 00:59

0

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

answered Feb 15 '14 at 00:59

Elise Chant

5,048
3
29
36

Yep, this is how I ended up working around it (via yepnope:http://yepnopejs.com/). I probably should have left a comment to close the loop after I got it working. Thank you for your answer! – RhinoWalrus Feb 18 '14 at 15:58
It is not good solution, we need a way in sass.. maybe using mixin... – Parhum May 20 '14 at 15:09
For a mixin solution see here: http://stackoverflow.com/a/13879344/1446845 – Aurelio Dec 26 '14 at 22:14

Conditionally import partials - Compass

2 Answers2