sass - 有条件地导入部分 - compass

Question

这个问题在这里已经有了答案:





How to import scss file in compass only if it exists?

(2 个回答)


5年前关闭。




如果存在覆盖一组默认样式变量，我正在尝试有条件地导入 sass 部分。鉴于 @import 指令不能嵌套，我正在寻找一种方法来完成以下操作:

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

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

Answer 1

您不能在控制指令中显式使用 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);