编译和维护特定于样式的样式表

小编典典

编译和维护特定于样式的样式表

css

在单独的CSS文件中维护IE解决方法的常用做法是什么？
我说的是更深层次的问题，这些问题是无法通过其他方法解决的（例如，包括备用图像url和base64编码的嵌入式资源； boxsizing.htc解决方法等。）
注意：考虑到dataURI与香草味，所以只有少数

有时我不得不诉诸类似于

.some-class-lets-say-datepicker {
  background-image: url(data:image/png;base64,/*encoded image*/);
  *background-image: url(../gfx/lets-say-datepicker-icon.png);
}

编码的图像字符串平均为100〜300个字符。给定上面的代码，这将导致一些冗余通信-
兼容的浏览器将下载冗余URL，IE7将在单独的图像请求之上下载base64字符串。我发现这笔开销对于两者而言都是微不足道的（毕竟，IE7用户还有很多更大的问题要担心：）

同时，以下内容（？）会更干净：

<!--[if !IE]> -->
  <link href="main.css" rel="stylesheet" />
<!-- <![endif]-->
<!--[if lt IE 8]>
  <link href="main_ie.css" rel="stylesheet"/>
<![endif]-->

但是单独维护似乎一点也不吸引人。Closure-stylesheets提供条件，SASS / LESS是否有类似的东西，或者您建议使用完全不同的方法？

阅读 254

2020-05-16

共1个答案

小编典典

如果您可以生成2个不同的样式表，那么Sass（版本3.2及更高版本）可以很容易地做到这一点。

这是您的mixins：

$ie-only: false !default;

@mixin hide-from-ie {
    if $ie-only != true {
        @content;
    }
}

@mixin show-only-ie {
    if $ie-only == true {
        @content;
    }
}

在您的SCSS文件中：

.some-class-lets-say-datepicker {
    @include hide-from-ie {
        background-image: url(data:image/png;base64,/*encoded image*/);
    }

    @include show-only-ie {
        background-image: url(../gfx/lets-say-datepicker-icon.png);
    }
}

制作一个单独的IE专用文件，该文件将导入您的其他SCSS文件，但该文件位于顶部：

$ie-only: true;

使用条件注释为旧的IE版本提供已生成的css文件，其中$ ie-only设置为true，其他所有浏览器都将生成的$ ie-
only设置为默认false的文件。

2020-05-16