Question

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

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

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

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

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

.other
  display: block
  width: 10px

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

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

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

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

而不是样式 - 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

我不相信如果不将你的手写笔的其余部分包裹在+not-ie()样式mixins中（显然不推荐），或以某种方式扩展Stylus，我都不会这样做。

在Clock，我们遇到了同样的问题 - 旨在为每个浏览器提供一个样式表，只需要在单独的样式表中将IE8添加到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。没有浏览器两次获得相同的样式。

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

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

1 个答案: