CSS @import和它的顺序问题

Question

在一个 CSS 文件中是否可以像这样使用 @import。

@import file1
some css here
@import file2

Chrome不会识别上述第二个导入，但这样可以解决问题。

@import file1
@import file2
some css here

这里的问题是我需要将“一些CSS”放在中间，因为file2将覆盖其中的一些。除了从html导入3个文件之外，还有其他解决方案吗？

- Athiwat Chunlakhan

---

你认为@import会按照特定的顺序处理文件...但实际上可能不是这样。http://www.stevesouders.com/blog/2009/04/09/dont-use-import/ - Webveloper

Answer 1

这是不可能的:

根据http://www.w3.org/TR/CSS21/cascade.html#at-import:

'@import'规则允许用户从其他样式表中导入样式规则。在CSS 2.1中，任何@import规则都必须位于所有其他规则之前（如果存在，则除@charset规则之外）。

根据http://www.w3.org/TR/CSS21/syndata.html#at-rules:

例如，假设CSS 2.1解析器遇到此样式表：

@import "subs.css";
h1 { color: blue }
@import "list.css";

第二个'@import'在CSS 2.1中是非法的。CSS 2.1解析器会忽略整个@规则，从而将样式表有效地缩减为：

@import "subs.css";
h1 { color: blue }

---

不需要在@import之间定义规则。如果您想要覆盖文件1中的属性，则它们也可以在@import块之后添加。在文件2中被覆盖的属性可以省略。

- Rob W

---

@JonathanShepherd 谁说你必须把CSS放在中间？如果第二个CSS文件中没有定义body {padding-top: ...; padding-bottom: ..;}或者padding:，那么你可以安全地将其放在第二个@import规则之后。 - Rob W

以下是我可能遇到的三种情况，为了澄清我上面所说的：

1. 启动 > 代码 > 响应 = 完美。适用于桌面和移动设备。
2. 启动 > 响应 = 内容未填充，导航栏被覆盖。
3. 启动 > 响应 > 代码 = 桌面视图完美，移动视图在导航栏和内容顶部添加填充。

如果需要一些测试代码，我可以添加它们。 - Athiwat Chunlakhan

@JonathanShepherd 我所能想到的唯一解决方法需要一个额外的标签：http://pastebin.com/VBD5Vcu1 - Rob W

我找到了一个解决方案，唯一的方法是手动将所有三个CSS文件合并为一个文件，并导入它。我会标记您的答案为正确，但对于其他寻找此解决方案的人，请查看此评论。谢谢。 - Athiwat Chunlakhan

@GeorgeKatsanos 这就是为什么我将其删除并手动组合所有内容的原因。 - Athiwat Chunlakhan

Answer 2

正如其他人所说，这是无效的CSS，但我想再加上我的两分钱。如果你正在寻找一种方法来解决这个问题，同时编写更好的CSS（即更简洁，更易于阅读和维护的CSS），那么你可以使用SASS。它是一个增强CSS语法并生成有效CSS文件以供浏览器使用的程序。它被安装为Ruby gem，并且可以通过以下方式启动：

sass --watch  style.scss:style.css

每次修改style.scss文件时，都会编译出一个新的style.css文件。在SASS中，.scss是标准的SASS源文件扩展名。以下是有效的SASS代码。

@import "import1.scss";

a {
  color: red;
}

@import "import2.scss";

并编译成以下style.css

a {
  /* This is the content of import1.scss */
  color: white;
}
a {
  color: red;
}
a {
  /* This is the content of import2.scss */
  color: white;
}

请注意，我导入以scss结尾的文件。根据SASS参考文档中的说明，这不会回退到常规的CSS导入。

- Raffaele

---

看起来是一个非常好的不错的解决方案，但我已经在客户端使用LESS了。从我所读的内容来看，Sass是在服务器端工作的，应该可以与LESS一起使用。我会去看看这个。谢谢@Raddaele - Athiwat Chunlakhan

你点赞的意思是说我可以在当前的 CSS 模块中任何地方导入其他 CSS 文件吗？ - amdev

Answer 3

这很奇怪，但CSSWG故意禁止在属性规则后使用@import。

他们说：

灵活性包括工作组能够在样式表的某个时刻之后分配一些含义给@import，而新行为不会与现有做法在某些方面发生冲突。您可以将当前要求解释为，在找到比现在使用它具有更大价值的用途时，工作组将保留在某些点使用@import规则的权利。现在指定一个特定的含义可能会消除该选项，因此从长远来看，这可能是一种损失。

此外，他们还说@import本身会降低下载速度（虽然这是一个薄弱的论点，因为无论@import放在属性规则前还是后都没有关系，但前者是允许的）。

因此，我们被迫使用解决方法，例如使用一个“TOC”样式表，其中仅包含按所需顺序的@imports（但这会增加浏览器需要下载的文件数量）。

- Marat Tanalin

---

说实话，速度并不重要。在压缩后的产品时间中，我的两个测试用例都能正常工作。压缩引擎可以很好地处理两种类型的导入。问题在于开发和如何构建脚本，我无法更改它的工作方式。它通过仅压缩“style.css”中的所有CSS来工作，我必须使用导入来获取其他CSS。因此，我现在的解决方案是手动合并它们，这很好地解决了问题。 - Athiwat Chunlakhan

Answer 4

使用!important来防止被覆盖

类似这样的

<style>
.el{color:red !important;}
.el{color:blue;}
</style>

颜色将保持为红色

- Maurice