SASS - 有条件地包含基于变量上下文的样式

时间:2015-07-22 11:26:14

标签: css sass

我正在寻找一种基于上下文有条件地包含内容的方法。两个输出文件将引入相同的sass文件,但只是以不同的方式处理它们。我会想象它与@content mixin的工作方式类似,只是没有同时拉出mixin之外的所有其他样式。我只需要mixin中包含的内容。有没有人有任何想法我怎么能做到这一点?

它与https://github.com/at-import/jacket非常相似,但没有指南针依赖性。我已经包含了一个例子,所以你可以看到我追求的是什么:

 // _styles.scss

 h1 {
     color: red;
 }

 h2 {
     color: green;
 }

 @include critical {
     .someModule {
         background-color: red;
         height: 50px;
     }
 }

然后将这些导入到两个单独的样式表中,如此

 // output.scss
 @import "styles";

 // critical.scss
 @import "styles";

但是当SASS编译时,你最终会得到:

// output.css

h1 {
    color: red;
}

h2 {
    color: green;
}    

// critical.css

.someModule {
    background-color: red;
    height: 50px;
}

而不是output.css和critical.css都包括内容:

// output.css and critical.css

 h1 {
     color: red;
 }

 h2 {
     color: green;
 }

 .someModule {
     background-color: red;
     height: 50px;
 }

0 个答案:

没有答案