有條件導入partials - 指南針

我想有條件地導入sass部分，如果它存在覆蓋一組默認樣式變量。我在尋找實現以下的一種手段，因爲@import指令不能嵌套：有條件導入partials - 指南針

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

導入指令可能無法控制指令或混入內使用，那麼什麼是引用部分的正確方法那可能存在也可能不存在？

來源

2013-04-10 RhinoWalrus

我可以添加一個空的佔位符文件來實現這一點，但會更喜歡一些更整潔。 – RhinoWalrus 2013-04-10 16:01:26

你在這裏！^_^ http://stackoverflow.com/questions/13954330/compass-and-sass-possible-to-auto-import-all-partials – 2013-04-10 20:14:29

回想起來，最好的解決辦法，你大概會使用JavaScript來有條件地加載主題資產或模塊。

來源

2014-02-15 00:59:46

是的，這是我是如何結束解決它（通過yepnope：http：//yepnopejs.com/）。我可能應該留下評論以在我工作後關閉循環。謝謝您的回答！ – RhinoWalrus 2014-02-18 15:58:22

這不是一個好的解決方案，我們需要一種方式在sass中..也許使用mixin ... – Parhum 2014-05-20 15:09:29

對於mixin解決方案，請參閱此處：http://stackoverflow.com/a/13879344/1446845 – Nobita 2014-12-26 22:14:58

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

來源

2014-02-14 07:01:07

有條件導入partials - 指南針

回答

相關問題