1

所以我最近一直在玩 CSS 编译器，但我不知道如何（或者是否可能）动态生成选择器的片段。

例如，假设我想制作 mixins 来获得

display: inline-block;

跨浏览器工作。我必须做样式，是的，但我必须做 IE6/7 选择器黑客才能让它们也能在这些浏览器中工作。理想情况下，我正在寻找一种一次性的东西来添加到一个元素中，并有能力让它发挥作用。最近某个好心人给了我这个解决方案：CSS compilers and convert IE hacks to conditional css

并且以一种允许我为给定元素指定它并在路上的最小方式实现它会很好（例如在Less中，您可以创建一个带有样式的类，将该类传递给另一个元素，并且该元素将继承所有这些样式。传递一个元素 .inline-block 会很好；它可以创建支持 IE6/7 所需的样式，而无需求助于类似的东西

_color: pink;

有任何想法吗？

编辑：例如，我怎么能为 LESS 做类似 clearfix 的事情？（lesscss.org）？如果 Sass 只能做到这一点，那么它也可以。

4

3 回答 3

3

所以我在文档中做了一些挖掘和一些实验，Sass（让我松了一口气）支持这一点，尽管我不认为 LESS 支持（这就是为什么它被放弃而支持 Sass）。

您可以将 & 号用作指向您在定义中使用的选择器的指针，并且该 & 号在嵌套声明中的位置不必在前面，您可以将选择器放在它之前。例如，您可以使用条件 IE 标记以不使用 hack 的方式在同一样式表中定位 IE。以下使用 SCSS 表示法（但应该可以使用缩进表示法）：

@mixin inline-block {

// Cross browser implementation of the inline-block attribute

  display: inline-block;
  body.ie6 & { display: inline; }
  body.ie7 & { display: inline; }

}

你所要做的就是把它放在你想要的任何东西上：

#foo { @include inline-block; }

它将生成/管理所有跨浏览器的内联块内容：

#foo { display: inline-block; }
body.ie6 #foo { display: inline; }
body.ie7 #foo { display: inline; }

处理跨浏览器问题的语义方式，不再需要处理为样式管理 2 个不同文件的繁琐方法（这对我来说是愚蠢的），不再有代码块令人眼花缭乱的问题。

编辑：当然，旧文档中说明了该功能，而不是新文档，这就是我找不到它的原因。

于 2010-05-01T02:54:21.393 回答
0

compass 提供了 inline-block 的跨浏览器实现，这是一个建立在 sass 之上的框架：

http://compass-style.org/docs/reference/compass/css3/inline_block/#mixin-inline-block-scss

于 2010-05-10T17:39:05.260 回答
0

http://jsfiddle.net/zsitro/G74pT/

在这里，您可以看到内联块的跨浏览器解决方案。简单而简短。

上面的例子不会给 IE 中的元素布局。zoom例如，您需要。

于 2012-03-02T08:54:44.880 回答