Question

我想生成各种css文件，例如：

global.css中
mobile.css
tablet.css
desktop.css
移动forum.css
表forum.css

等我有这样的HTML代码：

<link rel="stylesheet" media="all and (max-width: 450px)" href="assets/css/mobile.css">
<link rel="stylesheet" media="all and (min-width: 450px) and (max-width: 1024px)" href="assets/css/tablet.css">
<link rel="stylesheet" media="all and (min-width: 1024px) and (max-width: 1264px)" href="assets/css/desktop.css">
<link rel="stylesheet" media="all and (min-width: 1264px)" href="assets/css/widescreen.css">

所以我用这样的内容创建了每个* .scss：

在desktop.scss中

$mode: "desktop";
@import "main";

在_main.scss中

我创建了这样的变量：

$desktop: false;
@if $mode == 'desktop' {
$desktop: true;
}

所以问题就是这样。我想使用_normilize.scss

@if $global {
    @import "parts/normalize";
}

但我在这里有错误：

Syntax error: Import directives may not be used within control directives or mixins.
    on line 3 of /opt/code/host/resulinkpro/design/assets/sass/_main.scss

使用指南针观察

进行编译

我的问题是：

我可以完成这项工作（其他版本的SCSS或COMPASS）吗？
如果不是可以有任何替代方案吗？主要思想包含_main.scss和嵌套文件中的逻辑，而不是global.scss或mobile.scss中的逻辑（我只是在那里启用模式而已，仅此而已）
或者LESS会更好地完成这项任务吗？

我的主要想法是避免不需要的媒体查询，这使得.css更小，然后使用javascript替换模式（目前在标签中使用媒体属性）。也只在浏览器中使用必要的样式。

@if项目逻辑中的SCSS @import

0 个答案: