有条件导入partials - 指南针

Question

我想有条件地导入sass部分，如果它存在覆盖一组默认样式变量。我在寻找实现以下的一种手段，因为@import指令不能嵌套：

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

导入指令可能无法控制指令或混入内使用，那么什么是引用部分的正确方法那可能存在也可能不存在？

Answer 1

回想起来，最好的解决办法，你大概会使用JavaScript来有条件地加载主题资产或模块。

Answer 2

您不能在控制指令中明确使用import指令。

“在mixin或控制指令中嵌套@import是不可能的。” - Sass Reference

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

如果你真的需要这种有几分避过它与@content指令的方式。但这取决于你的任务真正归结为什么。这将产生多个.css文件输出为每个主题

一个例子，你可以接近这样的：

_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"; 

在另一种情况下，产生单一的CSS输出多个主题选项，您可能需要依靠复杂的循环是这样的：

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