Warunkowo importowane częściowe - Kompas

Question

Próbuję warunkowo zaimportować sass częściowy, jeśli istnieje, aby zastąpić zestaw domyślnych zmiennych styling. Szukam sposobu, aby wykonać następujące czynności, biorąc pod uwagę, że dyrektywy @import nie można zagnieżdżać:

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

dyrektyw przywozowe nie mogą być stosowane w dyrektywach kontrolnych lub wstawek, więc to, co jest właściwe podejście do odwoływania częściowy który może, ale nie musi istnieć?

Answer 1

Z perspektywy czasu, najlepszym rozwiązaniem ty pewnie użyj JavaScript, aby warunkowo załadować zasoby lub moduły kompozycji.

Answer 2

Nie można wyraźnie użyć dyrektywy importowej wewnątrz dyrektyw sterujących.

"Nie można zagnieździć @import w obrębie dyrektyw mixin lub dyrektyw kontrolnych." - Sass Reference

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

Jeśli naprawdę potrzebują tego rodzaju istnieją sposoby poruszania się po niej z dyrektywą @content. Ale to naprawdę zależy od tego, do czego naprawdę dąży twoje zadanie.

Jednym z przykładów, które produkują wiele wyjść plików .css do każdego tematu, można podejść tak:

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

W innym przypadku, aby produkować wiele opcji rozrywki w jednym wyjściu .css może trzeba polegać na kompleksowej pętli tak:

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