@smport在Sass的@if语句中 [英] @import in @if statement in Sass

问题描述

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

I want to load only the css needed for the login page for performance. On my other pages I want a grouped css file that will be cached on every page which contain all my css.

我有以下文件：

minifiedcssforloginpage.scss
grouped-pages.scss

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

In minifiedcssforloginpage.scss I declare $load-complete-css:false. Afterwards I import myproject.scss which contains all the imports of my modules, layouts, core... In myproject.scss i want to do something like

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

因此minifiedcssforloginpage.scss将生成minifiedcssforloginpage.css，其中css更少，然后是分组页面.css（将var $ load-complete-css设置为true）。

So minifiedcssforloginpage.scss would generate minifiedcssforloginpage.css with less css then grouped-pages.css (that has a var $load-complete-css set to true).

但是我收到一个错误，这是不可能的可能不会使用导入指令在控制指令或混合中。

But I get an error that this is not possible "Import directives may not be used within control directives or mixins".

推荐答案

这是其中一项不允许的事情。您唯一能做的就是将这些导入转换为mixins（将文件导入 @if 之外，并在适当的时候调用mixin）。

It's one of those things that's just not allowed. The only thing you can do is turn those imports into mixins (import the file outside the @if and call the mixin where appropriate).

澄清：

_partial.scss

_partial.scss

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

styles.scss

styles.scss

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

这篇关于@smport在Sass的@if语句中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！