@import在萨斯@if声明(@import in @if statement in Sass)

2019-07-05 07:04发布

我想要只载入需要的性能登录页面的CSS。 在我的其他网页我想,这将包含我所有的CSS每一页上缓存分组的css文件。

我有以下文件:

minifiedcssforloginpage.scss
grouped-pages.scss

在minifiedcssforloginpage.scss我宣布$加载完成,CSS:假的。 后来我导入myproject.scss其中包含我的模块,布局,核心所有的进口...在myproject.scss我想这样做

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

所以minifiedcssforloginpage.scss会产生用更少的CSS,然后进行分组,pages.css minifiedcssforloginpage.css(即有一个变量$载完成,CSS设置为true)。

但是,我得到一个错误,这是不可能的“导入指令可能无法控制指令或混入内使用”。

Answer 1:

这是的,这只是不允许的事情之一。 你能做的唯一的事情就是把这些进口混入(导入文件外@if并调用混入如适用)。

澄清:

_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)
  • 使用控制指令或混入(#779)内@import声明
  • 允许可选@imports(#779)
  • 动态相关性(#739)


Answer 3:

把你的风格融于不同的部分文件的方式,对你有意义。 然后,你可以创建一个登录页面,仅导入文件与相关风格的独立SASS文件。

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

这是目前无法使用SASS动态包含文件。 @import不能控制指令内使用(例如@if )或混入,在一个import指令使用可变是错误的语法,并且没有指令用于结束文件执行早期(这有效地将允许有条件的进口)。 但是,你可以通过改变你如何组织你的样式规则解决您的问题。

......如果你有[应]有条件地包括(他们)应该在混入封装,在“模块”或“库”文件样式。 ......其主要思想是, 导入一个这样的文件将不会输出任何CSS。 这样一来,就可以冗余导入这些文件,所以你可以在任何需要他们使用的混入。



文章来源: @import in @if statement in Sass