@smport在Sass的@if语句中

Question

我只想加载登录页面所需的css以提高性能.在我的其他页面上,我想要一个分组的css文件,它将缓存在包含我所有css的每个页面上.

我有以下文件:

minifiedcssforloginpage.scss
grouped-pages.scss

在minifiedcssforloginpage.scss中,我声明$ load-complete-css:false.然后我导入myproject.scss,其中包含我的模块,布局,核心的所有导入...在myproject.scss中我想做类似的事情

@if $load-complete-css {
     @import module1;
     @import module2;
     @import module3;
}

因此minifiedcssforloginpage.scss将使用较少的css生成minifiedcssforloginpage.css,然后使用grouped-pages.css(将var $ load-complete-css设置为true)生成.

但是我得到一个错误,这是不可能的"导入指令可能不会在控制指令或mixins中使用".

Answer 1

这是其中一项不允许的事情.你唯一能做的就是将这些导入转换为mixins(在文件外导入文件@if并在适当的时候调用mixin).

澄清:

_partial.scss

@mixin partial {
    .test { color: red }
    // other styles here
}

styles.scss

@import "partial";
@if $someval == true {
    @include partial;
}

Answer 2

核心开发团队不愿意实施此功能,尽管他们正在考虑实施全新的依赖系统.

请参阅以下Github问题:

• 在@if中允许@import(#451)
• 在控制指令或mixins中使用@import语句(#779)
• 允许可选的@imports(#779)
• 动态依赖关系(#739)

Answer 3

以对您有意义的方式将您的样式放入各种部分文件中.然后,您可以为登录页面创建单独的SASS文件,该文件仅导入具有相关样式的文件.

引用我对另一个问题的回答:

目前无法使用SASS动态包含文件. @import不能在控制指令(例如@if)或mixins中使用,在import指令中使用变量是错误的语法,并且没有指令提前结束文件执行(这 实际上允许条件导入).但是,您可以通过更改样式规则的结构来解决问题.

...如果您有[应该]有条件地包含的样式[they]应该封装在mixins中,在'module'或'library'文件中....主要思想是导入一个这样的文件不会输出任何CSS.这样,您可以冗余地导入这些文件,以便您可以在任何需要的地方使用mixins.