将样式从单个 Stylus 源文件中分离到不同的 CSS 文件中

Question

我在开发过程中一直使用这种技术来创建 IE 条件样式表：

http://clock.co.uk/blog/handling-ie-with-stylus

基本上，它允许我在非 IE 样式旁边编写 IE 特定的 CSS，它会自动将其拆分到一个新文件中。在大多数情况下，它很棒，但如果我要更改它的一件事，那就是它创建了 CSS 文件的 2 个完整副本，只有一个副本包含额外的 IE 特定样式。我想要做的是只有 IE 特定的样式出现在单独的文件中。

所以如果我在 Stylus 中做这样的事情

/* styles.styl */
.myDiv 
  +ie(8)
    width: 100px
  background: #000
  color: red

.other
  display: block
  width: 10px

我希望这 2 个文件看起来像这样：

/* styles.css: */
.myDiv {
  background: #000;
  color: red;
 }

.other {
  display: block;
  width: 10px;
}

/* styles-ie8.css: Just the IE specific styles */
.myDiv {
  width: 100px;
}

而不是 style-ie.css 以这样的方式结束：

/* styles-ie8.css: */
.myDiv {
  width: 100px; /* <-- includes the extra IE-specific style along with everything else */
  background: #000;
  color: red;
}

.other {
  display: block;
  width: 10px;
}

只是好奇这是否可能，谢谢！

Answer 1

如果不将 Stylus 的其余部分包裹在 +not-ie() 风格的 mixin 中（显然不推荐），或者以某种方式扩展 Stylus，我认为这是不可能的。

在 Clock，我们遇到了同样的问题——我们的目标是为每个浏览器提供一个样式表，而在单独的样式表中仅将额外的内容转到 IE8。不幸的是，我们找不到合适的方法来处理这个问题。

正如您所提到的，我们目前所做的是拥有 IE8 样式表中样式的完整副本，以及 IE8 特定样式。这样做的好处是我们现在只需要向 IE8 用户发送一个样式表，与上述方法相比，为他们节省了一个 HTTP 请求。

<!--[if gt IE 8]><!-->
link(rel='stylesheet', href='index.css')
<!--<![endif]-->
<!--[if lte IE 8]>
link(rel='stylesheet', href='index-ie8.css')
<![endif]-->

优秀的浏览器，包括 IE9+ 只能获得index.css。 IE8 及更低版本仅获取index-ie8.css。没有浏览器会两次获得相同的样式。

恐怕这不是您正在寻找的解决方案，但至少它是我们决策背后的一点推理。