如何从主 scss 文件中分离 ie hacks 代码答案

【问题标题】：How to separate ie hacks code from main scss file如何从主 scss 文件中分离 ie hacks 代码
【发布时间】：2013-05-30 07:23:40
【问题描述】：

我在我的项目中使用 sass 和 compass。然而，它为 i.e.hacks 提供了一个非常酷的 mixin。

例如：

.display { @include inline-block; }

将执行

.display {  display: -moz-inline-stack;
   display: inline-block; 
   vertical-align: middle;
   *vertical-align: auto;
   zoom: 1;
   *display: inline;
}

但我想将所有 ie hacks 代码分离到不同的 css 文件中，例如 ie.css，并希望将其放在 ie 条件 cmets 中，以便我的 css 文件与 w3c 兼容。

有什么办法可以克服这个问题吗？任何帮助都将不胜感激。提前致谢。

【问题讨论】：

作为记录，SASS 的@import 指令明确不将 .css 文件中的代码包含到 SASS 输出中。

标签： sass compass-sass

【解决方案1】：

只需创建两个“父”sass 文件。例如screen.scss & ie.scss 将所有实际的 sass 放入单独的“子”scss 文件中。然后在您的“父”文件中只有导入语句。

示例：

SCREEN.SCSS

//Global
@import "vars";
@import "mixins";

//Base
@import "reset";
@import "base";
@import "layout";    

//MODULES
@import "modules/module_a";
@import "modules/module_b";

IE.SCSS

@import "vars";
@import "mixins";
@import "ie_hacks";

这让你可以像任何变量或 mixins 一样导入所有依赖于 sass 的“子”文件。它还允许您将所有 ie 内容保存在单独的 css 文件中。 ie.scss 显然会比你的主要screen.scss 小很多

【讨论】：